主页 / coding / 问题 / 79342794
Accepted
SilKirss
Asked: 2025-01-09 21:29:56 +0800 CST

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

  • 772

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

预览截图

swiftui

2 个回答

  1. Best Answer

    HStack如果我理解正确的话，当文本高于图像时，您希望图像与顶部对齐，而当文本短于图像时，您希望文本垂直居中。

    您不应将文本换行到另一个 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)就足够了。我将其包括在内只是为了清楚发生了什么。

    当文本比图像短时：

    在此处输入图片描述

    当文本高于图像时：

    在此处输入图片描述

    • 0

  2. 如果您知道图像的大小，则对齐文本的一种方法是应用。不需要.alignmentGuide嵌套：HStack

    let starSize: CGFloat = 100

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

        Text("Text that has dynamic height and should be aligned center")
            .background(.pink)
            .alignmentGuide(.top) { dimensions in
                min(0, (dimensions.height - starSize) / 2)
            }
    }
    .background(.gray)
}
    • 0

相关问题