Press "Enter" to skip to content

【SwiftUI】横にスワイプしてページを切り替える

TabView の tabViewStyle に PageTabViewStyle を指定すると、左右のスワイプでページを切り替えられるようになります。

以下は全5ページ中、初期表示を2ページ目にセットした例です。

struct RootView: View {
    @State var disappearNum: Int = 0
    @State var selection: Int = 2

    var body: some View {
        TabView(selection: $selection) {
            ForEach(1..<6, id: \.self) {i in
                PageView(num: i, disappearNum: $disappearNum).tag(i)
            }
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
        .onChange(of: selection) { _ in
            print("\(selection)ページ目に移行している途中です")
        }
        .onChange(of: disappearNum) { _ in
            print("\(selection)ページ目です")
        }
    }
}

struct PageView: View {
    let num: Int
    @Binding var disappearNum: Int
    
    var body: some View {
        Text("\(num) ページ目")
            .onDisappear {
                disappearNum = num
            }
    }
}

ぺージが切り替わったことを検知するためにonChange を利用しています。selection はスワイプの途中で呼ばれ、disappearNum はスワイプが完全に終わったタイミングで呼び出されます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です