利用 SwiftUI 的 background 設定背景顏色，背景圖片，漸層背景 & 圓角背景

新版做法: 利用 SwiftUI 的 background(_:in:fillStyle:) 設定背景，用顏色、漸層、圖片填滿形狀

利用 SwiftUI 的 background(_:in:fillStyle:) 設定背景，用顏色、漸層、圖片填滿形狀

以下為舊版做法。

設定背景顏色

Text("黑的白的紅的黃的 紫的綠的藍的灰的")
    .background(.yellow)

圖片裡的文字是 Paggy 的氣球歌詞

文字 padding 加上背景顏色

Text("黑的白的紅的黃的 紫的綠的藍的灰的")
    .padding()
    .background(.yellow)

多層顏色堆疊的背景

結合多個 frame & background，我們還可以設計出多層顏色堆疊的背景。

struct ContentView: View {
    
    var body: some View {
        Text("黑的白的紅的黃的 紫的綠的藍的灰的")
           .background(.blue)
           .frame(width: 300, height: 100)
           .background(.yellow)
           .frame(width: 400, height: 150)
           .background(.red)
    }
}

為什麼可以變成多層背景呢 ? 讓我們將例子簡化，先看看以下程式碼。

Text("黑的白的紅的黃的 紫的綠的藍的灰的")
    .background(.blue)
    .frame(width: 300, height: 100)

我們先加了藍色背景，再設定大小 300 * 100，因此 Text 的大小是 300 * 100，然而藍色背景並沒有填滿 300 * 100 的空間。

我們在設定大小 300 * 100 後再設定黃色背景，此時藍色文字區塊將蓋在 300 * 100 的黃色背景上。

Text("黑的白的紅的黃的 紫的綠的藍的灰的")
    .background(.blue)
    .frame(width: 300, height: 100)
    .background(.yellow)

除了剛剛的方法，我們也可以直接在設為背景的 Color.yellow 上設定它的 frame 大小，實現跟剛剛一樣的效果。

Text("黑的白的紅的黃的 紫的綠的藍的灰的")
    .background(.blue)
    .background {
        Color.yellow
            .frame(width: 300, height: 100)
    }

設定背景圖片

設定背景圖片時有一些要注意的小地方，比方我們先看幾個有問題的例子:

假設我們想將以下圖片設為背景。

struct ContentView: View {
    var body: some View {
        Text("黑的白的紅的黃的 紫的綠的藍的灰的\n你的我的他的她的 大的小的圓的扁的\n好的壞的美的醜的 新的舊的各種款式\n各種花色任你選擇")
           .padding()
           .background {
               Image("texture")
                   .opacity(0.3)
           }
        }
}

問題: Image 沒有呼叫 resizable，圖片自私地維持原來的大小，而不是在文字的框框裡。

struct ContentView: View {
    var body: some View {
        Text("黑的白的紅的黃的 紫的綠的藍的灰的\n你的我的他的她的 大的小的圓的扁的\n好的壞的美的醜的 新的舊的各種款式\n各種花色任你選擇")
           .padding()
           .background {
               Image("texture")
                   .resizable()
                   .opacity(0.3)
           }
        }
}

問題: 呼叫 resizable 後，圖片的大小和文字框框一致，但是因為比例跟圖片原本的比例不同，所以它變形了，圖片裡的小圓點變成橢圓形。

為了讓圖片維持比例不變形，我們還要再呼叫 scaledToFill。不過此時它又會超過文字的框框，所以記得要在 Text 上呼叫 clipped，將超出文字框框的部分切掉。

struct ContentView: View {
    var body: some View {
        Text("黑的白的紅的黃的 紫的綠的藍的灰的\n你的我的他的她的 大的小的圓的扁的\n好的壞的美的醜的 新的舊的各種款式\n各種花色任你選擇")
           .padding()
           .background {
               Image("texture")
                   .resizable()
                   .scaledToFill()
                   .opacity(0.3)
                   .clipped()
           }
        }
}

設定漸層背景

我們也時常將背景設為漸層色，以下示範各種不同的漸層寫法。

• 從 Color 資料讀取 gradient 產生某個顏色的漸層。

struct ContentView: View {
    var body: some View {
        Text("黑的白的紅的黃的 紫的綠的藍的灰的\n你的我的他的她的 大的小的圓的扁的\n好的壞的美的醜的 新的舊的各種款式\n各種花色任你選擇")
            .padding()
            .background(.yellow.gradient)
           
    }
}

• Gradient。

struct ContentView: View {
    var body: some View {
        Text("黑的白的紅的黃的 紫的綠的藍的灰的\n你的我的他的她的 大的小的圓的扁的\n好的壞的美的醜的 新的舊的各種款式\n各種花色任你選擇")
            .padding()
            .background(Gradient(colors: [
                .red,
                .blue
            ]))
           
    }
}

• LinearGradient。

struct ContentView: View {
    var body: some View {
        Text("黑的白的紅的黃的 紫的綠的藍的灰的\n你的我的他的她的 大的小的圓的扁的\n好的壞的美的醜的 新的舊的各種款式\n各種花色任你選擇")
           .padding()
           .background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .leading, endPoint: .trailing))
    }
}

產生 LinearGradient 的參數說明。

• gradient: 設定漸層由哪些顏色組成。

參數的型別為 Gradient，生成 Gradient 時我們可傳入 Color 的 array，描述漸層有哪些顏色。

• startPoint & endPoint: 調整漸層的方向。

比方 startPoint 為 .leading，endPoint 為 .trailing 時，漸層顏色將由左而右變化(ps: 假設系統的語言是由左向右的語言，比方英文和中文)。

當 startPoint 為 .top，endPoint 為 .bottom 時，漸層顏色將由上而下變化。

LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: .top, endPoint: .bottom)

我們也可以傳入 UnitPoint 指定顏色變化的方向，如下圖所示，利用 UnitPoint 描述 startPoint & endPoints 時，左上角的位置為 (0,0)，右下角為 (1,1)。

因此以下程式的漸層顏色將由左上往右下變化。

Text("黑的白的紅的黃的 紫的綠的藍的灰的\n你的我的他的她的 大的小的圓的扁的\n好的壞的美的醜的 新的舊的各種款式\n各種花色任你選擇")
   .padding()
   .frame(width: 300, height: 300)
   .background(LinearGradient(gradient: Gradient(colors: [.red, .blue]), startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 1)))

• AngularGradient。

AngularGradient(gradient: Gradient(colors: [.red, .blue]), center: .center)

• RadialGradient。

RadialGradient(gradient: Gradient(colors: [.red, .blue]), center: .center, startRadius:
5, endRadius: 150)

設定圓角背景

將 RoundedRectangle 設為背景。

struct ContentView: View {
    var body: some View {
        Text("黑的白的紅的黃的 紫的綠的藍的灰的\n你的我的他的她的 大的小的圓的扁的\n好的壞的美的醜的 新的舊的各種款式\n各種花色任你選擇")
           .padding()
           .background {
               RoundedRectangle(cornerRadius: 30)
                   .foregroundStyle(.yellow)
           }
    }
}