【SwiftUI】TextFieldを実装する

はじめに

TextFieldを実装する手順をまとめました。

開発環境

• macOS Catalina 10.15.7
• Xcode 12.2
• Swift 5.3.1

本題

手順

ContentView.swiftを開いて、Textを削除。

ContentView.swift

画面右上の"+"を選択。

"text"と入力して"Text Field"を選択。

TextFieldが挿入される。

ContentView.swift

第一引数を変更すると、TextFieldのプレースホルダーを変更することができる。

ContentView.swift

TextFieldの外観とサイズを指定。
ContentView.swift

TextFieldに入力した文字を保持する変数textを追加。

ContentView.swift

入力した文字を確認するTextを追加。

ContentView.swift

全体のコード

import SwiftUI

struct ContentView: View {
    @State var text: String = ""
    
    var body: some View {
        VStack {
            TextField("文字を入力してください", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .frame(width: 250)
            
            if !text.isEmpty {
                Text("\(text)が入力されています。")
            }
        }
    }
}

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

おわりに

試したことを記事にしていないものも多くあるので、基本的な実装でも記事に残していこうと思います。

参考

• https://developer.apple.com/documentation/swiftui/textfield

• https://developer.apple.com/documentation/swiftui/textfieldstyle

• How to read text from a TextField - a free SwiftUI by Example tutorial