SwiftUI RectangularFullView - 对齐嵌套堆栈

Question

我正在构建一个个人 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 手表上，因此项目不必是动态的其他手表尺寸。

问题总结：

是否可以将一个 HStack 在另一个 HStack
是否可以在 VStack

感谢您的帮助！

Answer 1

我已经设法让它工作了：

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

结果如下（我还稍微更新了模板）：

SwiftUI RectangularFullView - 对齐嵌套堆栈

SwiftUI RectangularFullView - Aligning nested Stacks

xcode

swiftui

watchos

apple-watch-complication