Question

我正在尝试在SwiftUI的VStack内的ScrollView中集中一堆视图。为简化起见，我只是试图使其与单个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)
    }
}

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

Answer 2

这似乎是Xcode 11.0 beta版中的错误，ScrollView内容无法填充滚动视图。如果将ScrollView替换为List，它将按预期工作。但是，如果必须使用滚动视图，则一种解决方法是修复滚动视图的内容 width 。

因此您的代码将如下所示：

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)

结果：

Answer 3

您应该使用修饰符frame并设置其maxWidth: .infinity。因此它告诉其父对象：“越宽越好”：）

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

无论父级是什么，它都有效。滚动视图或其中设置的任何视图。

保罗在向我们所有人澄清这一点方面做得很出色：

https://www.hackingwithswift.com/quick-start/swiftui/how-to-give-a-view-a-custom-frame

与Xcode 12.1兼容的答案（12A7403）我希望这可以帮助? dsa

SwiftUI：ScrollView中的中心内容

3 个答案: