ScrollView 不使用 Geometry Reader 作为子级滚动

Posted 2023-02-24

【中文标题】ScrollView 不使用 Geometry Reader 作为子级滚动

【英文标题】：ScrollView Doesn't Scroll with Geometry Reader as Child

【发布时间】：2020-08-27 04:39:16

【问题描述】：

一些上下文：我目前正在尝试创建一个视图，其中包含嵌入在 ScrollView 中的用户可编辑 TextField()。我想让它在用户单击它键入时屏幕自动滚动到 TextField 的位置（不会被键盘阻止）。我想出了如何通过使用 NavigationCenter 并在打开键盘时实现伪代码 view.offset(y:keyboardHeight) 来实现这一点。

我遇到的问题是，有时，当用户向下滚动并且 TextField 在屏幕上处于高位时，有时偏移会导致视图过度补偿并且 TextField 在屏幕上方的区域中移位。因此，您必须再次滚动才能看到 TextField。

我的解决方案： 使用 2 个几何阅读器来确定用户向下滚动屏幕的距离并相应地调整文本字段的偏移量（当键盘打开时）。为此，我有一个更复杂的以下代码版本。

struct OverallView: View 

    var body: some View 
    
        GeometryReader  outer in
    
            ScrollView (.vertical, showIndicators: false) 
    
               GeometryReader  inner in
    
                  VStack 
                      Text("This is filler text").padding(.vertical, 100)
                      Text("This is filler text").padding(.vertical, 100)
                      Text("This is filler text").padding(.vertical, 100)
                      Text("This is filler text").padding(.vertical, 100)
                      Text("This is filler text").padding(.vertical, 100)
                  
               
            
        
    

问题：理想情况下，我将能够获得内部和外部 GeometryProxies 的 minY 并减去它们以查看用户滚动了多远。问题是当我运行这段代码时，内部的 GeometryReader（出于我不知道的原因）不再允许我滚动。我意识到这是因为 GeometryReader 的高度设置为屏幕的高度，所以当我将其高度设置为 9000 之类的东西时，我可以再次滚动。我尝试将内部几何读取器的高度设置为外部几何读取器的高度，但这不起作用。我还尝试了各种其他解决方案，包括切换哪些视图是父母/孩子——这以及我的其他解决方案也不起作用。

所以，我想知道是否有人知道为什么这个 GeometryReader 不允许我滚动以及如何修复它。或者，如果有人有更好的方法来解决我不涉及此方法的整体问题，我将不胜感激。

非常感谢您的帮助！

【参考方案1】：

GeometryReader 不是一个普通的孩子，你不能在未知大小的区域（即 ScrollView）中使用它，因为当父子期望彼此的大小时，你会遇到鸡蛋问题。

改为在内容背景上使用内部几何阅读器，因此内容已定义大小，您可以读取其在其他（全局）坐标系中的位置，例如

ScrollView (.vertical, showIndicators: false) 
  VStack 
      Text("This is filler text").padding(.vertical, 100)
      Text("This is filler text").padding(.vertical, 100)
      Text("This is filler text").padding(.vertical, 100)
      Text("This is filler text").padding(.vertical, 100)
      Text("This is filler text").padding(.vertical, 100)
  .background(
     GeometryReader  inner in
          // use proxy here
     )

【讨论】：

非常感谢！这正是我需要的解决方案。