從程式設定籌碼圖片的顏色和金額

從以下連結下載籌碼圖片

Chip free icons designed by Andrejs Kirma

將圖片加到 asset，設為 Template Image

設定圖片顏色，將圖片變成 Template Image

SwiftUI 程式範例

定義籌碼圖片的 ChipView。

struct ChipView: View {
    let number: Int
    let color: Color
    
    var body: some View {
        Image("chip")
            .resizable()
            .scaledToFit()
            .frame(width: 100)
            .foregroundColor(color)
            .background(content: {
                Color.white
            })
            .clipShape(Circle())
            .overlay {
                Text("\(number/1000)K")
                    .font(.custom("Chalkboard SE", size: 25))
                    .foregroundColor(.white)
            }
    }
}

App 畫面。

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.green
                .ignoresSafeArea()
            
            HStack {
                ChipView(number: 1000, color: .red)
                ChipView(number: 10000, color: .blue)

            }
        }
       
    }
}

漸層的籌碼

iOS 15 以上可呼叫 foregroundStyle 設定漸層。

struct ChipView: View {
    let number: Int
    let color: Color
    
    var body: some View {
        Image("chip")
            .resizable()
            .scaledToFit()
            .frame(width: 100)
            .foregroundStyle(color.gradient)
            .background(content: {
                Color.white
            })
            .clipShape(Circle())
            .overlay {
                Text("\(number/1000)K")
                    .font(.custom("Chalkboard SE", size: 25))
                    .foregroundColor(.white)
            }
    }
}

使用 RadialGradient 生成放射漸層。

struct ChipView: View {
    let number: Int
    let color: Color
    
    var body: some View {
        Image("chip")
            .resizable()
            .scaledToFit()
            .frame(width: 100)
            .foregroundStyle(
                RadialGradient(gradient: Gradient(colors: [color, Color.black]), center: .center, startRadius: 5, endRadius: 100)
            )
            .background(content: {
                Color.white
            })
            .clipShape(Circle())
            .overlay {
                Text("\(number/1000)K")
                    .font(.custom("Chalkboard SE", size: 25))
                    .foregroundColor(.white)
            }
    }
}