SwiftUI自定义颜色嵌入List后在设备/模拟器显示异常（预览正常）

问题根源 #

SwiftUI的List（包含Section）会为内部子视图注入默认环境配置，其中包含对颜色饱和度的自动调整，导致你通过.accentColor()设置的自定义颜色被淡化，出现显示平淡的问题。

解决方案 #

以下是几种可行的修复方式，按推荐优先级排序：

1. 直接设置图片前景色（最稳妥）

绕过系统的accentColor/tint环境机制，直接给图标指定前景色，完全不受List环境干扰：

struct CustomColorPicker: View {
    @Binding var selectedColor: Color
    let colors: [Color] = [Color("my_blue"),
                           Color("my_blue_light"),
                           Color("my_yellow"),
                           Color("my_red"),
                           Color("my_green"),
                           Color("my_pink"),
                           Color("my_orange"),
                           Color("my_purple")]
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 18) {
                ForEach(colors, id: \.self) { color in
                    Button(action: {
                        self.selectedColor = color
                    }) {
                        Image(systemName: self.selectedColor == color ? "checkmark.circle.fill" : "circle.fill")
                            .resizable()
                            .frame(width: 25, height: 25)
                            .foregroundColor(color) // 直接设置前景色
                    }
                }
            }
        }
    }
}

2. 用.tint()替代.accentColor()

iOS 15+中.accentColor()已被.tint()替代，且.tint()在List环境中的优先级更高，不易被系统覆盖：

// 修改CustomColorPicker中的Button修饰符
Button(action: {
    self.selectedColor = color
}) {
    Image(systemName: self.selectedColor == color ? "checkmark.circle.fill" : "circle.fill")
        .resizable()
        .frame(width: 25, height: 25)
}.tint(color) // 替换accentColor为tint

3. 隔绝List的环境影响

给CreateEmojiColor添加背景和行配置，脱离List的环境设置：

struct CreateEmojiColor: View {
    @State private var selectedColor = Color("my_blue")
    
    var body: some View {
        VStack {
            CustomColorPicker(selectedColor: $selectedColor)
                .padding(.vertical)
        }
        .background(Color(UIColor.systemBackground))
        .listRowInsets(EdgeInsets())
    }
}

内容的提问来源于stack exchange，提问作者helloimbrando