SwiftU利用TabView实现垂直滚动视图

通常情况下我们都使用TabView制作水平滚动的视图，但我们可以利用 .rotationEffect(.degrees(-90)) 旋转-90度效果实现垂直滚动。

struct ContentView: View {
    let colors: [Color] = [.red, .green, .blue, .gray]
    var body: some View {
        GeometryReader { proxy in
            TabView {
                ForEach(colors, id: ＼.self) { color in
                    color // 这里可以是图片或者其它视图，目前使用的颜色占位
                }
                .rotationEffect(.degrees(-90)) // -90度旋转内容
                .frame(width: proxy.size.width,height: proxy.size.height)
            }
            .frame(
                width: proxy.size.height, // 高与宽 调换
                height: proxy.size.width //宽与高 调换
            )
            .rotationEffect(.degrees(90), anchor: .topLeading) // 旋转整个TabView
            .offset(x: proxy.size.width) // 偏移回到屏幕边界
            .tabViewStyle(
                PageTabViewStyle(indexDisplayMode: .never)//不显示切换项
            )
        }
    }
}

逆时针旋转TabView的内容，使其垂直滚动。然后顺时针旋转实际的TabView本身，并使用锚点顶部引引和偏移将其放回屏幕范围内。 旋转TabView后，现在高度是宽度，现在宽度是视图大小时的高度。

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/170