如何在SwiftUI中为CarouselView添加VoiceOver无障碍支持？

针对你提到的UIKit中iCarousel的无障碍适配需求，在SwiftUI里可以通过原生API或组件包装的方式实现对应的VoiceOver支持，以下是具体方案：

一、基于SwiftUI原生TabView的实现 #

SwiftUI原生TabView配合.pageTabViewStyle是替代iCarousel的常用方案，直接通过无障碍修饰符即可实现需求：

1. 完整代码实现 #

struct CarouselView: View {
    // 轮播数据源、无障碍标签与值数组
    let items: [String]
    let accLabels: [String]
    let accValues: [String]
    
    // 当前选中索引
    @State private var currentIndex = 0
    
    var body: some View {
        TabView(selection: $currentIndex) {
            ForEach(0..<items.count, id: \.self) { index in
                Text(items[index])
                    .tag(index)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.gray.opacity(0.2))
            }
        }
        .tabViewStyle(.page(indexDisplayMode: .always))
        .indexViewStyle(.page(backgroundDisplayMode: .always))
        // 绑定当前索引对应的无障碍标签与值
        .accessibilityLabel(accLabels[currentIndex])
        .accessibilityValue(accValues[currentIndex])
        // 标记组件内容会频繁更新
        .accessibilityTraits(.updatesFrequently)
        // 处理VoiceOver滑动操作
        .accessibilityScrollAction { direction in
            switch direction {
            case .left:
                if currentIndex < items.count - 1 {
                    currentIndex += 1
                }
            case .right:
                if currentIndex > 0 {
                    currentIndex -= 1
                }
            default:
                break
            }
        }
        // 索引变化时播报页码信息
        .onChange(of: currentIndex) { newIndex in
            UIAccessibilityPostNotification(
                UIAccessibilityAnnouncementNotification,
                "第\(newIndex + 1)项，共\(items.count)项"
            )
        }
        // 页面初始加载时播报当前状态
        .onAppear {
            UIAccessibilityPostNotification(
                UIAccessibilityAnnouncementNotification,
                "第\(currentIndex + 1)项，共\(items.count)项"
            )
        }
    }
}

2. 关键逻辑说明 #

• 无障碍滑动支持：通过accessibilityScrollAction监听VoiceOver的左右滑动指令，直接调整currentIndex实现轮播切换。
• 动态更新无障碍信息：accessibilityLabel和accessibilityValue绑定currentIndex，索引变化时自动同步最新的无障碍文本。
• 页码播报：用onChange监听索引更新，触发系统通知播报当前页码；onAppear添加初始播报，确保进入页面时VoiceOver能提示初始状态。
• 更新状态标记：accessibilityTraits(.updatesFrequently)告诉VoiceOver该组件的无障碍信息会频繁变化，提升读屏体验。

二、自定义轮播组件的无障碍适配 #

如果是自己实现的自定义轮播（非TabView），只需在根视图上添加对应无障碍修饰符即可：

1. 核心代码示例 #

struct CustomCarousel: View {
    let items: [String]
    let accLabels: [String]
    let accValues: [String]
    @State private var currentIndex = 0
    
    // 自定义轮播的滚动逻辑
    private func scrollToNext() {
        withAnimation(.easeInOut(duration: 1.0)) {
            if currentIndex < items.count - 1 { currentIndex += 1 }
        } completion: {
            // 动画结束后播报页码
            UIAccessibilityPostNotification(
                UIAccessibilityAnnouncementNotification,
                "第\(currentIndex + 1)项，共\(items.count)项"
            )
        }
    }
    
    private func scrollToPrevious() {
        withAnimation(.easeInOut(duration: 1.0)) {
            if currentIndex > 0 { currentIndex -= 1 }
        } completion: {
            UIAccessibilityPostNotification(
                UIAccessibilityAnnouncementNotification,
                "第\(currentIndex + 1)项，共\(items.count)项"
            )
        }
    }
    
    var body: some View {
        ZStack {
            // 自定义轮播内容布局
            ForEach(0..<items.count, id: \.self) { index in
                Text(items[index])
                    .opacity(index == currentIndex ? 1 : 0)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
        }
        .accessibilityLabel(accLabels[currentIndex])
        .accessibilityValue(accValues[currentIndex])
        .accessibilityTraits(.updatesFrequently)
        .accessibilityScrollAction { direction in
            switch direction {
            case .left: scrollToNext()
            case .right: scrollToPrevious()
            default: break
            }
        }
    }
}

2. 注意点 #

如果自定义轮播带有过渡动画，建议在动画完成回调中触发页码播报，避免VoiceOver提前播报未完成的状态。

三、兼容原有iCarousel：UIViewRepresentable包装 #

如果仍需使用iCarousel，可以通过UIViewRepresentable将其包装为SwiftUI组件，保留原有的无障碍逻辑：

1. 完整包装代码 #

struct iCarouselView: UIViewRepresentable {
    let items: [String]
    let accLabels: [String]
    let accValues: [String]
    @Binding var currentIndex: Int
    
    func makeUIView(context: Context) -> iCarousel {
        let carousel = iCarousel()
        carousel.delegate = context.coordinator
        carousel.dataSource = context.coordinator
        // 初始化无障碍属性
        carousel.accessibilityTraits = .updatesFrequently
        carousel.accessibilityLabel = accLabels[currentIndex]
        carousel.accessibilityValue = accValues[currentIndex]
        return carousel
    }
    
    func updateUIView(_ uiView: iCarousel, context: Context) {
        uiView.reloadData()
        if uiView.currentItemIndex != currentIndex {
            uiView.scrollToItem(at: currentIndex, animated: true)
        }
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, iCarouselDelegate, iCarouselDataSource {
        let parent: iCarouselView
        
        init(parent: iCarouselView) {
            self.parent = parent
        }
        
        func numberOfItems(in carousel: iCarousel) -> Int {
            parent.items.count
        }
        
        func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
            let label = UILabel()
            label.text = parent.items[index]
            label.textAlignment = .center
            label.frame = CGRect(x: 0, y: 0, width: 300, height: 200)
            return label
        }
        
        func carouselDidEndScrollingAnimation(_ carousel: iCarousel) {
            parent.currentIndex = carousel.currentItemIndex
            // 更新无障碍标签与值
            carousel.accessibilityLabel = parent.accLabels[carousel.currentItemIndex]
            carousel.accessibilityValue = parent.accValues[carousel.currentItemIndex]
            // 播报页码
            UIAccessibilityPostNotification(
                UIAccessibilityAnnouncementNotification,
                "第\(carousel.currentItemIndex + 1)项，共\(parent.items.count)项"
            )
        }
    }
}

// 保留原iCarousel的无障碍滑动逻辑
extension iCarousel {
    override open func accessibilityScroll(_ direction: UIAccessibilityScrollDirection) -> Bool {
        super.accessibilityScroll(direction)
        
        if direction == .left {
            scroll(byOffset: 1, duration: 1.0)
        }
        if direction == .right {
            scroll(byOffset: -1, duration: 1.0)
        }
        return true
    }
}

2. SwiftUI中使用方式 #

struct ContentView: View {
    @State private var currentIndex = 0
    let items = ["Item 1", "Item 2", "Item 3"]
    let accLabels = ["标签1", "标签2", "标签3"]
    let accValues = ["值1", "值2", "值3"]
    
    var body: some View {
        iCarouselView(
            items: items,
            accLabels: accLabels,
            accValues: accValues,
            currentIndex: $currentIndex
        )
        .frame(height: 200)
    }
}

内容的提问来源于stack exchange，提问作者AppleDeveloper