SwiftUI中的VStack底部对齐

Question

当前正在构建聊天应用程序，我需要新消息显示在屏幕底部。我还需要使消息与底部对齐。但是，默认情况下，在ScrollView中使用VStack具有顶部对齐功能。

！

    ScrollView {
        VStack(alignment: .leading, spacing: 16) {
            Spacer()
            .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, maxHeight: .infinity, alignment: Alignment.topLeading)
            ForEach(notList, id: \.self) { not in
                NotRow(not: not)

            }

        }
        .padding()
        .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, alignment: Alignment.topLeading)

    }

该如何解决？

Answer 1

我认为您在VStack中缺少maxHeight

VStack(alignment: .leading) {
  Spacer().frame(maxWidth: .infinity)
  // content here
}
.frame(maxHeight: .infinity) // <- this

Answer 2

如果删除Spacer()并将其放在ForEach的大括号后面，它将对其进行修复。更新后的代码如下所示：

ScrollView {
        VStack(alignment: .leading, spacing: 16) {
            .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, maxHeight: .infinity, alignment: Alignment.topLeading)
            ForEach(notList, id: \.self) { not in
                NotRow(not: not)

            }
            Spacer()
        }
        .padding()
        .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, alignment: Alignment.topLeading)

    }

Answer 3

ScrollView 不会向其子项（在本例中为 VStack）建议与建议的高度相同。它只是要求最小的尺寸。解决方案是让它的直接子级响应建议给ScrollView本身的最小高度。我们可以通过通过 GeometryReader 读取建议的高度并将其设置为孩子的最小高度来实现这一点。

GeometryReader { reader in
    ScrollView {
        VStack {
            /// Spacer() or Color.red will now behave as expected
        }
        .frame(minHeight: reader.size.height)
    }
}

Answer 4

尝试将所有Alignment.topLeading更改为Alignment.bottomLeading

Answer 5

回答这个问题有点晚了，但可能会对其他人有所帮助。您可以使用旧的双重旋转技巧来获得所需的结果。其他解决方案不起作用，因为滚动视图内部的最大大小是不确定的，因为它取决于其子视图来计算自己的内容大小。

ScrollView {
  VStack(alignment: .leading, spacing: 16) {
      Spacer()
      .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, maxHeight: .infinity, alignment: Alignment.topLeading)
      ForEach(notList, id: \.self) { not in
          NotRow(not: not)
      }

  }
  .padding()
  .rotationEffect(Angle(degrees: 180))
}
.rotationEffect(Angle(degrees: 180))