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

【问题标题】：How to align items to top inside VStack in SwiftUI?如何在 SwiftUI 中将项目与 VStack 内的顶部对齐？
【发布时间】：2024-01-21 03:52:01
【问题描述】：

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

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

更新：

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

 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 中保持与顶部对齐而无需分隔符？

【问题讨论】：

VStack 紧贴内容，所以我不认为这是对齐问题，至少在提供的代码中。您能否提供更多代码上下文并显示屏幕截图？如果您提供最少的可重现示例，我会更好。
上面的代码很好..顶部没有空格。 VStack 包裹在哪里？
@Asperi 更新了我的问题，请检查一下

标签： ios swiftui

【解决方案1】：

您可以尝试使用.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)
}

该解决方案不需要垫片

【讨论】：

他们想要将子视图居中对齐。
@mahan Line1 和 line2 应该居中吗？但还是在右上角？
@davidev 谢谢，这里的对齐参数是'Alignment'类型（而不是VStack中的HorizontalAlignment），它接受水平和垂直对齐的值，例如。 .top、.center、.topLeading 等

【解决方案2】：

SwiftUI 视图很便宜。将另一个 VStack() 与 Spacer() 一起使用。

    VStack {
        VStack(alignment: .center, spacing: 0) {
          Text("line 1")
          Text("line 2")
          // Add your Views here
        }
        Spacer()
    }

【讨论】：

【解决方案3】：

这也有效。

 VStack {

          Text("line 1")
          Text("line 2")

    }.frame(maxWidth: .infinity, // Full Screen Width
            maxHeight: .infinity, // Full Screen Height
            alignment: .topLeading) // Align To top

【讨论】：