SwiftUI：在 ScrollView 中居中内容

Posted 2023-02-24

【中文标题】SwiftUI：在 ScrollView 中居中内容

【英文标题】：SwiftUI: Center Content in ScrollView

【发布时间】：2019-06-15 00:48:27

【问题描述】：

我试图在 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 应该在其中居中。看起来这应该很容易，但我不明白我做错了什么。 :)

【问题讨论】：

我正在使用 Xcode beta 5，您的代码对我来说运行良好。您使用的是哪个 Xcode？因为在 beta 5 中，ScrollView 没有 alwaysBounceVertical 修饰符。

【参考方案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 可以向任何方向滚动）

【讨论】：

这听起来是一个很好的解释。但是是否不可能限制滚动视图的一个滚动方向来解决此类问题？ ?

【参考方案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)

结果：

【讨论】：

请使用GeometryReader 而不是UIScreen 边界

@MatteoPacini 为什么会这样？是不是因为旋转设备就不行了？

此解决方案有效，但现在我只是在设置.frame 和使用GeometryReady 之间进行辩论。谢谢！

【参考方案3】：

您应该使用修饰符frame 并设置它的maxWidth: .infinity。 所以它告诉它的父母：“越宽越好”:)

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

不管它的父级如何，这都有效。 Scrollview 或它所设置的任何 View。

Paul 在这里向我们所有人阐明了这一点，做得很好：

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

答案与 Xcode 12.1 (12A7403) 兼容 我希望这会有所帮助? dsa

【讨论】：

ScrollView 没有带有 alwaysBounceVertical 的构造方法。

@ErkamKUCET 已修复