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

#SwiftUI

#iOS

リルオッサ

2022.08.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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()
        }
    }
}