SwiftUI组件之TextField

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

一、基础用法

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        TextField("请输入...", text: $text).padding()
    }
}
复制代码

• 第一个参数是placeholder。
• 第二个参数是用户输入值，使用@State加上Binding双向绑定的方式来监控输入值和更改输入值。

二、监听用户是否处于输写状态onEditingChanged

通过给TextField赋予参数onEditingChanged可以监听用户是否处于输入状态。

TextField("请输入...", text: $text) { editFlag in
    print("输入状态:\(editFlag)")
}
复制代码

三、监控用户是否提交输入

TextField("请输入...", text: $text, onCommit:  {
    print("已提交")
})
复制代码

四、样式textFieldStyle

目前SwiftUI支持四种TextField样式：

• DefaultTextFieldStyle:iOS等价于PlainTextFieldStyle；macOS等价于SquareBorderTextFieldStyle
• PlainTextFieldStyle: 顾名思义，就是没有任何边框、任何颜色的文本域样式。
• RoundedBorderTextFieldStyle: 增加了一个圆角边框。
• SquareBorderTextFieldStyle: macOS独有。

五、自定义TextField-搜索框

SwiftUI提供了最基础的TextField用法，RoundedBorderTextFieldStyle虽然能实现圆角边框，但是无法添加里层的放大镜和清空按钮，需要自行实现。

struct ContentView: View {
    @State var text: String = ""
    
    @State var editing: Bool = false
    
    var body: some View {
        
        ZStack(alignment: .center){
            RoundedRectangle(cornerRadius: 10).stroke().frame(height:50).foregroundColor(.gray)
            HStack{
                Image(systemName: "minus.magnifyingglass").foregroundColor(.gray)
                TextField("请输入...", text: $text){editing in
                    self.editing = editing
                }
                if editing && !text.isEmpty{
                    Button(action: {
                        text = ""
                    }, label: {
                        Image(systemName: "xmark.circle.fill")
                    })
                }
               
            }.padding()
        }.padding()

    }
}
复制代码

• 使用ZStack加RoundedRectangle实现圆角边框。
• 通过TextField的onEditingChanged来监听用户是否在输入。
• 通过判断if editing && !text.isEmpty控制清空按钮的显示与否。!text.isEmpty代表文本域上用户没用任何输入。
• text = ""清空文本域。