🔸template image

SwiftUI ⟩ control ⟩ Image ⟩ template image

一般的圖片會保留其原始的色彩，無論前景色如何變化，圖片的顏色都不會改變。而 template images 則不同，它們是只有輪廓的圖片，其顏色會受到前景色設定的影響。

// ⭐️ 將一般圖片設為 template image
Image("heart").renderingMode(.template)

它們支援動態色彩變更，圖片的外觀會根據環境自動調整，如：深色模式(dark mode)和淺色模式(light mode)。

SF Symbols：天生就是 template image。

          
// 1. 紅色的愛心
//    foregroundColor() 設定不影響圖片顏色，愛心仍然是原來的顏色
image(color: .blue)

// 2. ⭐️ 設為 template image (愛心變藍色)
image(color: .blue, template: true)

// 3. ⭐️ SF Symbols 天生就是 template image
Image(systemName: "heart.fill")
    // .font(.system(size: 150))    // frame 會超過 150
    .resizable()
    .scaledToFit()
    .frame(height: 150)
    .foregroundColor(.green)
    .border(.yellow)

// private method
func image(color: Color, template: Bool = false) -> some View {

    Image("heart")
    
        // ⭐️ 設為 template image ?
        .renderingMode(template ? .template : .original)
    
        .resizable()
        .scaledToFit()
        .frame(width: 150, height: 150)
    
        .foregroundColor(color) // 這個設定會讓愛心變成藍色
        .border(.yellow)
}

Previousimage.renderingMode()NextSF Symbols

Last updated 1 year ago