Today I will show you how to use TextField.

TextField is a control that displays an editable text interface, mainly for receiving and displaying input from the user.

Knowledge points:

• First, add a property of type String to receive the user's input in the TextField and, and add a @State property wrapper on the left.

• @State is a property wrapper. It allows the username property to be bound to elements on the interface. When the value of the username property changes, SwiftUI immediately notifies the bound visual element to update the content.

struct ContentView: View {
    
    @State var username: String
    @State var nickname: String
    
    var body: some View {
        VStack {
            Text("My username is \(username)")
        }
    }
}

• Since two properties are added to the ContentView structure, it is also necessary to modify the value of the properties of the PreviewProvider so that the correct content can be displayed in the preview window.

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(username: "", nickname: "")
    }
}

• Since the username property has a @State property wrapper, once the value of the username property changes, the text content on the Text view will also be refreshed immediately. When the preview needs to be restored, Xcode will display an error message. This is because the code in the program entry needs to be modified. Click on the error message here to jump to the location where the error code is located.

• Since ContentView adds two new properties, the initialization method here needs to be modified.

After code fix:

@main
struct MySwiftUI2App: App {
    var body: some Scene {
        WindowGroup {
            ContentView(username: "", nickname: "")
        }
    }
}

• Add another Text view to show the live changes in the value of the nickname property.

Text("My nickname is \(nickname)")

• Add a TextField view and set the text property to the value of username. Note that the symbol "$" to the left of username, which refers to the Binding wrapper, indicates that the value of the property can be modified.

TextField("User Name", text: $username)

• When the user modifies the content in the text input box, the value of the property is output in the console, and the value and change of the property are observed in real-time.

print("onEditingChanged: \(username)")

• When the user completes the input in the text box, the value of the username property is output to the console.

print("onCommit: \(username)")

• Set the style of the TextField to a rounded border.

.textFieldStyle(RoundedBorderTextFieldStyle())

After code:

struct ContentView: View {
    
    @State var username: String
    @State var nickname: String
    
    var body: some View {
        VStack {
            Text("My username is \(username)")
            Text("My nickname is \(nickname)")
            
            TextField("User Name", text: $username) { value in
                print("onEditingChanged: \(username)")
            } onCommit: {
                print("onCommit: \(username)")
            }
            .textFieldStyle(RoundedBorderTextFieldStyle())
        }
    }
}

• Add a second TextField so the user can enter a nickname. Since all visual elements of SwiftUI follow the View protocol, it can be said that what you see is a View. Therefore, TextField can also be a kind of View.

TextField("Nick Name", text: $nickname)
    .textFieldStyle(RoundedBorderTextFieldStyle())

• Set the padding of the VStack to keep the TextField a certain distance from the sides of the screen.

.padding()

• Since TextField is an interactive control, you need to click the Live Preview button here to activate the Live Preview feature. Only with the live preview feature, you can interact with the elements in the interface.

• Click the "User Name" input box and enter the user's username.

• Click the "Nick Name" input box and enter the user's nickname.

• Watch the changes in their properties.

After code:

struct ContentView: View {
    
    @State var username: String
    @State var nickname: String
    
    var body: some View {
        VStack {
            Text("My username is \(username)")
            Text("My nickname is \(nickname)")
            
            TextField("User Name", text: $username) { value in
                print("onEditingChanged: \(username)")
            } onCommit: {
                print("onCommit: \(username)")
            }
            .textFieldStyle(RoundedBorderTextFieldStyle())
            
            TextField("Nick Name", text: $nickname)
                .textFieldStyle(RoundedBorderTextFieldStyle())
        }
        .padding()
    }
}


#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(username: "", nickname: "")
    }
}
#endif

Visual effects:

Follow me on:

(Foks) Hui Wang's LinkedIn