SwiftUI：如何使HStack内不同视图采用不同对齐方式？

针对HStack内不同视图需遵循不同对齐方式，同时避免视图超出屏幕的问题，分两种常见场景给出实现方案：

场景1：文字左边缘统一对齐，图片可自定义垂直对齐 #

如果需要所有文字的左边缘保持在同一竖线，同时图片可选择与文字的垂直对齐方式（如底部对齐），可通过以下步骤实现：

1. 定义PreferenceKey收集最大图片宽度 #

用于统一所有Item的图片区域宽度，确保文字起始位置一致：

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

2. 完整视图实现 #

struct ContentView: View {
    @State private var maxImageWidth: CGFloat = 0
    
    var body: some View {
        ScrollView(.vertical) {
            VStack(spacing: 16) {
                Item(title: "title a", imgLength: 30, maxImageWidth: maxImageWidth)
                    .preference(key: MaxImageWidthKey.self, value: 30)
                Item(title: "title b", imgLength: 40, maxImageWidth: maxImageWidth)
                    .preference(key: MaxImageWidthKey.self, value: 40)
                Item(title: "title that is very long and should wrap to multiple lines automatically", imgLength: 100, maxImageWidth: maxImageWidth)
                    .preference(key: MaxImageWidthKey.self, value: 100)
            }
            .onPreferenceChange(MaxImageWidthKey.self) {
                maxImageWidth = $0
            }
            .padding(.horizontal)
        }
    }
}

struct Item: View {
    var title: String
    var imgLength: CGFloat
    var maxImageWidth: CGFloat
    
    var body: some View {
        // 这里的alignment可修改为.top/.center，调整图片与文字的垂直对齐方式
        HStack(alignment: .bottom, spacing: 8) {
            // 用最大宽度容器包裹图片，保证文字左边缘对齐
            Color.red.frame(width: imgLength, height: imgLength)
                .border(Color.green, width: 2)
                .frame(width: maxImageWidth, alignment: .leading)
            
            Text(title)
                .fixedSize(horizontal: false, vertical: true) // 允许文字自动换行
            
            Spacer() // 推动文字左对齐，占满剩余屏幕空间
        }
        .frame(maxWidth: .infinity, alignment: .leading) // 确保HStack不超出屏幕宽度
    }
}

场景2：图片与文字采用独立垂直对齐（如图片底部、文字顶部） #

如果需要图片和文字完全遵循不同的垂直对齐规则，可通过自定义对齐线实现：

1. 自定义垂直对齐线 #

extension VerticalAlignment {
    private enum CustomAlign: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[.center]
        }
    }
    static let customAlign = VerticalAlignment(CustomAlign.self)
}

2. 完整视图实现 #

struct ContentView: View {
    var body: some View {
        ScrollView(.vertical) {
            VStack(spacing: 16) {
                Item(title: "title a", imgLength: 30)
                Item(title: "title b", imgLength: 40)
                Item(title: "title that wraps to multiple lines", imgLength: 100)
            }
            .padding(.horizontal)
        }
    }
}

struct Item: View {
    var title: String
    var imgLength: CGFloat
    
    var body: some View {
        HStack(alignment: .customAlign, spacing: 8) {
            Color.red.frame(width: imgLength, height: imgLength)
                .border(Color.green, width: 2)
                .alignmentGuide(.customAlign) { $0[.bottom] } // 图片底部对齐到自定义线
            
            Text(title)
                .fixedSize(horizontal: false, vertical: true)
                .alignmentGuide(.customAlign) { $0[.top] } // 文字顶部对齐到自定义线
            
            Spacer()
        }
        .frame(maxWidth: .infinity, alignment: .leading) // 防止HStack超出屏幕
    }
}

关键说明 #

• frame(maxWidth: .infinity, alignment: .leading)：确保HStack占满屏幕宽度，避免横向溢出
• fixedSize(horizontal: false, vertical: true)：允许文字自动换行，防止单行文字过长超出屏幕
• 场景1通过PreferenceKey统一图片区域宽度，保证文字左边缘对齐；场景2通过自定义对齐线实现不同视图的独立对齐规则

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