如何在SwiftUI中将项目与VStack内部的顶部对齐?

我刚开始使用 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 接受 param alignment,但它是水平对齐的。我需要的是图像应该粘在其超级视图的顶部。有没有办法在不使用 Spacer() 的情况下做到这一点。

就像在 react-native 中,我们曾经有 justifyContent 和 alignItems 用于子项的水平和垂直对齐。

更新:

文本或任何视图也存在同样的问题。例如此代码将两个文本放在视图的中心

 VStack(alignment: .leading, spacing: 0) {
        Text("line 1")
        Text("line 2")
 }

VStack 中的参数对齐用于水平对齐。

现在要将这些文本对齐到顶部,我能想到的唯一方法是这样引入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 内的子视图(和后续视图)在没有间隔的情况下保持与顶部对齐?

回答

您可以尝试使用.frame()修饰符VStack()在它的超级视图中制作全尺寸。在框架中,您可以对齐您的内容topLeading

var body: some View {
    VStack(alignment: .leading, spacing: 0) {
        Text("line 1")
        Text("line 2")
    }
    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .topLeading)
    .border(Color.red)
}

该解决方案不需要垫片


以上是如何在SwiftUI中将项目与VStack内部的顶部对齐?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>