SwiftUI：如何移除或修改HStack的灰色背景区域？

核心解决思路 #

macOS下的TextEditor默认带有系统样式（顶部灰色分隔线、默认背景色），结合HStack的背景设置冲突，就会出现你遇到的残留灰色区域问题。下面是具体的修复方案：

方案1：全局样式调整（快速解决） #

通过修改UITextView的全局外观，移除默认边框和背景，同时给TextEditor和HStack设置匹配系统主题的背景色：

struct ChatInputView: View {
    @State private var messageText = ""
    
    var body: some View {
        HStack(alignment: .bottom) {
            TextEditor(text: $messageText)
                .frame(minHeight: 40, maxHeight: 120)
                .scrollContentBackground(.hidden) // 隐藏滚动视图默认灰色背景
                .background(Color(.windowBackgroundColor)) // 匹配系统窗口背景
                .cornerRadius(8)
                .padding(4)
                // 自定义圆角边框，替代系统默认边框
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color(.separatorColor), lineWidth: 0.5)
                )
            
            Button(action: sendMessage) {
                Image(systemName: "paperplane.fill")
                    .padding(8)
            }
            .buttonStyle(.borderless)
        }
        .padding(8)
        .background(Color(.windowBackgroundColor)) // HStack背景与TextEditor统一
        .onAppear {
            // 移除UITextView默认边框、调整内边距、设置透明背景
            UITextView.appearance().borderStyle = .none
            UITextView.appearance().textContainerInset = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
            UITextView.appearance().backgroundColor = .clear
        }
    }
    
    private func sendMessage() {
        // 此处添加消息发送逻辑
    }
}

方案2：局部自定义TextEditor（无全局影响） #

如果不想修改全局UITextView样式，可以封装一个自定义的无默认样式TextEditor，仅作用于当前输入框：

// 自定义无默认样式的TextEditor
struct PlainTextEditor: UIViewRepresentable {
    @Binding var text: String
    let placeholder: String
    
    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.borderStyle = .none
        textView.textContainerInset = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
        textView.backgroundColor = .clear
        textView.font = .systemFont(ofSize: 14)
        textView.delegate = context.coordinator
        
        // 设置占位符
        if text.isEmpty {
            textView.text = placeholder
            textView.textColor = .secondaryLabel
        }
        return textView
    }
    
    func updateUIView(_ uiView: UITextView, context: Context) {
        if uiView.text != placeholder && uiView.text != text {
            uiView.text = text
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UITextViewDelegate {
        let parent: PlainTextEditor
        
        init(parent: PlainTextEditor) {
            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 = .secondaryLabel
            }
            parent.text = textView.text
        }
        
        func textViewDidChange(_ textView: UITextView) {
            parent.text = textView.text
        }
    }
}

// 使用自定义TextEditor的输入框视图
struct ChatInputView: View {
    @State private var messageText = ""
    
    var body: some View {
        HStack(alignment: .bottom) {
            PlainTextEditor(text: $messageText, placeholder: "输入消息...")
                .frame(minHeight: 40, maxHeight: 120)
                .background(Color(.windowBackgroundColor))
                .cornerRadius(8)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(Color(.separatorColor), lineWidth: 0.5)
                )
            
            Button(action: sendMessage) {
                Image(systemName: "paperplane.fill")
                    .padding(8)
            }
            .buttonStyle(.borderless)
        }
        .padding(8)
        .background(Color(.windowBackgroundColor))
    }
    
    private func sendMessage() {
        // 此处添加消息发送逻辑
    }
}

关键修复点说明 #

1. .scrollContentBackground(.hidden)：隐藏TextEditor内部滚动视图的默认灰色背景，避免与自定义背景冲突。
2. 统一背景色：给TextEditor和外层HStack设置Color(.windowBackgroundColor)，确保在亮色/暗色模式下自动匹配系统主题。
3. 移除默认边框：通过修改UITextView的borderStyle为.none，彻底消除顶部灰色线条。
4. 自定义边框：用.overlay添加圆角边框，模拟Slack输入框的样式。

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