[SwiftUI]TextField(テキストフィールド)の高さ(height)を変えるには？

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

TextFieldの高さを変える方法を紹介します。

方法
1. font
2. frame
まとめ

方法

TextFieldの高さを変える方法は、２つあります。

font

１つは、fontモディファイアを使います。

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

そして、fontモディファイアの引数に「.system()」を指定し、.systemの引数「size」にテキストのサイズを指定します。

TextField("",text: $editingText)
    .font(.system(size: /*テキストのサイズ*/))

TextFieldの高さは、自動でテキストのサイズに調整されるようになっています。

使用例

struct ContentView: View {
    @State var editingText = ""
    
    var body: some View {
        VStack {
            TextField("Your Text",text: $editingText)
                .padding()
                .font(.system(size: 50))
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
        }
    }
}

frame

もう１つは、frameモディファイアを使う方法です。

まず、TextFieldにframeモディファイアを指定します。

そして、frameモディファイアの引数「height」に高さを指定します。

TextField("",text: $editingText)
    .frame(height : /*高さ*/)

frameモディファイアでは、textFieldStyle修飾子の「RoundedBorderTextFieldStyle」が上手く機能しません。

使用例

struct ContentView: View {
    @State var editingText = ""
    
    var body: some View {
        VStack {
            TextField("Your Text",text: $editingText)
                .padding()
                .frame(height : 100)
                .overlay(
                    RoundedRectangle(cornerRadius: 5)
                            .stroke(Color.red, lineWidth: 1)
                )
                .padding()
        }
    }
}