【SwiftUI】TextFieldでフォームを作成し入力された値を使う方法

SwiftUI

今回はテキストフィールドで入力欄を作り、ボタンを押すことでテキストを表示する方法をご紹介します。

TextFieldの使用方法

TextFieldで入力欄を作成して、更新のボタンを押すと、その内容が結果の部分に表示されるようにします。

struct ContentView: View {
    @State var preText: String = ""
    @State var text: String = ""

    var body: some View {
        VStack {
            VStack {
                HStack {
                    Text("結果:\(text)")
                    Spacer()
                }
                .frame(width: 250)
            }
            .padding(.bottom)
            VStack {
                TextField("入力してください", text: $preText)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .frame(width: 250)
            }
            .padding(.bottom)
            Button(action: {
                text = preText
            }) {
                Text("更新")
                    .fontWeight(.bold)
                    .frame(width: 250)
                    .padding(.vertical, 10.0)
                    .foregroundColor(Color.white)
                    .background(Color.blue)
            }
        }
    }
}

@State var 変数名: 型名 = 初期値

@State var 変数名: 型名 = 初期値を使用することで変数を定義することができます。

後から値を変更したい場合はこのようにして事前に変数を定義しましょう。

TextFieldの引数

第一引数にはプレースフォルダーを入力します。

プレースフォルダーとは、未入力の際に表示される文言です。

今回は「入力してください」と表示しています。

また、TextFieldには第二引数で必ず変数を渡す必要があります。

今回はTextField("入力してください", text: $preText)のpreTextがその変数になります。

変更が加えられる変数の頭には$をつけて渡しましょう。

ボタンの働き

ボタンを押された際に、preTextの値をtextに代入しています。

そうすることで、結果の横にtextの内容が表示されます。

まとめ

テキストを入力させて、表示に反映させる動作でした。

意外と簡単に実装できると思いませんでしたか?

今回はシンプルな内容でしたが、アレンジ次第で様々な使用方法がありますので、是非色々試しながら、アプリにあった実装を目指してください。

SwiftUI勉強中の方へ

SwiftUIのプログラミングを独学で勉強している人にはこちらの書籍もおすすめです!

基礎からしっかり学びたい方はスクールもおすすめです!

無料体験もあるため、気軽に申し込むのもありです。

コメント

タイトルとURLをコピーしました