跳转至
Structure

PageTabViewStyle

A TabViewStyle that implements a paged scrolling TabView.

Declaration

struct PageTabViewStyle : TabViewStyle

Overview

Use this style with the tabViewStyle(_:) view modifier to change the style of a TabView to look like swipable pages:

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Bananas 🍌🍌")
            Text("Apples 🍏🍏")
            Text("Peaches 🍑🍑")
        }
        .foregroundColor(Color.white)
        .background(Color.yellow)
        .tabViewStyle(PageTabViewStyle())
    }
}
A gif displaying a tabview with three text items, "Bananas 🍌🍌", "Apples 🍏🍏", and "Peaches 🍑🍑", and a yellow background; the gif displays the page tab view style by flipping through each of the three tabs, as reflected by the page indicator dots at the bottom of the frame.

You can also use PageTabViewStyle's initializer init(indexDisplayMode:) to specify whether or not you want the page dots at the bottom to show up:

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Bananas 🍌🍌")
            Text("Apples 🍏🍏")
            Text("Peaches 🍑🍑")
        }
        .foregroundColor(Color.white)
        .background(Color.yellow)
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    }
}

Availability

iOS 14.0+

tvOS 14.0+

watchOS 7.0+

Topics


Structure

IndexDisplayMode A style for displaying the page index view.


Initializer

init(indexDisplayMode:) Creates a new PageTabViewStyle with an index display mode