SwiftUI Scrollview 内容在可滚动区域之外答案

【问题标题】：SwiftUI Scrollview contents are outside scrollable areaSwiftUI Scrollview 内容在可滚动区域之外
【发布时间】：2021-01-04 16:27:51
【问题描述】：

我无法将 ScrollView 的内容保存在滚动视图中：

最初，我想在 ScrollView 中显示字母 A 和 B，并让用户滚动查看其他字母。但是，即使我将父 VStack 限制为高度为 120 的框架，您也可以看到 ScrollView 之外的字母 C（如蓝色背景所示）。代码如下：

var body: some View {            
    VStack(alignment: .leading, spacing: 0) {
         HStack(alignment: .center , spacing: 5) {
             Text("Letter").font(.tableHeader).frame(width: 75, height: 30, alignment: .center)
         } // HStack
         .frame(width: 195, height: 50, alignment: .center)
         .background(Color.green)

         VStack(alignment: .leading, spacing: 0) {
             GeometryReader { outsideProxy in
                 ScrollView (.vertical, showsIndicators: false) {
                     ZStack(alignment: .top) {           
                         GeometryReader { insideProxy in
                             Color.clear
                             // get offset
                         } // GeometryReader inside
                         VStack(alignment: .leading, spacing: 10) {
                             HStack(alignment: .center, spacing: 5){
                                 Text("A").font(.tableData).frame(width: 75, height: 50, alignment: .center)
                             }
                             HStack(alignment: .center, spacing: 5){
                                 Text("B").font(.tableData).frame(width: 75, height: 50, alignment: .center)
                             }
                             HStack(alignment: .center, spacing: 5){
                                 Text("C").font(.tableData).frame(width: 75, height: 50, alignment: .center)
                             }
                             HStack(alignment: .center, spacing: 5){
                                 Text("D").font(.tableData).frame(width: 75, height: 50, alignment: .center)
                             }
                         } // VStack
                     } // ZStack
                 } // Scrollview
             } // GeometryReader outside
             .background(Color.blue)
         } // VStack
         .frame(width: 195, height: 120, alignment: .leading)
     } // VStack
 }

完整的代码需要使用 GeometryReader（因此需要使用 ZStack），这就是我将这些项目留在上面示例中的原因。

解决此问题的最佳方法是什么？对上述布局编码的任何改进持开放态度。请记住，最终，我希望用户能够单击 A、B、C 或 D 以转到导航堆栈中的下一个视图。

【问题讨论】：

标签： view swiftui scrollview frame

【解决方案1】：

剪裁

 ScrollView (.vertical, showsIndicators: false) {
     ZStack(alignment: .top) {           
         GeometryReader { insideProxy in
             Color.clear
             // get offset
         } // GeometryReader inside
         VStack(alignment: .leading, spacing: 10) {
             HStack(alignment: .center, spacing: 5){
                 Text("A").font(.tableData).frame(width: 75, height: 50, alignment: .center)
             }
             HStack(alignment: .center, spacing: 5){
                 Text("B").font(.tableData).frame(width: 75, height: 50, alignment: .center)
             }
             HStack(alignment: .center, spacing: 5){
                 Text("C").font(.tableData).frame(width: 75, height: 50, alignment: .center)
             }
             HStack(alignment: .center, spacing: 5){
                 Text("D").font(.tableData).frame(width: 75, height: 50, alignment: .center)
             }
         } // VStack
     } // ZStack
 } // Scrollview
 .clipped()           // << here !!

【讨论】：

天啊...希望我在 24 小时前发布这个问题...浪费了这么多时间。谢谢，@Asperi！
您的解决方案@Asperi 解决了问题中的主要问题，但在添加.clipped() 后，我注意到滚动视图不会显示字母“D”。到达底部后，scrollview 会稍微弹起并隐藏“D”。如何让滚动视图到达底部？
非常奇怪...我刚刚更新到 Xcode 版本 12.0 (12A7209)，看起来原始代码工作正常，无需使用 .clipped() 并且所有选项都正确显示。只是分享给以后遇到这个问题的人。