点击时无需完全重建视图，动态修改SwiftUI视图视觉属性

问题需求 #

点击Color.red视图时添加选中状态边框，且避免完全重建视图。此前尝试的两种方案存在问题：

• 通过@State变量selected控制视图分支：会触发整个视图重建
• 设置零宽度边框并修改宽度：适用性有限

优化方案 #

利用SwiftUI的条件修饰符，在同一视图主体上动态调整边框属性，而非切换视图分支，这样就不会触发视图重建。

方案1：直接使用.border条件控制 #

struct SelectableColor: View, CustomizationOption {
    @State var selected: Bool = false
    var color: Color = .red
    
    init(color: Color) {
        self.color = color
    }
    
    var body: some View {
        color
            .cornerRadius(5)
            .shadow(color: .gray, radius: 6, x: 0, y: 3)
            // 未选中时用透明色隐藏边框，选中时显示蓝色边框
            .border(selected ? .blue : .clear)
            .onTapGesture {
                selected.toggle()
            }
    }
}

方案2：使用.overlay实现更灵活的边框 #

如果需要自定义边框线宽、圆角等细节，推荐用overlay叠加描边矩形：

struct SelectableColor: View, CustomizationOption {
    @State var selected: Bool = false
    var color: Color = .red
    
    init(color: Color) {
        self.color = color
    }
    
    var body: some View {
        color
            .cornerRadius(5)
            .shadow(color: .gray, radius: 6, x: 0, y: 3)
            .overlay(
                // 与主体圆角一致的描边矩形，根据选中状态控制显示
                RoundedRectangle(cornerRadius: 5)
                    .stroke(selected ? .blue : .clear, lineWidth: 2)
            )
            .onTapGesture {
                selected.toggle()
            }
    }
}

原理说明 #

• 之前的if-else分支会让SwiftUI识别为两个独立的视图，状态切换时会销毁旧视图并重建新视图
• 条件修饰符是在同一视图实例上修改属性（如边框颜色、描边状态），SwiftUI只会更新需要变化的部分，不会触发整个视图的重建

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