[SwiftUI]TextField(テキストフィールド)に角丸(rounded)の枠線(border)をつけるには？

どうも、ちょげ(@chogetarou)です。

TextFieldに角丸の枠線をつける方法を紹介します。

方法
1. textFieldStyle
2. overlay
まとめ

方法

TextFieldに角丸の枠線を付ける方法は、２つあります。

textFieldStyle

１つは、textFieldStyleを使う方法です。

まず、TextFieldにtextFieldStyleモディファイアを付与します。

そして、textFieldStyleモディファイアの引数に「.roundedBorder」を指定します。

struct ContentView: View {
    @State var editingText = ""
    var body: some View {
        VStack{
            TextField("your text", text: $editingText)
                .textFieldStyle(.roundedBorder)
        }
    }
}

overlay

もう１つは、overlayを使う方法です。

まず、TextFieldにoverlay修飾子を付与します。

次に、overlay修飾子の引数にRoundedRectangleを指定し、RoundedRectangleの引数「cornerRadius」に角の丸みを指定します。

そして、RoundedRectangleにstrokeモディファイアを適用します。

struct ContentView: View {
    @State var editingText = ""
    var body: some View {
        VStack{
            TextField("your text", text: $editingText)
                .overlay(
                    RoundedRectangle(cornerRadius: /*角の丸み*/)
                        .stroke(/*枠線の色*/, lineWidth: /*枠線の太さ*/)
                )
        }
    }
}

使用例

struct ContentView: View {
    @State var editingText = ""
    var body: some View {
        VStack{
            TextField("your text", text: $editingText)
                .padding()
                .overlay(
                    RoundedRectangle(cornerRadius: 10)
                        .stroke(Color.pink, lineWidth: 1.0)
                )
                .padding()
        }
    }
}