SwiftUI中TextEditor自定义占位文本不显示问题求助

问题分析 #

你的代码中占位文本不显示，核心原因有两点：

1. UITextView.appearance().backgroundColor = .clear 设置时机过早，导致TextEditor的背景未真正透明，遮挡了下方的占位文本
2. 占位文本的padding与TextEditor默认的文本容器内边距不匹配，可能引发位置偏移或内容截断

方案一：基于原有代码快速修复 #

调整背景色设置时机，并统一占位文本与TextEditor的内边距，确保占位文本正常显示且位置对齐：

import SwiftUI
import UIKit

struct TextArea: View {
    @Binding var text: String
    let placeholder: String
    
    init(_ placeholder: String, text: Binding<String>) {
        self.placeholder = placeholder
        self._text = text
    }
    
    var body: some View {
        ZStack(alignment: .topLeading) {
            // 占位文本：padding与TextEditor输入区域对齐
            if text.isEmpty {
                Text(placeholder)
                    .foregroundColor(Color(.placeholderText))
                    .padding(.horizontal, 4)
                    .padding(.vertical, 8)
            }
            
            TextEditor(text: $text)
                .padding(4)
                .background(Color.clear) // SwiftUI层面强制背景透明
        }
        .font(.body)
        .onAppear {
            // 视图出现时设置UITextView全局背景透明，确保生效
            UITextView.appearance().backgroundColor = .clear
        }
    }
}

调用方式保持不变：

@State private var caption = ""
// ...
TextArea("What's Happening", text: $caption)

方案二：自定义UIViewRepresentable（无全局影响） #

如果不想全局修改UITextView的外观，可以自定义TextView组件，更灵活地控制占位文本逻辑：

import SwiftUI
import UIKit

struct CustomTextEditor: UIViewRepresentable {
    @Binding var text: String
    let placeholder: String
    
    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.backgroundColor = .clear
        textView.font = .systemFont(ofSize: UIFont.systemFontSize)
        textView.textContainerInset = UIEdgeInsets(top: 8, left: 4, bottom: 8, right: 4)
        textView.delegate = context.coordinator
        return textView
    }
    
    func updateUIView(_ uiView: UITextView, context: Context) {
        // 同步文本与占位状态
        if text.isEmpty {
            uiView.text = placeholder
            uiView.textColor = .placeholderText
        } else {
            if uiView.text == placeholder {
                uiView.text = text
            }
            uiView.textColor = .label
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    class Coordinator: NSObject, UITextViewDelegate {
        var parent: CustomTextEditor
        
        init(_ parent: CustomTextEditor) {
            self.parent = parent
        }
        
        // 编辑开始时清除占位文本
        func textViewDidBeginEditing(_ textView: UITextView) {
            if textView.text == parent.placeholder {
                textView.text = ""
                textView.textColor = .label
            }
        }
        
        // 编辑结束时恢复占位（如果文本为空）
        func textViewDidEndEditing(_ textView: UITextView) {
            if textView.text.isEmpty {
                textView.text = parent.placeholder
                textView.textColor = .placeholderText
            }
            parent.text = textView.text
        }
    }
}

使用方式：

@State private var caption = ""
// ...
CustomTextEditor(text: $caption, placeholder: "What's Happening")

方案对比 #

• 方案一：基于原有代码修改，实现简单，适合不需要自定义复杂逻辑的场景，但会全局修改UITextView的背景色
• 方案二：完全自定义，无全局副作用，还能处理编辑状态下的占位文本切换逻辑，适合需要更精细控制的场景

内容的提问来源于stack exchange，提问作者JB Burrows