如何在SwiftUI中布局以下内容?
这两个圆圈在蓝线上水平居中对齐,顶部圆圈在绿线上与其矩形垂直对齐,底部圆圈在红线上与底部矩形垂直对齐。
没有嵌套的HStack
/VStack
结构可以描述这种情况。我们认为解决方案与自定义对齐指南有关,但是我们找到的所有示例都无法达到这种复杂程度。
如何在SwiftUI中布局以下内容?
这两个圆圈在蓝线上水平居中对齐,顶部圆圈在绿线上与其矩形垂直对齐,底部圆圈在红线上与底部矩形垂直对齐。
没有嵌套的HStack
/VStack
结构可以描述这种情况。我们认为解决方案与自定义对齐指南有关,但是我们找到的所有示例都无法达到这种复杂程度。
在这种情况下,最好的选择似乎是使用LazyVGrid
。人们往往认为网格用于集合,其中可能有大量项目,但它们也适用于已知的、有限数量的子项,因此我认为它们在这里可以发挥作用。
本质上,您有两列项目-两者都可以在一定程度上灵活,但听起来您的矩形列需要更多扩展。因此,您可以尝试类似以下的东西:
let columns = [
GridItem(.flexible(maximum: 120)),
GridItem(.flexible())
]
var body: some View {
LazyVGrid(columns: columns) {
// row 1, column 1
RoundedRectangle(cornerRadius: 10)
.frame(width: 100, height: 160)
// row 1, column 2
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt enim in iaculis tincidunt. Nunc vitae imperdiet dolor")
// row 2, column 1
Circle()
.frame(height: 100)
// row 2, column 2
Text("Integer vitae volutpat urna. Morbi vel pharetra dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris ornare a augue id cursus")
}
}
上面的代码会给你类似这样的结果:
我自己还没有机会以这种方式使用网格,所以还没有尝试过它们提供的所有自定义选项,但是感觉这可能是最好的方法,可以让你得到想要的结果,而不必担心对齐指南或偏好设置。