使ScrollView内容在SwiftUI中填充其父级

Question

我很想建立一个滚动屏幕，所以我想嵌入它ScrollView。但是我无法实现它，视图只是缩小到其压缩大小。假设我希望ScrollView垂直滚动，所以我希望内容与scrollView的宽度匹配。所以我使用这样的预览：

struct ScrollSubview_Previews : PreviewProvider {
    static var previews: some View {
        func textfield() -> some View {
            TextField(.constant("Text")).background(Color.red)
        }

        return Group {
            textfield()
            ScrollView {
                textfield()
            }
        }
    }
}

但是结果如下：

Answer 1

一种简单的方法，使用frame(maxWidth: .infinity)

    ScrollView(.vertical) {
        VStack {
           ForEach(0..<100) {
              Text("Item \($0)")
          }
       }
       .frame(maxWidth: .infinity)
   }

Answer 2

这是一个技巧：引入一个HStack只有一个Spacer：

return Group {
        HStack {
            Spacer()
        }
        textfield()
        ScrollView {
            textfield()
        }
    }

Answer 3

这是 beta 2 中也存在的已知问题 - 请在此处查看 Apple 的 Xcode 11 发行说明？ https://developer.apple.com/documentation/xcode_release_notes/xcode_11_beta_2_release_notes。

Apple 自己提到的解决方法是为 ScrollView 内部元素设置固定框架。在这种情况下，我建议使用 GeometryReader 来固定屏幕宽度，高度会自动适应内容。

例如，如果您需要使 ScrollView 的内容适合屏幕宽度，您可以这样做：

return GeometryReader { geometry in
     Group {
         self.textfield()
         ScrollView {
             self.textfield()
                 .frame(width: geometry.size.width)
         }
     }
 }

Answer 4

实际上，您不再需要几何读取器。ScrollView已在XCode beta 3中进行了重构，现在您可以声明您拥有一个.horizo​​ntal ScrollView或一个.vertical。这使ScrollView像任何普通的View协议一样表现出应有的表现。

例如：

ScrollView(.horizontal, showsIndicators: false) {
    HStack {
        ForEach((1...10).reversed()) {
            AnyViewYouWant(number: $0)
        }
    }
}

这将导致其父视图的宽度水平滚动的视图。高度将由ScrollView的子视图高度定义。

Answer 5

滚动视图内容将扩展到可用大小。

GeometryReader { geo in
            ScrollView(.vertical) {
                YourView().frame(
                    minWidth: geo.size.width,
                    minHeight: geo.size.height
                )
            }
        }