如何在SwiftUI中将项目对齐到VStack中的顶部？

Question

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对齐，但它是水平对齐。我需要的是，图像应该坚持到它的超级视图的顶部。有没有一种方法可以做到这一点，而不使用Spacer（）。

像在react-native中一样，我们曾经有justifyContent和alignItems用于儿童的水平和垂直对齐。

更新：

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

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中保持与顶部对齐而不使用间隔？

Answer 1

您可以尝试使用.frame()修饰符使vstack()在它的超级视图中具有完整的大小。在框架中，您可以对齐内容topleding

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

该解决方案不需要间隔物