我的目标是有一个垂直分页的 tabview,里面有一个 scrollview。完成滚动视图后立即滚动传递给另一个选项卡,如果滚动视图的内容的高度低于屏幕,滚动将直接传递到下一个选项卡。
var body: some View {
GeometryReader { proxy in
TabView {
ForEach(colors, id: \.self) { color in
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .bottom, spacing: 20) {
ForEach(0..<15) { i in
//GeometryReader { block in
VStack(alignment: .leading) {
Text("Block test test test test test test \(i)")
}
.rotationEffect(.degrees(-90))
.frame(width: 70, height: proxy.size.width, alignment: .leading)
.background(Color.green)
.id(i)
//}
//.offset(y: proxy.size.width / 2)
}
}
.frame(height: proxy.size.height)
.background(Color.blue)
}
.frame(width: proxy.size.height, height: proxy.size.width)
.background(Color.pink)
}
.frame(width: proxy.size.width,height: proxy.size.height)
}
.frame( width: proxy.size.height, height: proxy.size.width)
.rotationEffect(.degrees(90), anchor: .topLeading)
.offset(x: proxy.size.width)
.tabViewStyle(
PageTabViewStyle(indexDisplayMode: .never)
)
}
}
这些是我遵循的步骤:
结果是准确的,内容的滚动在 scroll 和 tab 之间连续顺利通过,但唯一的问题是我无法控制 scrollview 内的 Vstacks 的尺寸,因此我不能有不同高度的 Vstacks在基于内容。 我试图为 VStacks 添加一个 GeometryReader { 块,但除了没有给我 VStacks 的正确测量之外,它完全破坏了布局。
能够正确获取每个 Vstack 的维度的最佳方法是什么,或者获得所描述结果的最佳方法是什么?