ios - 在 PageTabViewStyle (SwiftUI 2.0) 或 PageViewController/PageView (带有 UIKit 界面) 上显示部分上一个和下一个项目

Question

我正在使用 SwiftUI 2.0，实际上，我很高兴 Apple 引入了 PageTabViewStyle 来简单地创建一个寻呼机。
但不幸的是，我无法以我想要的方式实现它。
是否可以创建一个显示前一个和下一个项目的一小部分的寻呼机(PageTabViewStyle)？

图 1:期望行为


我尝试使用新的 PageTabViewStyle 以及一些填充和/或偏移的组合，并且我还尝试与 UIKit(PageView/PageViewController/PAgeViewControl)进行交互。
但这里的行为相同，我只看到选定的项目，即使它没有覆盖整个宽度。

图2:当前行为


SwiftUI 2.0 - PageTabViewStyle 集成
以下代码片段是 PageTabViewStyle 的一个非常简单的实现，但是如果您有想法，可以在这个示例中向我展示我可以做些什么来使它工作:

import SwiftUI

struct ContentView: View {

    let colors: [Color] = [.red, .green, .yellow, .blue]
    
    var body: some View {
        
        TabView {
            ForEach(0..<6) { index in
                HStack() {
                    Text("Tab \(index)")
                        .font(.title)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .background(colors[index % colors.count])
                        .cornerRadius(8)
                }
                .frame(width: 300, height: 200)
            }
        }.tabViewStyle(PageTabViewStyle())
    }
}

UIKit 接口(interface)
以下代码来自 Apple 的示例，也许您可​​以在这里向我展示如何获得所需的行为:
PageViewController

/*
See LICENSE folder for this sample’s licensing information.

Abstract:
A view that wraps a UIPageViewController.
*/

import SwiftUI
import UIKit

struct PageViewController: UIViewControllerRepresentable {
    var controllers: [UIViewController]
    @Binding var currentPage: Int

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    func makeUIViewController(context: Context) -> UIPageViewController {
        let pageViewController = UIPageViewController(
            transitionStyle: .scroll,
            navigationOrientation: .horizontal,
            options: [UIPageViewController.OptionsKey.interPageSpacing: 5]
        )
        pageViewController.dataSource = context.coordinator
        pageViewController.delegate = context.coordinator

        return pageViewController
    }

    func updateUIViewController(_ pageViewController: UIPageViewController, context: Context) {
        pageViewController.setViewControllers(
            [controllers[currentPage]], direction: .forward, animated: true)
    }

    class Coordinator: NSObject, UIPageViewControllerDataSource, UIPageViewControllerDelegate {
        var parent: PageViewController

        init(_ pageViewController: PageViewController) {
            self.parent = pageViewController
        }

        func pageViewController(
            _ pageViewController: UIPageViewController,
            viewControllerBefore viewController: UIViewController) -> UIViewController? {
            guard let index = parent.controllers.firstIndex(of: viewController) else {
                return nil
            }
            if index == 0 {
                return parent.controllers.last
            }
            return parent.controllers[index - 1]
        }

        func pageViewController(
            _ pageViewController: UIPageViewController,
            viewControllerAfter viewController: UIViewController) -> UIViewController? {
            guard let index = parent.controllers.firstIndex(of: viewController) else {
                return nil
            }
            if index + 1 == parent.controllers.count {
                return parent.controllers.first
            }
            return parent.controllers[index + 1]
        }

        func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
            if completed,
                let visibleViewController = pageViewController.viewControllers?.first,
                let index = parent.controllers.firstIndex(of: visibleViewController) {
                parent.currentPage = index
            }
        }
    }
}

浏览量

/*
See LICENSE folder for this sample’s licensing information.

Abstract:
A view for bridging a UIPageViewController.
*/

import SwiftUI

struct PageView<Page: View>: View {
    var viewControllers: [UIHostingController<Page>]
    @State var currentPage = 0

    init(_ views: [Page]) {
        self.viewControllers = views.map { UIHostingController(rootView: $0) }
    }

    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            PageViewController(controllers: viewControllers, currentPage: $currentPage)
            PageControl(numberOfPages: viewControllers.count, currentPage: $currentPage)
                .padding(.trailing)
                
        }
    }
}

谢谢，
塞巴斯蒂安

Answer 1

我没有找到任何开箱即用的东西，所以我在 SwiftUI 中这样实现它:
轮播:

import Foundation
import SwiftUI

struct Carousel<Content: View,T: Identifiable>: View {
    var content: (T) -> Content
    var list: [T]
    
    var spacing: CGFloat
    var trailingSpace: CGFloat
    @Binding var index: Int
    
    
    init(spacing: CGFloat = 15,trailingSpace: CGFloat = 200,index: Binding<Int>,items: [T],@ViewBuilder content: @escaping (T)->Content){
        
        self.list = items
        self.spacing = spacing
        self.trailingSpace = trailingSpace
        self._index = index
        self.content = content
    }
    
    @GestureState var offset: CGFloat = 0
    @State var currentIndex: Int = 0
    
    var body: some View{
        
        GeometryReader{proxy in
            
            let width = proxy.size.width - (trailingSpace - spacing)
            let adjustMentWidth = (trailingSpace / 2) - spacing
            
            HStack(spacing: spacing){
                ForEach(list){item in
                    content(item)
                        .frame(width: proxy.size.width - trailingSpace, height: 100)
                }
            }
            .padding(.horizontal,spacing)
            .offset(x: (CGFloat(currentIndex) * -width) + (currentIndex != 0 ? adjustMentWidth : 0) + offset)
            .gesture(
                DragGesture()
                    .updating($offset, body: { value, out, _ in
                        out = value.translation.width
                    })
                    .onEnded({ value in
                        
                        let offsetX = value.translation.width
                        let progress = -offsetX / width
                        let roundIndex = progress.rounded()
                        currentIndex = max(min(currentIndex + Int(roundIndex), list.count - 1), 0)
                        currentIndex = index
                    })
                    .onChanged({ value in
                        let offsetX = value.translation.width
                        let progress = -offsetX / width
                        let roundIndex = progress.rounded()
                        index = max(min(currentIndex + Int(roundIndex), list.count - 1), 0)
                    })
            )
        }
        .animation(.easeInOut, value: offset == 0)
    }
}

用户(简体):

import Foundation
import SwiftUI

struct User: Identifiable{
    var id = UUID().uuidString
    var userName: String
    var userImage: String
}

内容 View :

import SwiftUI

struct ContentView: View {
    
    @State var currentIndex: Int = 0
    @State var users: [User] = []
    
    var body: some View {
        VStack() {
            Carousel(index: $currentIndex, items: users) {user in
                
                GeometryReader{proxy in
                    
                    let size = proxy.size
                    
                    Image(user.userImage)
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: size.width)
                        .cornerRadius(12)
                }
            }
            .padding(.vertical,40)
            
            // Indicator dots
            HStack(spacing: 10){
                
                ForEach(users.indices,id: \.self){index in
                    
                    Circle()
                        .fill(Color.black.opacity(currentIndex == index ? 1 : 0.1))
                        .frame(width: 10, height: 10)
                        .scaleEffect(currentIndex == index ? 1.4 : 1)
                        .animation(.spring(), value: currentIndex == index)
                }
            }
            .padding(.bottom,40)
        }
        .onAppear {
            for index in 1...5{
                users.append(User(userName: "User\(index)", userImage: "user\(index)"))
            }
        }
    }
}