【SwiftUI】TextEditorの背景色を変更する

TextEditorの背景色を変更しようと思ったら上手くいかなかった為、変更方法を調べました。

環境

• Xcode 13.3
• iOS 15.5

問題

backgroundの色が反映されない

import SwiftUI

struct ContentView: View {

    @State private var descriptionText = "Text Editor"

    var body: some View {
        ZStack {
            Rectangle()
                .fill(.gray)
                .ignoresSafeArea()

            TextEditor(text: $descriptionText)
                .background(.red) // 色が反映されない
                .padding()
        }
    }
}

プレビュー

このように.backgroundを使用して赤色に変更しようとしても色は反映されませんでした。

解決策

UITextView.appearance().backgroundColorを透明にする

UITextView.appearance().backgroundColor = .clearにすることで、backgroundの色が反映されるようになります。

なので、今回はContentViewの生成時にその処理を行います。

struct ContentView: View {

    init() {
        UITextView.appearance().backgroundColor = .clear
    }

変更後のコード

import SwiftUI

struct ContentView: View {

    init() {
        UITextView.appearance().backgroundColor = .clear
    }

    @State private var descriptionText = "Text Editor"
    var body: some View {
        ZStack {
            Rectangle()
                .fill(.gray)
                .ignoresSafeArea()

            TextEditor(text: $descriptionText)
                .background(.red)
                .padding()
        }
    }
}

プレビュー

無事にbackgroundの赤色が反映されました！

問題点

UITextView.appearance()を変更すると、アプリ全体のUITextViewに影響を与えるので、この方法で実装する場合はこの影響を踏まえた上で検討する必要がありそうです。

おわりに

背景色が上手く反映されないSwiftUIのViewがある時は、appearance周りを触ってみると解決しそうですね。

iOS 16からUITextView.appearance()を触らずにTextEditorの背景色が変更になるそうです。こちらも楽しみですね！

参考

• Change background color of TextEditor in SwiftUI