SwiftUI TextField点击按钮验证特定输入的实现问题

核心逻辑非常简单，你只需要在Send按钮的点击事件最开头，先对输入内容做匹配校验，给TextFieldVal赋值即可，具体修改如下：

核心修改说明 #

• 先定义好要匹配的目标单词，比如示例中的Predator，后续需要修改校验规则直接改这个值即可
• 在按钮点击逻辑的最前面，判断当前输入框绑定的Textfield变量是否等于目标单词，将布尔结果直接赋值给TextFieldVal
• 可选适配：如果需要不区分大小写匹配，可以用lowercased()方法把输入内容和目标单词都转成小写再对比

修改后完整代码 #

@State var Textfield: String = ""
@State var Answer: String = ""
@State var ShowButton: Bool = false
@State var TextFieldVal: Bool = false
// 定义校验的目标单词
private let targetWord = "Predator"

var body: some View {
    // 要支持NavigationLink跳转外层必须套NavigationStack，iOS15及以下替换为NavigationView即可
    NavigationStack {
        VStack(spacing: 20) {
            Text(Answer)
                .frame(width: 400, height: 40, alignment: .center)
                .font(.title)
                .foregroundColor(Color.black)
            
            TextField("Type here you answer...", text: $Textfield)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .frame(width: 250, height: 40, alignment: .center)
                .background(Color.gray.opacity(0.5).cornerRadius(20))
                .foregroundColor(.red)
                .font(.headline)
            
            Button {
                // 核心校验逻辑：把匹配结果赋值给TextFieldVal
                // 严格大小写匹配写法
                TextFieldVal = Textfield == targetWord
                // 若需要不区分大小写，替换为下面这行即可
                // TextFieldVal = Textfield.lowercased() == targetWord.lowercased()
                
                if TextFieldVal == true {
                    ShowButton = true
                    Answer = "That is Correct!"
                } else {
                    Answer = "That is not correct"
                }
            } label: {
                Text("Send")
                    .frame(width: 250, height: 40)
                    .background(Color(red: 0.272, green: 0.471, blue: 0.262))
                    .cornerRadius(20)
                    .foregroundColor(.white)
                    .font(.headline)
            }
            
            // 布局优化：Next按钮不要嵌套在Send按钮的label中，单独放置层级更清晰、不会出现布局异常
            if ShowButton {
                NavigationLink(
                    destination: Finish(),
                    label: {
                        Text("Next")
                            .frame(width: 120, height: 40)
                            .background(Color.red)
                            .cornerRadius(20)
                            .shadow(radius: 10)
                            .overlay(
                                Text("Verder")
                                    .foregroundColor(.white)
                            )
                    }
                )
            }
        }
    }
}

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