ScrollView 上的分页不起作用/出现

问题描述 投票:0回答:1

我使用 SwiftUI,我想要一个垂直滚动视图来显示多个项目(事件)。 这些项目包含由照片表示的子项目(参与者)。 我想在 2x2 矩阵中显示 4 张照片。如果参加人数超过 4 人,我想向左滑动显示接下来的 4 张照片。 (请参阅随附的屏幕截图)。

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

实现我通过使用 UIViewRepresentable 或 UIViewControllerRepresentable 实现了分页(PageView、PageViewController 和 PageControl)。 (我也尝试过TabView)

我在 ScrollView 上使用此分页时遇到问题,分页元素不可用,它不显示。 它在 VStack 或列表中运行良好,但这对我在滚动视图上需要它没有帮助。


非常简单的例子:

  1. 嵌入到 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. 嵌入 ScrollView -> 不起作用

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

使用ScrollView需要注意什么吗?我需要预加载一些东西吗?是不是必须要专门嵌入? 或者是分页,以我实现的方式,错误的方法?

如果您需要更多使用过的代码,请告诉我。

顺便说一句。 ScrollView 让我发疯。除了这个问题之外,我还有一个问题,就是只要我没有滚动,按钮在某些地方就不起作用。

swift swiftui pagination scrollview
1个回答
1
投票

看起来是一个bug,但在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

© www.soinside.com 2019 - 2024. All rights reserved.