如何单独修改SwiftUI中HStack单个子视图的对齐方式？

要实现父HStack保持.bottom默认对齐，同时让指定子视图顶部对齐，且无需硬编码兄弟视图高度，可以通过给目标子视图设置maxHeight: .infinity并指定对齐方式为.top来实现，这样能动态匹配父容器的高度（由最高子视图决定）。

修改后的完整代码 #

var body: some View {
    HStack(alignment: .bottom) {
        Rectangle()
            .fill(.yellow)
            .frame(height: 100)

        Rectangle()
            .fill(.blue)
            .frame(height: 20)

        // 动态顶部对齐的实现
        Rectangle()
            .fill(.green)
            .frame(height: 50)
            .frame(maxHeight: .infinity, alignment: .top)
    }
    .background {
        Color.red
    }
}

原理说明 #

• 父HStack的高度由最高的子视图（黄色矩形，高度100）自动决定，无需手动指定。
• 给绿色矩形添加frame(maxHeight: .infinity, alignment: .top)后，它会拉伸至父HStack的完整高度，同时自身内容（50高度的矩形）会对齐到该拉伸区域的顶部，从而实现顶部对齐的效果。
• 这种方式完全动态，即便后续修改其他子视图的高度，绿色矩形的对齐逻辑也会自动适配，不需要调整硬编码的数值。

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