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 手表上,因此项目不必是动态的其他手表尺寸。
问题总结:
- 是否可以将一个
HStack
在另一个 HStack
中垂直居中
- 是否可以在
VStack
中左对齐文本
感谢您的帮助!
我已经设法让它工作了:
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)
}
}
}
结果如下(我还稍微更新了模板):
我正在构建一个个人 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
中左对齐文本
感谢您的帮助!
我已经设法让它工作了:
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)
}
}
}
结果如下(我还稍微更新了模板):