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, 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以转到导航堆栈中的下一个视图。

将其剪裁

 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 !!

ScrollView（.vertical，showsIndicators:false）{
ZStack（对齐：。顶部）{
GeometryReader{insideProxy in
颜色。清晰
//获得偏移量
}//内部的GeometryReader
VStack（对齐：。前导，间距：10）{
HStack（对齐：。中心，间距：5）{
文本（“A”）.font（.tableData）.frame（宽度：75，高度：50，对齐方式：。中心）
}
HStack（对齐：。中心，间距：5）{
文本（“B”）.font（.tableData）.frame（宽度：75，高度：50，对齐方式：。中心）
}
HStack（对齐：。中心，间距：5）{
文本（“C”）.font（.tableData）.frame（宽度：75，高度：50，对齐方式：。中心）
}
HStack（对齐：。中心，间距：5）{
文本（“D”）.font（.tableData）.frame（宽度：75，高度：50，对齐方式：。中心）
}
}//VStack
}//ZStack
}//滚动视图
.clipped（）//OMG。。。但愿我能在24小时前发布这个问题。。。浪费了这么多时间。谢谢，@Asperi！您的解决方案@Asperi修复了问题中的主要问题，但在添加
.clipped（）
后，我注意到scrollview不会显示字母“D”。到达底部后，scrollview将稍微向上反弹并隐藏“D”。我怎样才能使滚动视图到达底部？非常奇怪。。。我刚刚更新到Xcode版本12.0（12A7209），看起来原始代码运行良好，无需使用.clipped（），所有选项都正确显示。只是为将来遇到这个问题的人分享。