SwiftUI中HStack布局对齐问题：非固定宽度下实现标签等宽对齐

要实现两个HStack中「SwiftUI」文本左对齐，同时「Title」和「Description」标签自动保持相同宽度（无需固定宽度），可以通过PreferenceKey捕获视图宽度的方式实现，核心思路是动态获取两个标签的最大宽度，再将该宽度统一应用到两个标签上。

步骤1：定义宽度捕获的PreferenceKey #

首先创建一个PreferenceKey类型，用来收集所有标签的宽度并取最大值：

struct WidthPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

步骤2：实现主视图逻辑 #

在主视图中，通过GeometryReader获取每个标签的宽度，利用PreferenceKey传递最大宽度，最后将该宽度应用到两个标签的frame上：

struct AlignedContentView: View {
    @State private var maxLabelWidth: CGFloat = 0
    
    var body: some View {
        VStack(spacing: 16) {
            // 第一个HStack
            HStack(alignment: .top) {
                Text("Title")
                    .background(
                        // 捕获当前标签宽度
                        GeometryReader { proxy in
                            Color.clear
                                .preference(key: WidthPreferenceKey.self, value: proxy.size.width)
                        }
                    )
                    .frame(width: maxLabelWidth, alignment: .leading)
                Text("SwiftUI")
            }
            
            // 第二个HStack
            HStack(alignment: .top) {
                Text("Description")
                    .background(
                        GeometryReader { proxy in
                            Color.clear
                                .preference(key: WidthPreferenceKey.self, value: proxy.size.width)
                        }
                    )
                    .frame(width: maxLabelWidth, alignment: .leading)
                Text("SwiftUI")
            }
        }
        // 接收最大宽度并更新状态
        .onPreferenceChange(WidthPreferenceKey.self) { newValue in
            maxLabelWidth = newValue
        }
        .padding()
    }
}

优化：提取标签子视图减少重复代码 #

如果需要复用标签逻辑，可以把标签部分提取成独立子视图：

struct AutoWidthLabel: View {
    let text: String
    let maxWidth: CGFloat
    
    var body: some View {
        Text(text)
            .background(
                GeometryReader { proxy in
                    Color.clear
                        .preference(key: WidthPreferenceKey.self, value: proxy.size.width)
                }
            )
            .frame(width: maxWidth, alignment: .leading)
    }
}

// 主视图中调用
struct AlignedContentView: View {
    @State private var maxLabelWidth: CGFloat = 0
    
    var body: some View {
        VStack(spacing: 16) {
            HStack(alignment: .top) {
                AutoWidthLabel(text: "Title", maxWidth: maxLabelWidth)
                Text("SwiftUI")
            }
            
            HStack(alignment: .top) {
                AutoWidthLabel(text: "Description", maxWidth: maxLabelWidth)
                Text("SwiftUI")
            }
        }
        .onPreferenceChange(WidthPreferenceKey.self) {
            maxLabelWidth = $0
        }
        .padding()
    }
}

方案优势 #

• 完全基于文本内容动态计算宽度，适配不同字体、语言场景
• 无需手动设置固定宽度，避免硬编码导致的布局适配问题
• 自动保证两个标签宽度一致，同时右侧「SwiftUI」文本自然左对齐

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