SwiftUI中如何为TextEditor内部文本添加内边距而非控件本身？

SwiftUI 原生 TextEditor 的 padding() 修饰符只会调整控件自身的外部间距，没法直接修改内部文本的边距。要实现类似笔记应用的排版效果，得修改其底层 UITextView 的 contentInset 属性，这里提供两种可行方案：

方案一：自定义封装带内边距的 TextEditor #

通过 UIViewRepresentable 封装一个支持自定义内边距的文本编辑器，直接控制内部文本的边距：

import SwiftUI

struct CustomTextEditor: UIViewRepresentable {
    @Binding var text: String
    var textColor: UIColor = .black
    var font: UIFont = .systemFont(ofSize: 20)
    var contentInset: UIEdgeInsets = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
    
    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.font = font
        textView.textColor = textColor
        textView.contentInset = contentInset
        // 清除系统默认内边距，避免和自定义值冲突
        textView.textContainerInset = .zero
        textView.textContainer.lineFragmentPadding = 0
        textView.delegate = context.coordinator
        return textView
    }
    
    func updateUIView(_ uiView: UITextView, context: Context) {
        if uiView.text != text {
            uiView.text = text
        }
        uiView.font = font
        uiView.textColor = textColor
        uiView.contentInset = contentInset
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(text: $text)
    }
    
    class Coordinator: NSObject, UITextViewDelegate {
        @Binding var text: String
        
        init(text: Binding<String>) {
            _text = text
        }
        
        func textViewDidChange(_ textView: UITextView) {
            text = textView.text
        }
    }
}

替换原有代码中的 TextEditor #

把你原来代码里的 TextEditor 换成这个自定义组件，同时调整占位符的 padding 以保持对齐：

ZStack (alignment: .leading){
    if note.text.isEmpty {
        VStack{
            Text("Write something....")
                .padding(.top, 20) // 和自定义TextEditor的top内边距匹配
                .padding(.leading, 20) // 和left内边距匹配
                .opacity(0.6)
                .font(.system(size: 20))
                .foregroundColor(.black)
            Spacer()
        }
    }
    
    VStack{
        CustomTextEditor(
            text: $note.text,
            font: UIFont(name: "SanFrancisco", size: 20) ?? .systemFont(ofSize: 20),
            contentInset: UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
        )
        .opacity(note.text.isEmpty ? 0.85 : 1)
        .onReceive(note.publisher(for: \.text), perform: setName)
        .onReceive(
            note.publisher(for: \.text)
                .debounce(for: 0.5, scheduler: RunLoop.main)
                .removeDuplicates()
        ){ _ in
            try? PersistenceController.shared.saveContext()
        }
        .navigationTitle(note.name)
    }
}

方案二：使用 Introspect 库快速修改原生组件 #

如果不想自定义封装，可借助 Introspect 库直接获取底层 UITextView 修改内边距：

1. 通过 Swift Package Manager 添加 Introspect 依赖
2. 修改代码：

TextEditor(text: $note.text)
    .opacity(note.text.isEmpty ? 0.85 : 1)
    .font(.custom("SanFrancisco", fixedSize: 20))
    .introspectTextView { textView in
        textView.contentInset = UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20)
        textView.textContainerInset = .zero
        textView.textContainer.lineFragmentPadding = 0
    }
    .onReceive(note.publisher(for: \.text), perform: setName)
    .onReceive(
        note.publisher(for: \.text)
            .debounce(for: 0.5, scheduler: RunLoop.main)
            .removeDuplicates()
    ){ _ in
        try? PersistenceController.shared.saveContext()
    }
    .navigationTitle(note.name)

注意事项 #

• 两种方案都要设置 textContainerInset 和 lineFragmentPadding 为零，避免系统默认内边距和自定义值叠加
• 占位符的 padding 要和自定义内边距保持一致，确保输入文本后和占位符位置对齐
• 自定义封装方案更灵活，适合多处复用；Introspect 适合快速测试或简单场景

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