SwiftUI中VStack内部分文本意外内边距的问题排查与解决

需求：在底部弹窗（bottom sheet）中展示SwiftUI视图，要求：

• 所有文本内容应用水平内边距
• 顶部图片保持居中
• 布局不随文本长度变化

当前代码：

import SwiftUI

struct TestView: View {
    
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                Image(systemName: "sparkles").font(.largeTitle)
                Text("Title ösdkföskdfj")
                    .fontWeight(.bold).font(.title2)
                + Text(" Special Term")
                    .fontWeight(.bold).font(.title2)
                    .foregroundColor(.accentColor)
                Text("lksdj flaksdjf ölaksdj flökasdj flökasjd flökasjd flökasjd fklöajs dflkjasdflökja sdlöfkj asldkfj alskdfj laskdjf lökasdj flökasj dflökjas dflkj asdlfkj asdlfkj asdlökfj asldökfj ")
            }
        }
        .padding(.top, 20)
        .padding(.horizontal, 60)
        .presentationDetents([.medium, .large])
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            TestView()
        }
    }
}

问题：第一个文本出现额外内边距，导致文本未对齐，请问该问题产生的原因是什么？如何移除该内边距并使所有文本对齐？

1. Text拼接的修饰符应用错误：给第一个Text片段单独设置fontWeight和font修饰符后，再通过+拼接第二个Text，这种方式会让拼接后的组合Text内部产生布局偏移，导致与下方普通Text的对齐不一致。
2. 水平内边距作用范围错误：将.padding(.horizontal, 60)加在ScrollView上，不仅会让图片被内边距影响，还会让ScrollView内容宽度随文本长度自适应，破坏固定布局。
3. VStack未设置明确对齐规则：VStack默认使用.center对齐，但拼接后的Text与普通Text的布局特性存在差异，缺乏统一对齐规则时就会出现错位。

修改后的代码如下，关键改动已标注：

import SwiftUI

struct TestView: View {
    
    var body: some View {
        ScrollView {
            // 设置VStack左对齐，统一内容对齐规则
            VStack(spacing: 20, alignment: .leading) { 
                Image(systemName: "sparkles")
                    .font(.largeTitle)
                    .frame(maxWidth: .infinity) // 让图片占满容器宽度，保持居中
                
                // 将修饰符统一应用到拼接后的整个Text上，避免片段布局偏移
                (Text("Title ösdkföskdfj")
                 + Text(" Special Term")
                    .foregroundColor(.accentColor))
                .fontWeight(.bold)
                .font(.title2)
                .padding(.horizontal, 60) // 仅给文本添加水平内边距
                
                Text("lksdj flaksdjf ölaksdj flökasdj flökasjd flökasjd flökasjd fklöajs dflkjasdflökja sdlöfkj asldkfj alskdfj laskdjf lökasdj flökasj dflökjas dflkj asdlfkj asdlfkj asdlökfj asldökfj ")
                .padding(.horizontal, 60) // 仅给文本添加水平内边距
                .frame(maxWidth: .infinity, alignment: .leading) // 固定文本宽度，避免随内容变化
            }
        }
        .padding(.top, 20) // 仅保留顶部内边距
        .presentationDetents([.medium, .large])
    }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            TestView()
        }
    }
}

关键改动说明：

• 给VStack设置alignment: .leading，确保所有内容统一左对齐
• 给图片添加.frame(maxWidth: .infinity)，使其占满容器宽度，保持居中且不受文本内边距影响
• 将拼接Text的修饰符统一应用到整个组合文本上，消除单个片段的布局偏移
• 把水平内边距单独应用到每个文本上，精准控制文本的边距范围
• 给长文本添加.frame(maxWidth: .infinity, alignment: .leading)，强制固定宽度，避免布局随文本长度变化

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