我刚开始学习 SwiftUI,但是在 UI 对齐方面遇到了问题。以下代码会在图像顶部创建一个空白间隙。
VStack(alignment: .leading) {
Image(item.imageUrl)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 72, height: 72, alignment: .top).padding(.top,0)
Text("\(item.name)").font(Font.system(size:12, design: .default))
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity).lineLimit(2)
}
}
我看到 VStack 接受参数 alignment
,但这是水平对齐。我需要的是 Image 应该粘贴在其父视图的顶部。
有没有一种不使用 Spacer() 的方法来实现这一点。
就像在 React Native 中,我们用 justifyContent 和 alignItems 来水平和垂直对齐子元素一样。
更新:
对于 Text 或任何视图来说,相同的问题也存在。
例如,此代码将两个文本放置在视图的中心。 VStack(alignment: .leading, spacing: 0) {
Text("line 1")
Text("line 2")
}
VStack 中的参数alignment是用于水平对齐的。
现在要使这些文本顶部对齐,我能想到的唯一方法是通过这样引入 Spacer()
:
struct MyCustomView:View {
var body: some View {
VStack(alignment: .leading, spacing: 0) {
Text("line 1")
Text("line 2")
Spacer()
}
}
这只是暂时解决了问题:
但是在复杂的视图中,这个间隔会导致问题。比如说另一个开发者想要在我的视图下方添加自定义视图(本例中的第3行),那么这个间隔将在两个视图之间创建额外的空间。
VStack {
MyCustomView()
Text("line 3")
}
我的孩子在 VStack 中查看(和随后的查看),有没有更好的方法使其保持与顶部对齐,而不需要使用 spacer?