[SwiftUI]「TextField」で枠線をつける方法

どうも、ちょげ（@chogetarou）です。

デフォルトのテキストフィールドは、枠線がついていないので見えにくくなっています。

なので、できればTextFieldに枠線をつけたいですよね。

そこで、TextFieldに枠線をつける方法を2つ紹介します。

textFieldStyleモディファイア

ひとつは、textFieldStyleモディファイアで枠線があるスタイルを指定する方法です。

具体的には、.roundedBorderを指定すれば枠線をつけることができます。

以下はその例です。

TextField("テキスト", text: $text)
            .textFieldStyle(.roundedBorder))

表示すると次のようになります。

薄くではありますが枠線がつきました。

枠線をアレンジする

もうひとつは、.overlayモディファイアを使う方法です。

textFieldStyleで指定すると、太さや色を指定することができません。

もし、枠線の太さや色などを細かく設定したい人は、overlayを使った方がいいでしょう。

以下は、overlay修飾子を使った例です。

TextField("テキスト", text: $text)
            .overlay(
                RoundedRectangle(cornerRadius: 1)
                    .stroke(Color.green, lineWidth: 3)
            )

RoundedRectangleとstrokeを使って、角丸の枠線をテキストフィールドに被せました。

表示すると次のようになります。

こちらの方法では、色と太さを変えることができます。

まとめ

手軽に実装する際は、textFieldStyleでRoundedBorderTextFieldStyle()を指定しましょう

もし、枠線の色や太さをアレンジしたい人は、overlay修飾子を使いましょう。

参考：金田浩明「SwiftUI 徹底入門」