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

Question

我正在学习 SwiftUI（Apple 提供的新框架 iOS 13 和 Xcode 11：SwiftUI by Apple）。

我想用操作在 ListView 中添加 Button 和 TextField。我想要一个文本字段，用户可以添加从 1 到 10 的任何一个数字，然后点击 SEND 按钮。任何人都知道如何在其中添加按钮以及我们如何处理 Button 的 touch event 和 SwiftUI ?

如有任何帮助，我们将不胜感激。

Answer 1

这是一个简单的视图，它在水平堆栈中包含一个文本字段和一个按钮。

要在您的 Button 中处理用户交互，只需覆盖 action 闭包即可。

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

你可以像那样添加按钮

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

和文本字段。

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

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

Answer 3

带文本框和按钮的列表视图。如果您想在列表中包含多行，则每行都需要一个标识符。

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")
                    }
                }
            }
        }
    }
}

}

Answer 4

对于登录页面设计，您可以使用此代码部分。设置了 textFieldStyle 边框文本字段和内容类型。

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 5

您可以编写自定义 TextField，一旦用户点击按钮，它就会 return 在闭包中触发事件。此自定义文本字段将包含一个带有文本字段和按钮的 HStack。像这样。

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)
        }
      }
   }
}

并且您可以像这样使用这个自定义 TextField。我使用了上面列出的答案中的一个例子来使它更清楚。

  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")
                            }
                   }
            }
     }
 }

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

How can we add `Button` and `TextField` by using `SwiftUI`

textfield

uibutton

ios

swift

swiftui