SwiftUI中如何让两个Text元素左侧起始位置对齐？

问题描述 #

我是SwiftUI初学者，遇到了布局对齐问题：截图中第一个Text的“E”和第二个Text的“T”无法左对齐，希望两个Text元素左侧起始位置完全一致。已知用单个Text加\n换行能实现对齐，但后续还要添加TextField等元素，这个方案不可行。

代码：

struct TestData: View {
    var body: some View {
        ZStack {
            Image("backgroundImage").resizable().edgesIgnoringSafeArea(.all).scaledToFill()
            VStack(alignment: .leading, spacing: 10) {
                Text("Enter your Data")
                    .font(.largeTitle).bold()
                    .frame(width: UIScreen.main.bounds.width-50, height: 33.0)
                
                Text("This is a very very long text to wrap on the next line. This text is of 2 lines.")
                    .font(.callout)
                    .frame(width: UIScreen.main.bounds.width-50, height: 80.0)
                    .foregroundColor(.gray)
                    .lineLimit(nil)
                
                HStack {
                    // Contains image and textfield. Data will be entered in textfield.
                }

                // Move Text and Button elements.
            }.offset(x: -10, y: -100)
        }
    }
}

struct TestData_Previews: PreviewProvider {
    static var previews: some View {
        TestData()
    }
}

截图：

问题原因 #

你给两个Text设置了固定高度，文本会在固定高度的frame里垂直居中显示。加上两个文本的字体大小不同，视觉上就出现了左侧不对齐的情况。另外，VStack的offset(x: -10)也会导致整个容器偏移，进一步影响对齐精度。

解决办法 #

移除固定高度设置，让文本自适应高度，同时用更符合SwiftUI的方式控制边距：

struct TestData: View {
    var body: some View {
        ZStack {
            Image("backgroundImage")
                .resizable()
                .edgesIgnoringSafeArea(.all)
                .scaledToFill()
            
            VStack(alignment: .leading, spacing: 10) {
                Text("Enter your Data")
                    .font(.largeTitle)
                    .bold()
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.horizontal, 25)
                
                Text("This is a very very long text to wrap on the next line. This text is of 2 lines.")
                    .font(.callout)
                    .foregroundColor(.gray)
                    .lineLimit(nil)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.horizontal, 25)
                
                HStack {
                    // 放置图片和TextField
                }
                .padding(.horizontal, 25)

                // 其他Text和Button元素
            }
            .offset(y: -100)
        }
    }
}

修改说明 #

1. 移除固定高度与宽度：用frame(maxWidth: .infinity, alignment: .leading)让文本占满可用宽度并左对齐，避免固定尺寸带来的适配问题。
2. 用padding控制边距：替代UIScreen.main.bounds.width-50，用padding(.horizontal, 25)设置左右边距，适配不同屏幕尺寸。
3. 移除不必要的x偏移：删除offset(x: -10)，避免整个VStack向左偏移破坏对齐。
4. 自适应文本高度：文本在无固定高度的frame中默认顶部对齐，配合VStack的.leading设置，两个Text的左侧就能完全对齐。

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