Swiftui垂直分页tabview,里面有scrollview

问题描述 投票:0回答:0

我的目标是有一个垂直分页的 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)
        )
    }
}

这些是我遵循的步骤:

  1. 创建了一个内部带有水平滚动条的 tabview
  2. 将 tabview 旋转 90°
  3. 将滚动视图内的 Vstacks 旋转 -90°

结果是准确的,内容的滚动在 scroll 和 tab 之间连续顺利通过,但唯一的问题是我无法控制 scrollview 内的 Vstacks 的尺寸,因此我不能有不同高度的 Vstacks在基于内容。 我试图为 VStacks 添加一个 GeometryReader { 块,但除了没有给我 VStacks 的正确测量之外,它完全破坏了布局。

能够正确获取每个 Vstack 的维度的最佳方法是什么,或者获得所描述结果的最佳方法是什么?

swiftui scrollview swiftui-tabview
© www.soinside.com 2019 - 2024. All rights reserved.