【SwiftUI】TextEditorにプレースホルダーを表示する

3670 ワード
iOS Swift TextEditor SwiftUI iOS テキストリンク

はじめに

SwiftUIのTextEditorは標準でプレースホルダーを表示することができません。
ここではZStackを用いてTextEditorにプレースホルダーを表示する方法を紹介します。

実装

import SwiftUI

struct ContentView: View {
    @State var text = ""

    var body: some View {
        Form {
            ZStack {
                if self.text.isEmpty {
                    HStack {
                        Text("プレースホルダー").opacity(0.25)
                        Spacer()
                    }
                }
                TextEditor(text: self.$text)
                    .lineLimit(nil)
            }
        }

    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

簡単に解説

textが空の時にZStackでプレースホルダーを重ねています。

if self.text.isEmpty {
    HStack {
        Text("プレースホルダー").opacity(0.25)
        Spacer()
    }
}