Xcode (v13.3.1)
はじめに
テキストフィールドとは下図のようなやつです。
TextFieldはユーザーに文字を打ち込んでもらうときに使うUIですね。
今回はSwiftUIでTextFieldを使う方法を共有したいと思います。
参考にした書籍
基本構文
まずは構文から解説していきます。
TextField("プレースフォルダー", text: $変数) 例) @State var title: String = "" TextField("新しいタスク名", text: $title)
- 第１引数 ＞ 未入力に出すヒント用の文字列
- 第２引数 ＞ @Stateの文字列型変数
枠線をつける方法１
TextFieldはデフォルトだと枠線が表示されないため入力できる感が損なわれています。
.textFieldStyle(RoundedBorderTextFieldStyle())とすると薄い角丸線で区切ってくれます
TextField("xxxx", text: $tyyyy) .textFieldStyle(RoundedBorderTextFieldStyle())
枠線をつける方法２
方法１はデザインが変えられないです。他の方法を探していたところいい方法がありました。
paddingとborderを使えば同じようにできそうです。
TextField("新しいタスク名", text: $todoData.title) .padding(.all, 4) .border(Color.gray, width: 1)
Colorの値を変えれば枠線の色が変えられます、widthの値で太さを変えられます
こっちの方が調整がしやすい印象ありますね。
フォントを変えるには？
.fontモディファイアを使えばできます。
TextField("新しいタスク名", text: $todoData.title) .font(.system(size: 30)) // fontモディファイアを使う .padding(.all, 4) .border(Color.gray, width: 1)
frameでサイズは変えられない？
frameモディファイアでheightを変えても上下にスペースができるだけでうまくいきません。
TextField("新しいタスク名", text: $todoData.title) .textFieldStyle(RoundedBorderTextFieldStyle()) .frame(height: 100)
参考にしたサイト
おわりに
最後まで見ていただきヘペトナス！
読者登録・Twitterのフォローもお願いします。