将 HStack 内容置于中心，不包括 VStack 中的内容

Question

我有一个非常基本的

HStack

视图，其中有一个

Image

、

VStack

、

Text

和另一个

Image

。我想要的是速度计图像、

ProgressView

（位于

VStack

中）、“75”文本和水平居中的 V 形图像。也许有更好的方法来构建它，或者我可以应用一些我不知道的修饰符。同样，我们的目标是拥有水平行的内容，即

Image

、

ProgressView

、

Text

和

Image

水平居中，“Hello”文本前导与

ProgressView

对齐。这是其当前状态和代码的屏幕截图。

struct ContentView: View {
    var body: some View {
        HStack(alignment: .lastTextBaseline) {
            Image(systemName: "speedometer")
            VStack(alignment: .leading) {
                Text("Hello")
                ProgressView(value: 50, total: 100)
                    .progressViewStyle(.linear)
            }
            Text("75")
            Image(systemName: "chevron.forward")
        }
        .padding()
    }
}

这就是我想要的对齐方式。此屏幕截图中缺少的是我希望文本“Hello”位于

ProgressView

上方，并且前导对齐：

Answer 1

您想要做的比一开始看起来要复杂一些 - 因为您本质上是想在对齐的布局中插入一个额外的视图（文本）而不影响它。

我的想法是，您可以尝试以下渐进式的解决方案：

1. 使用网格

2. HStack 的底部对齐，为 3 个对齐元素定义相同的高度（您可以使用类似以下内容在自己的框架中定义视图的对齐方式：.frame(height: Foo,alignment: .center)

3. 通过将高度设置为 0 来强制 SwiftUI 布局忽略文本

4. 几何阅读器