見出し画像

初心者でもわかるswiftUI Vol.10

どうも、iUの記事がたくさんの人に読んでもらって嬉しいかわさきです。

今日からまたswiftUIのことについて書いていくのでお願いします。
前回は画面遷移までまとめたので今日はテキストフィールドのことについて書いていこうと思います

23.テキストフィールド

まず、テキストフィールドというのは検索する時に入力する所のことです。
どんなアプリにでも入っているのではないでしょうか。

TextFieldViewを用意してください。

 @State var name: String = ""
   
   var body: some View {
       VStack {
       TextField("What your name?", text: $name)
           .textFieldStyle(RoundedBorderTextFieldStyle())
           .frame(width: 270)
       
           if (!name.isEmpty) {
               Text("\(name)さん、おはよう!")
           } 
       }
   }

Stateで定義してStringは変数(データを入れておく箱)なので空にしておきます。

形を整えて、ifで名前が空ではない時におはよう!と表示するようにします。

次のようになります。

スクリーンショット 2020-10-24 10.46.58

いい感じです。
スマホではキーボードが表示されていることが多いのでその処理もしていきます。コードを加える必要はありません。

ビルドした時のメニューバーにある「l/O→Keyboard→1番上のところにチェックを入れる」これでキーボードが出てくるようになりました。

スクリーンショット 2020-10-24 10.54.50

青くなっている手順通りにしてもらえばできると思います。

入力してreturnを押せば消えます。

テキストフィールドはログインや検索によく使うのでしっかりやっておきましょう。

まとめ

今回はテキストフィールドの基本的な内容についてまとめました。

次回はテキストフィールドを使った個数計算みたいなものを詳しくまとめていこうと思います。

先日のようにswiftUI以外のことについても書くことがあるのでその記事も見てもらえると嬉しいです。

今までの内容は「プロフィール→マガジン→swiftUI情報発信」というところにまとめているので見返してみて下さい。

読んでいただきありがとうございます😊

読んでくださった方はぜひハートをお願いします✋

この記事が気に入ったらサポートをしてみませんか?