如何在 SwiftUI 中实现 PageView

迅捷3

iOS 15引入了一个新的TabViewStyle:CarouselTabViewStyle(watchOS only).

此外，我们现在可以更轻松地设置样式:

.tabViewStyle(.page)

迅捷2

在迅捷2/iOS 14中，现在有了一个UIPageViewController的本地类似功能.

要创建分页视图，请将.tabViewStyle修改器添加到TabView并传递PageTabViewStyle.

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            TabView {
                FirstView()
                SecondView()
                ThirdView()
            }
            .tabViewStyle(PageTabViewStyle())
        }
    }
}

您还可以控制分页点的显示方式:

// hide paging dots
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

你可以在这个链接中找到更详细的解释:

• How to create scrolling pages of content using tabViewStyle()

垂直变异

TabView {
    Group {
        FirstView()
        SecondView()
        ThirdView()
    }
    .rotationEffect(Angle(degrees: -90))
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
.rotationEffect(Angle(degrees: 90))

自定义组件

如果你厌倦了每次都通过tabViewStyle分，你可以创建自己的PageView分:

Note:在iOS 14.0中，TabView Select 的工作方式不同，这就是为什么我使用了两个Binding属性:selectionInternal和selectionExternal.从iOS 14.3开始，它似乎只支持一个Binding.但是，您仍然可以从修订历史中访问原始代码.

struct PageView<SelectionValue, Content>: View where SelectionValue: Hashable, Content: View {
    @Binding private var selection: SelectionValue
    private let indexDisplayMode: PageTabViewStyle.IndexDisplayMode
    private let indexBackgroundDisplayMode: PageIndexViewStyle.BackgroundDisplayMode
    private let content: () -> Content

    init(
        selection: Binding<SelectionValue>,
        indexDisplayMode: PageTabViewStyle.IndexDisplayMode = .automatic,
        indexBackgroundDisplayMode: PageIndexViewStyle.BackgroundDisplayMode = .automatic,
        @ViewBuilder content: @escaping () -> Content
    ) {
        self._selection = selection
        self.indexDisplayMode = indexDisplayMode
        self.indexBackgroundDisplayMode = indexBackgroundDisplayMode
        self.content = content
    }

    var body: some View {
        TabView(selection: $selection) {
            content()
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: indexDisplayMode))
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: indexBackgroundDisplayMode))
    }
}

extension PageView where SelectionValue == Int {
    init(
        indexDisplayMode: PageTabViewStyle.IndexDisplayMode = .automatic,
        indexBackgroundDisplayMode: PageIndexViewStyle.BackgroundDisplayMode = .automatic,
        @ViewBuilder content: @escaping () -> Content
    ) {
        self._selection = .constant(0)
        self.indexDisplayMode = indexDisplayMode
        self.indexBackgroundDisplayMode = indexBackgroundDisplayMode
        self.content = content
    }
}

现在您有了默认值PageView:

PageView {
    FirstView()
    SecondView()
    ThirdView()
}

可以定制:

PageView(indexDisplayMode: .always, indexBackgroundDisplayMode: .always) { ... }

或配备selection:

struct ContentView: View {
    @State var selection = 1

    var body: some View {
        VStack {
            Text("Selection: \(selection)")
            PageView(selection: $selection, indexBackgroundDisplayMode: .always) {
                ForEach(0 ..< 3, id: \.self) {
                    Text("Page \($0)")
                        .tag($0)
                }
            }
        }
    }
}