SwiftUI中TextEditor内容被Navigation Bar遮挡的解决方案问询

这个问题在SwiftUI开发里挺常见的，我之前也碰到过好几次～跳转后TextEditor顶部内容被导航栏挡住，手动滚动就正常，本质是视图初始化时的滚动位置没适配导航栏的高度。下面给你几个实用的解决办法：

方法1：让TextEditor自动避开安全区域（最简单高效） #

你目前只给TextEditor加了水平方向的padding，没考虑顶部安全区域的适配——NavigationBar占据的区域属于安全区域的一部分，所以TextEditor默认会延伸到它下面。直接给TextEditor加上顶部安全区域的padding就行：

struct NotesEditingScreen: View {
    @State var text: String
    
    var body: some View {
        TextEditor(text: $text)
            .padding(.horizontal)
            .safeAreaPadding(.top) // iOS 15+ 优先用这个，自动适配设备的安全区域
            .navigationBarTitle("Editing")
    }
}

如果你的项目需要兼容iOS 14及以下，可以换成用GeometryReader获取安全区域高度：

GeometryReader { proxy in
    TextEditor(text: $text)
        .padding(.horizontal)
        .padding(.top, proxy.safeAreaInsets.top)
        .navigationBarTitle("Editing")
}

这样TextEditor的顶部就会自动对齐导航栏的底部，内容不会被遮挡。

方法2：视图出现时自动滚动到TextEditor顶部 #

既然手动滚动到顶部就能正常显示，那我们可以在视图加载完成后，程序化地让TextEditor滚动到最顶端。这里需要借助底层的UITextView来实现：

如果你愿意用第三方库的话，Introspect可以快速拿到SwiftUI控件对应的UIKit实例，代码会很简洁：

struct NotesEditingScreen: View {
    @State var text: String
    @State private var textView: UITextView?
    
    var body: some View {
        TextEditor(text: $text)
            .padding(.horizontal)
            .navigationBarTitle("Editing")
            .onAppear {
                // 滚动到文本的起始位置
                textView?.scrollRangeToVisible(NSRange(location: 0, length: 0))
            }
            .introspectTextView { tv in // 需要导入Introspect库
                textView = tv
            }
    }
}

要是不想加第三方库，自己写个简单的UIViewRepresentable包装UITextView也可以：

struct ScrollableTextEditor: UIViewRepresentable {
    @Binding var text: String
    var onTextViewReady: (UITextView) -> Void
    
    func makeUIView(context: Context) -> UITextView {
        let textView = UITextView()
        textView.font = UIFont.preferredFont(forTextStyle: .body)
        textView.text = text
        onTextViewReady(textView)
        return textView
    }
    
    func updateUIView(_ uiView: UITextView, context: Context) {
        if uiView.text != text {
            uiView.text = text
        }
    }
}

// 使用这个自定义控件
struct NotesEditingScreen: View {
    @State var text: String
    @State private var textView: UITextView?
    
    var body: some View {
        ScrollableTextEditor(text: $text) { tv in
            textView = tv
        }
        .padding(.horizontal)
        .navigationBarTitle("Editing")
        .onAppear {
            textView?.scrollRangeToVisible(NSRange(location: 0, length: 0))
        }
    }
}

这个方法模拟了手动滚动的操作，让TextEditor一开始就显示最顶部的内容。

方法3：调整NavigationBar外观（适合需要不透明导航栏的场景） #

有时候导航栏的半透明效果会让文本看起来像是被“盖”在下面，你可以把导航栏设置为不透明，这样TextEditor会自动适配导航栏的底部位置：

struct NotesEditingScreen: View {
    @State var text: String
    
    init(text: String) {
        self._text = State(initialValue: text)
        // 配置导航栏外观为不透明
        let appearance = UINavigationBarAppearance()
        appearance.backgroundColor = .systemBackground // 和页面背景色一致
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
    }
    
    var body: some View {
        TextEditor(text: $text)
            .padding(.horizontal)
            .navigationBarTitle("Editing")
    }
}

这个方法不仅能解决遮挡问题，还能让导航栏看起来更统一，适合不需要半透明导航栏的场景。

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