Paging on ScrollView does not work/appear

Question

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).

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:

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)
        }
    }
}

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.

You can try collectionView, It's easier and more flexible – Menaim Dec 18 '20 at 01:56 — Menaim, Dec 18 '20 at 01:56

score 1 · Accepted Answer · answered Dec 18 '20 at 02:43

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)
    }
}

Paging on ScrollView does not work/appear

1 Answers1