fermoya / SwiftUIPager

Native Pager in SwiftUI
MIT License
1.31k stars 172 forks source link

Multiple Page nesting causes sliding bug #326

Open ETmanwenhan opened 1 year ago

ETmanwenhan commented 1 year ago

Describe the bug When two secondary pages turn pages, when switching subpages in the second Page, and then click the subpage of a Page, the first Page is stuck.

To Reproduce

//
//  PageHomeView.swift
//  Demo-SwiftUI
//
//  Created by Steven on 15/9/2023.
//

import SwiftUI
import SwiftUIPager
import AxisSegmentedView

/// 菜单
fileprivate struct Menus {
    static let Charm: String = "Charm"
    static let Rich: String = "Rich"
}

struct PageHomeView: View {

    // Page
    @StateObject private var page: Page = .first()

    /// 偏移量
    @State private var pageOffset: Double = 0

    /// 选中下标
    @State var selectIndex: Int = 0

    /// 菜单分类
    @State var menu: [String] = [Menus.Charm, Menus.Rich]

    /// 环境值
    @Environment(\.presentationMode) var presentation

    var body: some View {
        // 垂直布局
        VStack {
            Spacer()
                .frame(height: 44)

            HStack {
                // 间隔
                Spacer()
                    .frame(width: 16)

                // 返回
                Image("zy_nav_back_white")
                    .frame(width: 30, height: 30)
                    .onTapGesture {
                        self.presentation.wrappedValue.dismiss()
                    }

                // 间隔
                Spacer()
                    .frame(width: 10)

                // 分段控制器
                AxisSegmentedView(selection: $selectIndex, constant: .init()) {
                    ForEach(0..<menu.count) { (i) in
                        Text(menu[i])
                            .foregroundColor(Color.black)
                            .font(Font.system(size: 18))
                            .itemTag(i) {
                                Text(menu[i])
                                    .foregroundColor(Color.white)
                                    .font(Font.system(size: 22))
                            }
                    }
                } style: {
                    ASBasicStyle()
                } onTapReceive: { selectionTap in
                    withAnimation {
                        self.page.update(.new(index: selectionTap))
                    }
                }
                .frame(width: 260, height: 50)

                Spacer()
            }

            // Page页面
            Pager(page: self.page,
                  data: self.menu,
                  id: \.self) { page in
                    // 子页面
                    switch page {
                    case Menus.Charm:
                        MainListView()
                    default:
                        MainListView()
                    }
                }
                  .swipeInteractionArea(.page)
                  .onPageChanged { (index) in
                      selectIndex = index
                  }
                  .background(Color.clear)
        }
    }
}

MainListView.swift

//
//  MainListView.swift
//  Demo-SwiftUI
//
//  Created by Steven on 15/9/2023.
//

import SwiftUI
import SwiftUIPager
import AxisSegmentedView

/// 菜单
fileprivate struct Menus {
    static let List1: String = "List1"
    static let List2: String = "List2"
}

struct MainListView: View {

    // Page
    @StateObject private var page: Page = .first()

    /// 偏移量
    @State private var pageOffset: Double = 0

    /// 选中下标
    @State var selectIndex: Int = 0

    /// 菜单分类
    var menu: [String] = [Menus.List1, Menus.List2]

    /// 环境值
    @Environment(\.presentationMode) var presentation

    var body: some View {
        // 垂直布局
        VStack {
            Spacer()
                .frame(height: 44)

            HStack {

                // 间隔
                Spacer()
                    .frame(width: 10)

                // 分段控制器
                AxisSegmentedView(selection: $selectIndex, constant: .init()) {
                    ForEach(0..<menu.count) { (i) in
                        Text(menu[i])
                            .foregroundColor(Color.black)
                            .font(Font.system(size: 18))
                            .itemTag(i) {
                                Text(menu[i])
                                    .foregroundColor(Color.white)
                                    .font(Font.system(size: 22))
                            }
                    }
                } style: {
                    ASBasicStyle()
                } onTapReceive: { selectionTap in
                    withAnimation {
                        self.page.update(.new(index: selectionTap))
                    }
                }
                .frame(width: 260, height: 50)

                Spacer()
            }

            // Page页面
            Pager(page: self.page,
                  data: self.menu,
                  id: \.self) { page in
                    // 子页面
                    switch page {
                    case Menus.List1:
                        SimpleListView()
                    default:
                        SimpleListView()
                    }
                }
                  .swipeInteractionArea(.page)
                  .onPageChanged { (index) in
                      selectIndex = index
                  }
                  .background(Color.clear)
        }
    }
}
//
//  SimpleListView.swift
//  Demo-SwiftUI
//
//  Created by Steven on 15/9/2023.
//

import SwiftUI

struct SimpleListView: View {

    var body: some View {
        ScrollView {
            ForEach(0..<2000) { (item) in
                Text("\(item)")
            }
        }
    }
}

Pager

pod 'SwiftUIPager'

Expected behavior Click on the "Rich" page, click on "Llist2", and then switch to the "Charm" page to slide List1 and List

Screenshots / Videos

https://github.com/fermoya/SwiftUIPager/assets/5837888/529699de-3f2f-4d90-b855-a9635be01c1e

Environment: