[SwiftUI] TextField 文字を入力する

ユーザーからの文字入力を受け取るにはTextFieldを使います。

Xcode 13.4.1

TextField

UIKitではUITextFieldを使ってユーザーに文字入力をさせていましたが、SwiftUIではTextFieldです。　

Libraryの「＋」からtextfieldを検索すると「TextField」が出てきます
それをPreviewかコードにdrag & dropします

TextField("Placeholder", text: value )

1	TextField("Placeholder", text: value )

Placeholder: 昔はtitleと言ってましたが入力の説明など
value: ここに入力される文字列が入る。「$」をつけて指定する

簡単に文字列を入力するだけのコードを記述してみると、

import SwiftUI

struct ContentView: View {
    @State private var answer: String = ""

    var body: some View {
        VStack{
            TextField(
                "1 + 2 = ?",
                 text: $answer
            )
        }
    }
}
...

import SwiftUI

struct ContentView: View {

@State private var answer: String = ""

var body: some View {

VStack{

TextField(

"1 + 2 = ?",

text: $answer

)

}

...

これでPreViewを実行

ヒントとして
1 + 2 = ?
と出てくるのでヒントをタップしてからダイレクトにMacから数字を入力できます。

端末内のキーボードはSimulatorでは可能です

入力文字を取り込んでから表示する方法を確認してみます

import SwiftUI

struct ContentView: View {
    @State private var username: String = ""
    @State private var isEditing = false

    var body: some View {
        VStack{
            TextField(
                "User name (email address)",
                 text: $username
            )
            { isEditing in
                self.isEditing = isEditing
            } onCommit: {
                //validate(name: name)
            }
            .autocapitalization(.none)
            .disableAutocorrection(true)
            .border(Color(UIColor.separator))
            
            Text("Hello! \(username)")
                .foregroundColor(isEditing ? .red : .blue)
        }
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct ContentView: View {

@State private var username: String = ""

@State private var isEditing = false

var body: some View {

VStack{

TextField(

"User name (email address)",

text: $username

)

{ isEditing in

self.isEditing = isEditing

} onCommit: {

//validate(name: name)

}

.autocapitalization(.none)

.disableAutocorrection(true)

.border(Color(UIColor.separator))

Text("Hello! \(username)")

.foregroundColor(isEditing ? .red : .blue)

}

struct ContentView_Previews: PreviewProvider {

static var previews: some View {

ContentView()

}

　
Previewで実行してみると、文字が入力されました。
　

Previewが2つ!　この sample codeを何気に使っていると、Previewが２つになってしまいました。TextFieldとTextのpreviewが２つ別々にできてしまったわけです。VStackでまとめることで解決しましたが、何気に焦った。

References:
TextField | Apple Developer Documentation
init(_:text:onEditingChanged:onCommit:)