75142913在线留言
SwiftU利用TabView实现垂直滚动视图_IOS开发_网络人

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

Kwok 发表于:2021-10-25 12:25:45 点击:1 评论: 0

通常情况下我们都使用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后,现在高度是宽度,现在宽度是视图大小时的高度。

除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/170.html
标签:TabView垂直视图Kwok最后编辑于:2021-10-25 12:25:49
0
感谢打赏!

《SwiftU利用TabView实现垂直滚动视图》的网友评论(0)

本站推荐阅读

热门点击文章