Как мы можем добавить `Button` и` TextField` с помощью `SwiftUI`

Question

Я учусь SwiftUI (Новая платформа, предоставленная Apple с iOS 13 и Xcode 11: SwiftUI от 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

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 4

Вы можете добавить такую ​​кнопку

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

и текстовое поле.

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

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