SwiftUI：如何重置一组自定义Text元素的默认背景与前景色

核心问题 #

1. 用Bool类型的@State作为重置信号，点击后无法自动复位，导致后续点击重置按钮无法再次触发重置逻辑
2. MyText内部的tapped状态是本地@State，父组件无法直接控制重置，当前代码仅靠reset的临时值切换颜色，没有真正重置tapped状态，导致后续点击元素时状态混乱

修复方案 #

方案1：一次性触发信号（推荐） #

把重置信号改成UUID?类型，每次点击重置按钮生成新的UUID作为触发标记，MyText监听这个标记的变化，自动重置自身状态。

修改后的完整代码：

enum Categories: String, CaseIterable, Identifiable {
    case CategoryA, CategoryB, CategoryC
    var id: Self { self }
}

struct MyApp: View {
    // 用可选UUID作为一次性重置触发信号
    @State private var resetTrigger: UUID?
    
    var body: some View {
        VStack (alignment: .leading, spacing: 0){
            HStack {
                Text("Categories")
                Spacer()
                Button(action: {
                    // 生成新UUID触发重置
                    resetTrigger = UUID()
                }){
                    Text("Reset")
                }
            }.padding()
            HStack(alignment: .center){
                ForEach(Categories.allCases){ item in
                    MyText(resetTrigger: $resetTrigger, label: item.rawValue)
                }
            }.padding()
        }.background(Color.gray)
    }
}

struct MyText: View {
    @State private var tapped = false
    @Binding var resetTrigger: UUID?
    
    private var bgCol: Color {
        tapped ? .blue : .white
    }
    
    private var fgCol: Color {
        tapped ? .white : .blue
    }
    
    var label: String
    
    var body : some View{
        Text(label)
            .padding()
            .background(bgCol)
            .foregroundColor(fgCol)
            .cornerRadius(12)
            .onTapGesture {
                tapped.toggle()
            }
            // 监听重置信号变化，触发状态重置
            .onChange(of: resetTrigger) { _ in
                tapped = false
            }
    }
}

struct App_Preview: PreviewProvider {
    static var previews: some View {
        MyApp()
    }
}

方案2：修复原Bool信号逻辑 #

如果坚持用Bool，可以在点击重置按钮后，异步将reset设回false，同时MyText监听reset变为true的时机来重置状态：

struct MyApp: View {
    @State private var reset = false
    
    var body: some View {
        VStack (alignment: .leading, spacing: 0){
            HStack {
                Text("Categories")
                Spacer()
                Button(action: {
                    reset = true
                    // 异步切回false，避免界面卡顿
                    DispatchQueue.main.async {
                        reset = false
                    }
                }){
                    Text("Reset")
                }
            }.padding()
            HStack(alignment: .center){
                ForEach(Categories.allCases){ item in
                    MyText(reset: $reset, label: item.rawValue)
                }
            }.padding()
        }.background(Color.gray)
    }
}

struct MyText: View {
    @State private var tapped = false
    @Binding var reset: Bool
    
    private var bgCol: Color {
        tapped ? .blue : .white
    }
    
    private var fgCol: Color {
        tapped ? .white : .blue
    }
    
    var label: String
    
    var body : some View{
        Text(label)
            .padding()
            .background(bgCol)
            .foregroundColor(fgCol)
            .cornerRadius(12)
            .onTapGesture {
                tapped.toggle()
            }
            .onChange(of: reset) { newValue in
                if newValue {
                    tapped = false
                }
            }
    }
}

关键修改点 #

• 移除原依赖reset值判断颜色的逻辑：颜色仅由tapped状态控制，逻辑更清晰
• 重置信号改为触发式：要么用UUID每次生成新值，要么用Bool异步复位，确保每次点击重置按钮都能触发状态重置
• MyText监听重置信号：在信号触发时主动将tapped设为false，真正恢复默认状态

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