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

Question

我刚开始学习 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？

- Romit Kumar

---

VStack紧贴内容，因此我认为这不是对齐问题，至少在提供的代码中不是。你能否提供更多的代码上下文并展示截图？如果您提供最小可重现示例将会更好。 - Asperi

以上代码没问题...顶部没有空格。VStack 包裹在哪里？ - davidev

@Asperi 我更新了我的问题，请你检查一下。 - Romit Kumar

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

那个解决方案不需要间隔器

- davidev

---

他们想要将子视图居中对齐。 - mahan

@mahan 第一行和第二行应该居中吗？但是仍然在右上角？ - davidev

@davidev 谢谢，这里的对齐参数是类型为 'Alignment' 的（而不是 VStack 中的 HorizontalAlignment），它接受水平和垂直对齐的值，例如 .top、.center、.topLeading 等。 - Romit Kumar

Answer 2

这也可以。

 VStack {

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

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

- M Afham

---

这对我来说效果最好。 - Romin

Answer 3

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

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

- mahan

---

对我不起作用。 - meaning-matters

Answer 4

        VStack(spacing: 30) {
        
        Text("Default Alignment in Vstack is Center")
        
        VStack(alignment: .trailing, spacing: 20) {
            Text(".trailing")
                .font(.title)
            Image(systemName: "rectangle.trailinghalf.inset.filled.arrow.trailing")
                .font(.title)
            
            Text("Alignment set by .trailing")
            
        }.padding()
            .background(RoundedRectangle(cornerRadius: 10).foregroundColor(.yellow))
        
        VStack(alignment: .leading, spacing: 20) {
            Text(".leading")
                .font(.title)
            
            Image(systemName: "rectangle.leadinghalf.inset.filled.arrow.leading")
                .font(.title)
            
            Text("Alignment set by .leading")
            
        }.padding()
            .background(RoundedRectangle(cornerRadius: 10).foregroundColor(.yellow))
        
    }

- Arjun Patel