我们如何使用“SwiftUI”添加“Button”和“TextField”

Question

I am learning SwiftUI (New framework provided by Apple with iOS 13 and Xcode 11 : SwiftUI by Apple ).

I want to add Button and TextField in ListView with action. I want one textfield in that user can add any one number from 1 to 10 and then hit SEND button. Anyone have any idea how to add button in it and also how can we handle touch event of Button with SwiftUI ?

Any help would be appreciate.

Answer 1

Here is a simple view what contains a textfield and a button in a horizontal stack.

To handle the user interaction with in your Button , just overwrite the action closure.

import SwiftUI

struct ButtonAndTextFieldView : View {

    @State var text: String = ""

    var body: some View {
        HStack {
            TextField($text,
                      placeholder: Text("type something here..."))
            Button(action: {
                // Closure will be called once user taps your button
                print(self.$text)
            }) {
                Text("SEND")
            }
        }
    }
}

#if DEBUG
struct ButtonWithTextFieldView_Previews : PreviewProvider {
    static var previews: some View {
        ButtonWithTextFieldView()
    }
}
#endif

Answer 2

For the Login page design you can use this code section. With textFieldStyle border textfield and content type set.

struct ButtonAndTextFieldView : View {

    @State var email: String = ""
    @State var password: String = ""

    var body: some View {
        VStack {
            TextField($email,
            placeholder: Text("email"))
            .textFieldStyle(.roundedBorder)
            .textContentType(.emailAddress)

           TextField($password,
                placeholder: Text("password"))
                .textFieldStyle(.roundedBorder)
                .textContentType(.password)

            Button(action: {
               //Get Email and Password
                print(self.$email)
                print(self.$password)
            }) {
                Text("Send")
            }
        }
    }

Answer 3

You can add button like that

Button(action: {}) {
    Text("Increment Total")
}

And text field.

@State var bindingString: Binding<String> = .constant("")

TextField(bindingString,
          placeholder: Text("Hello"),
          onEditingChanged: { editing in
              print(editing)
          }).padding(.all, 40)

Answer 4

You can write a custom TextField which will return you the event in the closure once the user taps on the button. This Custom textfield would contain a HStack with a textfield and a button. Like this.

struct CustomTextField : View {

      @Binding var text: String

      var editingChanged: (Bool)->() = { _ in }
      var commit: ()->() = { }
      var action : () -> Void

      var buttonTitle : String
      var placeholder: String

      var isSecuredField = false

      var body : some View {
           HStack {
               if isSecuredField {
                   SecureField(placeholder, text: $text, onCommit: commit)
               } else {
                   TextField(placeholder, text: $text, onEditingChanged: editingChanged, onCommit: commit)
               }
           Button(action: action) {
            Text(buttonTitle)
        }
      }
   }
}

And to you can use this custom TextField like this. I have used an example from the above-listed answers to make it more clear.

  struct ListView: View {

      @State var text: String = ""

      var body: some View {
           List {
                ForEach (1..<2) {_ in
                    Section {
                            CustomTextField(
                                           text: self.$text,
                                           action: {
                                              print("number is .....\(self.text)")
                                           },
                                           buttonTitle: "Submit",
                                           placeholder: "enter your number")
                            }
                   }
            }
     }
 }

Answer 5

ListView with textfield and button. You will need an identifier for each row in case you want to have multiple rows in the List.

struct ListView: View {

@State var text: String = ""

var body: some View {
    List {
        ForEach (1..<2) {_ in
            Section {
                HStack(alignment: .center) {
                    TextField(self.$text, placeholder: Text("type something here...") ).background(Color.red)
                    Button(action: {
                        print(self.$text.value)
                    } ) {
                        Text("Send")
                    }
                }
            }
        }
    }
}

}