SwiftUI中如何让可编辑与不可编辑模式下文本顶部对齐一致？

问题描述 #

开发SwiftUI应用时，需要在文本可编辑（TextEditor）和不可编辑（Text）模式间切换，要求两种模式下文本完全对齐。但即使设置了相同的框架尺寸，TextEditor内容默认顶部对齐，而Text内容默认居中显示，导致切换时出现错位。

原代码片段：

import SwiftUI

struct ContentView: View {
    @State private var text: String = "Tap to edit"
    @State private var isEditable: Bool = false
    @State private var textStyle = NSFont.preferredFont(forTextStyle: .body) // Example styling
    
    var body: some View {
        VStack {
            ZStack(alignment: .leading) { // Leading alignment; top alignment is implicit by frame size
                if isEditable {
                    TextEditor(text: $text)
                        .frame(width: 100, height: 200) // Same frame size for both views
                        .font(.custom(textStyle.fontName, size: textStyle.pointSize)) // Ensure font consistency
                        .border(.orange)
                    
                } else {
                    Text(text)
                        .frame(width: 100, height: 200) // Same frame size for both views
                        .font(.custom(textStyle.fontName, size: textStyle.pointSize)) // Ensure font consistency
                        .border(.blue)
                        .multilineTextAlignment(.leading)
                        .onTapGesture {
                            self.isEditable = true
                        }
                }
            }
            
            Button("Done") {
                self.isEditable = false
                // Add logic to hide keyboard if necessary
            }
        }
    }
}

解决方案 #

要让两者顶部对齐，需要调整Text视图的垂直对齐方式，并消除TextEditor的默认内边距：

1. 设置Text的frame对齐方式：给Text的frame添加alignment: .topLeading，强制文本在frame内顶部左对齐，和TextEditor的默认行为匹配。
2. 移除TextEditor的默认内边距：TextEditor基于UITextView，默认有少量内边距，通过全局设置消除内边距，避免额外偏移。

修改后的完整代码：

import SwiftUI

struct ContentView: View {
    @State private var text: String = "Tap to edit"
    @State private var isEditable: Bool = false
    @State private var textStyle = NSFont.preferredFont(forTextStyle: .body)
    
    init() {
        // 全局移除TextEditor的默认内边距
        UITextView.appearance().textContainerInset = .zero
        UITextView.appearance().textContainer.lineFragmentPadding = 0
    }
    
    var body: some View {
        VStack {
            ZStack(alignment: .topLeading) { // 明确设置ZStack对齐为顶部左对齐
                if isEditable {
                    TextEditor(text: $text)
                        .frame(width: 100, height: 200)
                        .font(.custom(textStyle.fontName, size: textStyle.pointSize))
                        .border(.orange)
                    
                } else {
                    Text(text)
                        .frame(width: 100, height: 200, alignment: .topLeading) // 设置Text的frame对齐为顶部左对齐
                        .font(.custom(textStyle.fontName, size: textStyle.pointSize))
                        .border(.blue)
                        .multilineTextAlignment(.leading)
                        .onTapGesture {
                            isEditable = true
                        }
                }
            }
            
            Button("Done") {
                isEditable = false
                // 隐藏键盘逻辑
                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
            }
        }
    }
}

关键说明 #

• ZStack的对齐方式改为.topLeading，确保两个视图在ZStack内的基准对齐一致。
• 全局设置UITextView的内边距为零，避免TextEditor内容和Text之间出现细微的间距差异。
• Text的frame明确指定.topLeading对齐，覆盖其默认的垂直居中行为。

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