SwiftUI：如何创建可重复点击以展示新视图的按钮？

问题根源 #

你当前用布尔值isTapped控制PracticeResult的显示/隐藏，再结合onAppear切换状态，导致状态逻辑混乱：第一次点击按钮显示视图，但onAppear立刻把状态切回false，视图消失；第二次点击才会再次显示新内容。另外，PracticeResult的随机单词是在视图初始化时生成的，仅靠布尔值切换无法触发视图重建来生成新单词。

解决方案 #

放弃布尔值控制，改用计数器触发视图重建，每次点击按钮更新计数器，让PracticeResult因依赖值变化而重新初始化，生成新的随机单词。同时修正代码中的语法错误：

struct PracticeView: View {
    // 用计数器替代布尔状态，触发视图更新
    @State private var refreshCount = 0
    
    var body: some View {
        NavigationStack { // SwiftUI 3+推荐用NavigationStack替代NavigationView
            ZStack {
                Color.white
                VStack {
                    Image("lightlogolong")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 300, height: 100)
                        .cornerRadius(100)
                        .animation(.easeIn, value: refreshCount) // 用计数器作为动画触发值，更合理
                    
                    // 修正NavigationLink的语法错误，用toolbar添加返回按钮
                    NavigationLink(destination: ContentView()
                        .navigationBarBackButtonHidden(true)
                        .toolbar {
                            ToolbarItem(placement: .navigationBarLeading) {
                                HomeButton()
                            }
                        }) {
                        Text("返回首页") // 补充NavigationLink的显示内容，原代码缺失
                    }
                    
                    // 直接显示PracticeResult，用refreshCount作为依赖，值变化时重建视图
                    PracticeResult()
                        .id(refreshCount) // 关键：通过id让SwiftUI在refreshCount变化时重新创建PracticeResult实例
                    
                    Button("Next Word") {
                        refreshCount += 1 // 点击按钮更新计数器
                    }
                    .padding()
                    .frame(width: 150, height: 40)
                    .font(.title2)
                    .foregroundColor(.black) // accentColor已被foregroundColor替代（SwiftUI 3+）
                    .background(Color("appblue"))
                    .clipShape(Capsule())
                }
            }
        }
    }
}

关键修改点说明 #

• 用计数器替代布尔状态：refreshCount每次加1，作为触发PracticeResult重建的信号。
• .id(refreshCount)的作用：SwiftUI会根据id判断视图是否需要重建，当refreshCount变化时，PracticeResult会被重新初始化，从而生成新的随机单词。
• 修正Navigation语法：将过时的NavigationView替换为NavigationStack，用toolbar添加返回按钮，修复原代码中NavigationLink的语法错误。
• 移除混乱的onAppear逻辑：不再依赖布尔值的切换来控制显示，避免状态逻辑冲突。

额外建议 #

如果PracticeResult的随机单词生成逻辑是写在其内部的初始化方法中，上述修改就能直接生效。如果是通过绑定的状态变量控制，你可以把随机单词的状态提升到PracticeView中，点击按钮时直接更新单词内容，再传递给PracticeResult，这样更灵活：

// 假设你的单词类型是String
struct PracticeView: View {
    @State private var currentWord: String = ""
    
    var body: some View {
        NavigationStack {
            // ...其他视图代码...
            
            PracticeResult(word: currentWord)
            
            Button("Next Word") {
                currentWord = generateRandomWord() // 调用你的随机单词生成函数
            }
            // ...按钮样式...
        }
        .onAppear {
            currentWord = generateRandomWord() // 初始化第一个单词
        }
    }
    
    private func generateRandomWord() -> String {
        // 这里写你的随机单词生成逻辑
        let words = ["apple", "banana", "cat", "dog"]
        return words.randomElement() ?? ""
    }
}

// 修改PracticeResult接收绑定或直接传递单词
struct PracticeResult: View {
    let word: String
    
    var body: some View {
        Text(word)
            .font(.largeTitle)
    }
}

这种方式更符合SwiftUI的状态管理理念，把数据逻辑放在父视图，子视图只负责展示内容，状态变化更清晰。

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