SwiftUI 中的垂直分页

Question

我正在通过 TabView 创建一个垂直分页视图，如下 this

一切都很完美，除了奇怪的右边距，如下图所示。

这是我使用的代码。如果有人能指出根本原因，我将不胜感激。

import SwiftUI

fileprivate struct VCompatibleTabView<Content: View>: View {
    let proxy: GeometryProxy
    let content: Content
    
    init(proxy: GeometryProxy, @ViewBuilder content: () -> Content) {
        self.proxy = proxy
        self.content = content()
    }
    
    var body: some View {
        if #available(iOS 15.0, *) {
            // Credit to Gary Tokmen for this bit of Geometry Reader code: https://blog.prototypr.io/how-to-vertical-paging-in-swiftui-f0e4afa739ba
            TabView {
                content
                .rotationEffect(.degrees(-90)) // Rotate content
                .frame(
                    width: proxy.size.width,
                    height: proxy.size.height
                )
            }
            .frame(
                width: proxy.size.height, // Height & width swap
                height: proxy.size.width
            )
            .rotationEffect(.degrees(90), anchor: .topLeading) // Rotate TabView
            .offset(x: proxy.size.width) // Offset back into screens bounds
            .tabViewStyle(
                PageTabViewStyle(indexDisplayMode: .never)
            )
        } else {
            ScrollView(.vertical, showsIndicators: false) {
                LazyVStack(spacing: 0) {
                    content
                }
            }
            .frame(
                width: proxy.size.width,
                height: proxy.size.height)        }
    }
}

struct BBYouView: View {

    var body: some View {
        ZStack {
            GeometryReader { proxy in
                VCompatibleTabView(proxy: proxy) {
                    ForEach(0..<3, id: \.self) { item in
                        Rectangle().fill(Color.pink)
                        .frame(
                            width: proxy.size.width,
                            height: proxy.size.height
                        )
                    }
                }
            }
        }
        .background(Color.yellow)
    }


}

Answer 1

iOS 17 中的水平/垂直分页

从 iOS 17 开始，您不需要旋转选项卡视图，您可以通过在 ScrollView 上应用以下修饰符来启用分页行为：

.scrollTargetBehavior(.paging)

因此，ScrollView 内的任何内容（例如堆栈内的简单 ForEach）都将根据需要进行分页。这适用于水平滚动视图和垂直滚动视图。

Answer 2

有 iOS17 修饰符 .scrollTargetBehavior(.paging)，对于旧版本，此 hack 应该有效：

import SwiftUIIntrospect

GeometryReader { proxy in
    ScrollView {
        LazyVStack(spacing: 0) {
            ForEach([Color.red, Color.green, Color.blue], id: \.self) { color in
                color.frame(proxy.size)
            }
        }
    }
    .introspect(.scrollView, on: .iOS(.v15, .v16, .v17)) { sv in
        sv.isPagingEnabled = true
    }
}

Answer 3

尝试在 TabView 内的 content 视图上添加 scaledToFill() 修饰符。该修改器会缩放视图以填充其父视图。我发现当 content 视图是 AsyncImage 或 Image 视图时它可以工作，并且它应该适用于任何单个视图。然而，对于水平的 TabView 来说，它也有同样的问题，即屏幕右边缘的奇怪边距。

示例代码如下：

  TabView {
                    content.scaledToFill()
                    .rotationEffect(.degrees(-90)) // Rotate content
                    .frame(
                        width: proxy.size.width,
                        height: proxy.size.height
                    )
                }
                .frame(
                    width: proxy.size.height, // Height & width swap
                    height: proxy.size.width
                )
                .rotationEffect(.degrees(90), anchor: .topLeading) // Rotate TabView
                .offset(x: proxy.size.width) // Offset back into screens bounds
                .tabViewStyle(
                    PageTabViewStyle(indexDisplayMode: .never)
                )
}