SwiftUI中VStack内TextField与TextEditor左对齐问题求解

在SwiftUI开发中，将设置了axis: .vertical的TextField和TextEditor放在同一个VStack内时，默认情况下两者的文本无法实现完美左对齐。手动添加.padding(.horizontal, 5)能改善对齐效果，但这种硬编码数值的方式不够优雅，以下是更规范的处理方案：

方案一：统一使用Plain文本样式（官方推荐） #

默认的多行TextField带有内置的内边距和样式，和TextEditor的默认布局存在差异。给TextField设置.textFieldStyle(.plain)可以移除这些默认样式，让两者的文本基线自然对齐，无需额外调整内边距：

var body: some View {
    VStack(spacing: 0) {
        TextField(
            "This is some editable text...",
            text: $username,
            axis: .vertical
        )
        .textFieldStyle(.plain) // 移除TextField默认样式
        
        TextEditor(text: $fullText)
    }
    .frame(height: 260)
    .padding(.all, 20)
}

方案二：自定义对齐指南 #

如果需要保留TextField的默认样式，可以通过自定义alignmentGuide强制两个控件的左边界对齐，抵消默认内边距带来的偏移：

var body: some View {
    VStack(spacing: 0) {
        TextField(
            "This is some editable text...",
            text: $username,
            axis: .vertical
        )
        .alignmentGuide(.leading) { $0[.leading] }
        
        TextEditor(text: $fullText)
        .alignmentGuide(.leading) { $0[.leading] }
    }
    .frame(height: 260)
    .padding(.all, 20)
}

方案三：微调TextEditor内边距（不推荐） #

TextEditor默认也存在少量内边距，若只是临时适配，可以反向调整内边距来对齐，但这种方式依赖硬编码数值，适配不同系统版本或设备时可能出现问题：

TextEditor(text: $fullText)
    .padding(.horizontal, -4) // 反向抵消默认左内边距

总结 #

最优雅且符合官方设计思路的方案是方案一，通过统一文本样式消除控件间的布局差异，避免硬编码数值带来的适配问题。

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