SwiftUIでTextFieldを使う

Overview

SwiftUIで入力フォームを作りたいときは、UIkitと同じように、TextFieldを使います。

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

TextFieldの仕組みですが、第１引数にhintTextと同じ意味の、titleKeyなるものを使って、入力をする内容を伝えるテキストを記述します。第二引数には、 @Stateをつけた状態変数を渡して、入力したテキストを渡します。

TextField(第１引数, text: 第二引数)
TextField("入力してください", text: $input)

summary

今回は、入力された内容が、nil他の言語だったら、nullって言いますけど、何も値がなかったら、if文で、エラー処理をするロジックを作ってみました。

import SwiftUI

struct FormView: View {

    @State private var input: String = ""
    @State private var showError: Bool = false

var body: some View {
    VStack {
        TextField("入力してください", text: $input)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()

        if showError {
            Text("エラー: 入力がありません")
                .foregroundColor(.red)
        }

        Button(action: {
            if self.input.isEmpty {
                self.showError = true
            } else {
                self.showError = false
            }
        }) {
            Text("送信")
        }
    }
}
}

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

入力前
何かテキストを入力して、ボタンを押すとエラーメッセージは出てこないようになってます。

入力後
何も入力しないで、ボタンを押すと赤いエラーメッセージが表示されます。

thoughts

今回は、SwiftUIで入力機能の作成の仕方を簡単にご紹介しました。UIkitより作るのが楽なのと、コードを書くだけで、UIを作成できる宣言的なUIであるフレームワークのありがたみと、学習コストの低さに感動しました。