SwiftUI中如何为HStack子视图设置不同垂直对齐方式

在SwiftUI里用HStack放了Image和Text两个视图，想要Image顶部对齐，Text垂直居中。但给Text外面套的HStack设了.center对齐后完全没效果，Text还是顶在上面，这问题出在哪？

struct SwiftUIView: View {
    var body: some View {
        HStack(alignment: .top) {
            Image(systemName: "star.fill")
                .resizable()
                .frame(width: 100, height: 100)
                .background(.green)

            HStack(alignment: .center) {
                Text("Text that has dynamic height and should be aligned center")
                    .background(.pink)
            }
        }
        .background(.gray)
    }
}

问题核心是：你套的那个HStack高度只跟着Text走，和外层HStack的高度（也就是Image的高度）不一样。容器高度和内容高度相同的时候，设置垂直.center对齐等于白设——不管怎么对齐都在同一个位置。

要让Text相对于整个外层HStack垂直居中，得先让嵌套的HStack占满外层的全部垂直空间，再让Text在这个满高容器里居中。修改后的代码如下：

struct SwiftUIView: View {
    var body: some View {
        HStack(alignment: .top) {
            Image(systemName: "star.fill")
                .resizable()
                .frame(width: 100, height: 100)
                .background(.green)

            HStack {
                Text("Text that has dynamic height and should be aligned center")
                    .background(.pink)
            }
            .frame(maxHeight: .infinity, alignment: .center) // 关键：让嵌套HStack撑满垂直空间，再居中内部Text
        }
        .background(.gray)
    }
}

补充说明：

• .frame(maxHeight: .infinity)会让嵌套HStack的高度拉伸到和外层HStack一致（也就是Image的100高度）。
• 此时设置alignment: .center，Text就会在这个满高容器里垂直居中了。
• 原来嵌套HStack的alignment: .center其实没用，因为HStack的alignment参数控制的是内部子视图的垂直对齐，但你这里只有一个Text，所以完全起不到作用。

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