swiftswiftuipaginationscrollview

Paging on ScrollView does not work/appear

I use SwiftUI and I would like to have a vertical Scrollview to display a number of items (events). These items contain subitems (participants) which are represented by photos. I would like to show 4 photos in a 2x2 matrix. If there are more than 4 participants, I would like to swipe left to show the next 4 photos. (Please see the attached screenshot).

ScrollView with paging-element (only one item in focus) ScrollView with paging-element (two items in focus)

To realize that I implemented paging (PageView, PageViewController and PageControl) by using UIViewRepresentable or UIViewControllerRepresentable. (I also tried TabView)

I have problems using this paging on a ScrollView, the paging-element is not available, it does not show up. It works well in a VStack or a list but that doesn't help I need it on a scrollview.

Very simplified examples:

  1. Embedded into a VStack -> WORKS

    import SwiftUI

struct TestView2: View {
    @State var currentPage = 0

    var body: some View {
        VStack() {
            Text("Below the Paging")

            PageView([
                TestView(),
                TestView()
            ], currentPage: $currentPage)
        }
    }
}

  2. Embedded into a ScrollView -> DOES NOT WORK

    import SwiftUI

struct TestView2: View {
    @State var currentPage = 0

    var body: some View {
        ScrollView() {
            // It also does not work if I add a VStack() into the ScrollView.
            // VStack(){ 
            Text("Below the Paging")

            PageView([
                TestView(),
                TestView()
            ], currentPage: $currentPage)
            // }
        }
    }
}

Do I have to pay attention to something in the case of a ScrollView? Do I have to preload something. Does it have to be specially embedded? Or it the paging, in the way I implemented it, the wrong approach?

If you need more of the used code, please let me know.

Btw. the ScrollView is driving me crazy. In addition to this problem, I also have the problem that buttons do not work in some places as long as I have not scrolled.

Solution

  • It looks like it is a bug but it is resolved in 14.3

    struct NestedPageController: View {
    @State var currentPage = 0
    @State var currentPage2 = 0
    
    var body: some View {
        ScrollView() {
            VStack{
                Text("Below the Paging")
                
                TabView(selection: $currentPage){
                    TestView2(tag: 1).tag(1)
                    TestView2(tag: 2).tag(2)
                    TestView2(tag: 3).tag(3)
                    TestView2(tag: 4).tag(4)
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                TabView(selection: $currentPage2){
                    TestView2(tag: 10).tag(10)
                    TestView2(tag: 20).tag(20)
                    TestView2(tag: 30).tag(30)
                    TestView2(tag: 40).tag(40)
                }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                
            }
        }
    }
}

struct TestView2: View {
    var tag: Int
    var body: some View {
        VStack{
            Text(tag.description)
            Image(systemName: "checkmark")
        }.frame(width: 200, height: 200, alignment: .center).background(Color.green)
    }
}

    ScreenShot