SwiftUI：在 ScrollView 中居中内容

Question

我试图将一堆视图集中在 SwiftUI中的VStackaScrollView中。为了简化事情，我只是想让它在一个Text视图中工作。到目前为止，这是我想出的：

var body: some View {
  ScrollView(alwaysBounceVertical: true){
    HStack(alignment: .center) {
      Spacer()
      Text("This Is a Test")
      Spacer()
    } //HStack
    .background(Color.green)
  } //ScrollView
  .background(Color.gray)
}

这导致：

我希望文本像这样位于中间：

所以HStack应该是全宽的，并且Text应该在其中居中。看起来这应该很容易，但我不明白我做错了什么。:)

Answer 1

使用 GeometryReader，您可以获得有关包含视图大小的信息，并使用它来调整视图的大小。

    var body: some View {
        GeometryReader { geometry in                <--- Added
            ScrollView(alwaysBounceVertical: true){
                HStack(alignment: .center) {
                    Spacer()
                    Text("This Is a Test")
                    Spacer()
                } //HStack
                .frame(width: geometry.size.width)  <--- Added
                .background(Color.green)
            } //ScrollView
        .background(Color.gray)
    }
}

编辑：在进一步研究之后，问题的一部分似乎是您使用的是 ScrollView。如果删除该父级，HStack 中的间隔器将自动导致拉伸以填充视图。我猜自动拉伸不会发生在 ScrollViews 中，因为它可以有多大，它会拉伸多少？（因为 ScrollView 可以向任何方向滚动）

Answer 2

这似乎是 Xcode 11.0 beta 中的一个错误，ScrollView内容不会填充滚动视图。如果你用 a 替换它，ScrollView它将List按预期工作。但如果您必须使用滚动视图，一种解决方法是修复滚动视图的内容宽度。

所以你的代码看起来像这样：

ScrollView(alwaysBounceVertical: true) {
  HStack(alignment: .center) {
    Spacer()
    Text("This Is a Test")
    Spacer()
  } // HStack
  .frame(width: UIScreen.main.bounds.width) // set a fixed width
  .background(Color.green)
} // ScrollView
.background(Color.gray)

结果：