バッテラのハローワールド研究室

エンジニア、プログラミングに関する情報を掲載中!

【SwiftUI】TextFieldの基本的な使い方 (テキスト入力で使うやつ)

SwiftUI

はじめに

今日はTextFieldについて勉強していこうと思います。

TextFieldはユーザーに文字を打ち込んでもらうときに使います。

今回はTextFieldについて基本的な使い方を共有していきますねー。

基本構文

TextField("プレースフォルダー", text: $変数)

例)
@State var title: String = ""

TextField("新しいタスク名", text: $title)
  • 第1引数:未入力に出すヒント用の文字列
  • 第2引数:textの引数には $マークをつけた@Stateの文字列型変数を指定

枠線をつける方法1

TextFieldはデフォルトだと枠線が表示されないため入力できる感が損なわれています。

.textFieldStyle(RoundedBorderTextFieldStyle())とすると薄い角丸線で区切ってくれます

TextField("xxxx", text: $tyyyy)
    .textFieldStyle(RoundedBorderTextFieldStyle())

枠線をつける方法2

方法1はデザインが変えられないです。他の方法を探していたところいい方法がありました。

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)

参考にしたサイト

www.choge-blog.com

hirauchi-genta.com

おわりに

最後まで見ていただきヘペトナス!

読者登録・Twitterのフォローもお願いします。