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

问题描述

我无法将ScrollView的内容包含在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,alignment: .center)
                             }
                             HStack(alignment: .center,spacing: 5){
                                 Text("B").font(.tableData).frame(width: 75,spacing: 5){
                                 Text("C").font(.tableData).frame(width: 75,spacing: 5){
                                 Text("D").font(.tableData).frame(width: 75,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进入导航堆栈中的下一个视图。

解决方法

将其剪裁

 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,spacing: 5){
                 Text("C").font(.tableData).frame(width: 75,spacing: 5){
                 Text("D").font(.tableData).frame(width: 75,alignment: .center)
             }
         } // VStack
     } // ZStack
 } // Scrollview
 .clipped()           // << here !!