[SwiftUI]TextField(テキストフィールド)のプレースホルダー(placeholder)の色(color)を変える(change)には？

[SwiftUI]TextFieldのプレースホルダーの色を変えるには？

SwiftUI

2022.01.31

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

TextFieldのプレースホルダーの色を変える方法を紹介します。

方法
使用例

方法

TextFieldのプレースホルダーの色を変えるには、ZStackとforegroundColorモディファイアを使います。

まず、TextFieldのプレースホルダーを、ZStackとTextを使って表示します。

ZStack(alignment : .leading){
    if editingText.isEmpty {
        Text("プレースホルダー")
    }
    TextField("", text: $editingText)
}

そして、foregroundColorモディファイアをTextに付与し、foregroundColorの引数にプレースホルダーの色を指定します。

ZStack(alignment : .leading){
    if editingText.isEmpty {
        Text("プレースホルダー")
            .foregroundColor(/*プレースホルダーの色*/)
    }
    TextField("", text: $editingText)
}

ZStackとforegroundColorモディファイアを使えば、TextFieldのプレースホルダーの色を変えることができます。

使用例

以下は、使用例です。

struct ContentView: View {
    @State var editingText = ""
    var body: some View {
        ZStack(alignment : .leading){
            if editingText.isEmpty {
                Text("プレースホルダー")
                    .foregroundColor(Color.blue.opacity(0.3))
            }
            TextField("", text: $editingText)
        }
    }
}