如何解决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 !!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。