Question

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

我想通过操作在Button中添加TextField和ListView。我希望该用户中的一个文本字段可以添加1到10之间的任意一个数字，然后按SEND按钮。任何人都知道如何在其中添加按钮，以及如何使用touch event处理Button中的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

对于登录页面设计，您可以使用此代码部分。设置了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 3

您可以添加这样的按钮

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 4

具有文本字段和按钮的ListView。如果您要在列表中有多行，则需要为每行添加一个标识符。

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 5

您可以编写一个自定义TextField，一旦用户点击按钮，它将在闭包中返回事件。此自定义文本字段将包含带有文本字段和按钮的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`

5 个答案: