SwiftUI RectangularFullView - 对齐嵌套堆栈

SwiftUI RectangularFullView - Aligning nested Stacks

我正在构建一个个人 Apple Watch 应用程序,而且我刚刚在处理复杂问题。 我已经设法让我的数据显示正确的数据,但是视图没有像我希望的那样在屏幕上对齐。

堆栈以动态宽度居中对齐。文本也居中对齐。 我尝试使用 .multilineTextAlignment 编辑文本,但没有任何改变。

我模拟了下面的预期对齐方式:

红色方框是 HStack,其图像始终为 60x56 pixels。 我希望它保持对齐,到目前为止似乎有效。 我还希望它在视图中 垂直居中 ,但我不确定是否可行。

粉红色框是 VStack 文本。 此文本应左对齐,但我无法使其正常工作。

蓝色框是包围HStack

这是我的代码(我刚刚意识到我已经给出了带有真实示例图像的模板代码,但它应该是可以理解的):

struct ComplicationViewTemplate: View {

var body: some View {
    HStack {
        HStack {
            Image("0i")
                .aspectRatio(contentMode: .fit)
        }.frame(width: 60, height: 56, alignment: .leading)
        VStack {
            Text("Egg")
                    .font(.body)
                    .bold()
                Text("0 steps")
                    .font(.caption)
                Text("Level 01")
                    .font(.caption)
        }
    }
}
}

如果有帮助,因为此应用仅供我使用,它只会出现在 Series 5 44mm 手表上,因此项目不必是动态的其他手表尺寸。

问题总结:

  1. 是否可以将一个 HStack 在另一个 HStack
  2. 中垂直居中
  3. 是否可以在 VStack
  4. 中左对齐文本

感谢您的帮助!

我已经设法让它工作了:

struct ComplicationViewTemplate: View {
    var body: some View {
        HStack {
            HStack {
                Image("14gi")
                    .interpolation(.none)
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 60, height: 56, alignment: .leading)
            }.frame(width: 60, height: 56, alignment: .leading)
            Spacer(minLength: 10)
            VStack(alignment: .leading) {
                Text("Pikachu").bold().font(.body).alignmentGuide(.leading, computeValue: { d in d[.leading]
                })
                Text("000000 steps").font(.caption).alignmentGuide(.leading, computeValue: { d in d[.leading]
                })
                Text("Level 00").font(.caption).alignmentGuide(.leading, computeValue: { d in d[.leading]
                })
            }.frame(width: 110, alignment: .leading)
        }
    }
}

结果如下(我还稍微更新了模板):