SwiftUI - 文本字段返回键事件

Posted

技术标签:

【中文标题】SwiftUI - 文本字段返回键事件【英文标题】:SwiftUI - Textfield return key event 【发布时间】:2021-06-15 05:26:34 【问题描述】:

首先,很抱歉我的英语不是很完美。

我想根据通过文本字段中的返回键接收到的值的条件显示不同的图像。我搜索并尝试了几种方法,但找不到正确的方法。我在 SwiftUI 中找不到合适的返回键事件,所以我尝试了 onReceive。

快速文件。

struct QuestionItemView: View 

    @State private var question: Question?
    @State private var answer = ""

    var body: some View 
        VStack(spacing: 30) 
            GroupBox 
                if let question = question 
                    Text(question.question)
                        .font(.largeTitle)
                        .fontWeight(.heavy)
                        .scaledToFit()
                        .frame(width: 300, height: 100)
                        .cornerRadius(12)
                
            
        
            GroupBox 
                TextField("Enter your answer", text: $answer)
                    .frame(width: 300)
                    .font(.title2)
                    .scaledToFit()
                    .cornerRadius(12)
                    .multilineTextAlignment(.center)
           
         
            onReceive(answer.publisher)  _ in
                if answer == question?.answer 
//                        Image(systemName: "circle")
                    print("o")
                 else 
//                        Image(systemName: "multiply")
                    print("x")
                
            
         //: VStack
        .frame(width: 240)
        .background(RoundedRectangle(cornerRadius: 7.0).fill(Color.white))
        .onAppear 
            let questions: [Question] = Bundle.main.decode("questions.json")
            question = questions.randomElement()
        
    

json.file

[
    
        "id" : 1,
        "question" : "2 X 6",
        "answer" : "12"
    ,
    
        "id" : 2,
        "question" : "7 + 8",
        "answer" : "15"
    ,
    
        "id" : 3,
        "question" : "9 - 1",
        "answer" : "8"
    ,
    
        "id" : 4,
        "question" : "4 / 2",
        "answer" : "2"
    ,
    
        "id" : 5,
        "question" : "10 X 2",
        "answer" : "20"
    
]

【问题讨论】:

【参考方案1】:

你可以试试这样的:

struct QuestionItemView: View 
    
    @State private var question: Question?
    @State private var answer = ""
    @State private var imgType = ""
    
    var body: some View 
        VStack(spacing: 30) 
            GroupBox 
                if let question = question 
                    Text(question.question)
                        .font(.largeTitle)
                        .fontWeight(.heavy)
                        .scaledToFit()
                        .frame(width: 300, height: 100)
                        .cornerRadius(12)
                
            
            
            GroupBox 
                TextField("Enter your answer", text: $answer)
                    .frame(width: 300)
                    .font(.title2)
                    .scaledToFit()
                    .cornerRadius(12)
                    .multilineTextAlignment(.center)
                    .onSubmit   // <--- only on pressing the return key
                //  .onChange(of: answer)  _ in  // <-- as you type
                //  .onReceive(answer.publisher)  _ in  // <-- as you type
                    if answer == question?.answer 
                        imgType = "circle"
                        print("o")
                     else 
                        imgType = "multiply"
                        print("x")
                    
                
            
            
            if imgType == "circle" 
                Image(systemName: "circle")
             else 
                Image(systemName: "multiply")
            

        
        .frame(width: 240)
        .background(RoundedRectangle(cornerRadius: 7.0).fill(Color.white))
        .onAppear 
            let questions: [Question] = Bundle.main.decode("questions.json")
            question = questions.randomElement()
        
    

如果您使用的是旧系统,您可能需要这样做:

        TextField("Enter your answer", text: $answer, onCommit: 
            if answer == question?.answer 
                imgType = "circle"
                print("o")
             else 
                imgType = "multiply"
                print("x")
            
        )

【讨论】:

在 onSumbit 中出现错误“'some View' 类型的值没有成员 'onSubmit'”? 是的,您可能使用的是 macOS 11.x 和 ios 14.x。 "onSubmit" 仅在 macos 12 和 ios 15 上可用。在这种情况下,您需要使用 TextField (..., onCommit: ...

以上是关于SwiftUI - 文本字段返回键事件的主要内容,如果未能解决你的问题,请参考以下文章

按返回键“不”关闭软件键盘 - SwiftUI

按下返回键时如何通过多个文本字段输入进行选项卡?

在 Swift 中按下返回键时在文本字段之间切换

如何在swift3 ios中使用键盘返回键将一个文本字段移动到另一个文本字段

如何在 xcode 中启用 ios 键盘返回键功能?

按下返回键时如何在下一个 UITextField 上移动控件