如何在 SwiftUI 中创建带有窥视视图的分页滚动视图

Question

我有一个像这样的简单的分页滚动视图。这只是在分页水平滚动视图中用数字圈出。

struct PageView: View {
    var number: Int
    var body: some View {
        ZStack {
            Circle()
                .padding(50)
            Text("\(number)")
                .font(.largeTitle)
                .foregroundStyle(.white)
        }
    }
}

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 0) {
                ForEach(1..<5) { i in
                    PageView(number: i)
                        .containerRelativeFrame(.horizontal, count: 5, span: 5, spacing: 0, alignment: .leading)
                }
            }
        }
        .scrollTargetBehavior(.paging)
    }
}

我希望圆圈在两侧都能看到，但在滚动时保持居中。首先，我调整了一些属性，但我不确定如何使页面视图在您翻页时仍然保持在滚动视图的中心。

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 10) {
                ForEach(1..<5) { i in
                    PageView(number: i)
                        .containerRelativeFrame(.horizontal, count: 5, span: 4, spacing: 0, alignment: .leading)
                }
            }
            .padding(.leading, 40)
        }
        .scrollTargetBehavior(.paging)
    }
}

Answer 1

您应该调整

ScrollView

的大小，使每个“页面”不与屏幕一样宽。如果您随后执行

scrollClipDisabled

，其他页面的部分内容将可见。

如果您希望每侧有一半的圆圈“窥视”，则滚动视图应占据其容器宽度的一半。您可以使用

containerRelativeFrame

调整滚动视图的大小。

ScrollView(.horizontal) {
    HStack(spacing: 0) {
        ForEach(1..<5) { i in
            PageView(number: i)
                .containerRelativeFrame(.horizontal)
        }
    }
}
.scrollTargetBehavior(.paging)
.containerRelativeFrame(.horizontal, count: 2, spacing: 0)
.scrollClipDisabled()

滚动视图所占容器宽度的比例为

span

（默认为 1）除以

count

。

您也可以在滚动视图上执行

padding(.horizontal, someNumber)

，让恒定宽度从其他“页面”中“窥视”。