如何设置HStack子级对齐方式不同

Question

我的 HStack 有两个视图：图像和文本。我想将图像顶部对齐，但文本在 VerticalAlignment 上居中。但是，为文本指定对齐方式 .center 并不能解决问题，它仍然位于顶部。我有什么遗漏的吗？

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)
    }
}

预览截图

Answer 1

如果我理解正确的话，当文本比图像高时，您希望图像与

HStack

的顶部对齐，而当文本比图像短时，您希望文本垂直居中。

不应将文本包裹在 another

HStack

中，而应在文本周围添加

frame

。

Text("Text that has dynamic height and should be aligned center")
    .background(.pink)
    .frame(minHeight: 100, alignment: .center)

此（不可见）框架应至少与图像 (100pt) 一样高，并且文本应在该框架内进行

.center

对齐。

.center

是

alignment:

的默认值，因此编写

.frame(minHeight: 100)

就足够了。我把它包括在内只是为了清楚发生了什么。