SwiftUI中如何关闭Page样式TabView的单个标签页

dismiss()方法无法实现该需求，它的作用是退出当前整个被呈现的视图层级，不能操作TabView内部的单个标签页。直接修改数据源数组导致动画生硬的核心原因是：删除元素前没有先驱动TabView做原生的切页过渡，而是直接触发了内容硬刷新。

正确实现逻辑是通过TabView的选中项绑定，配合延迟删除数据源的方式，复用系统原生的页签滑动动画，具体步骤如下：

• 为图片模型增加处理状态标记：给图片模型新增isProcessed: Bool属性，默认值为false，用来标记已经保存/丢弃的图片，不要点击按钮就直接从images数组删除元素。
• 给TabView增加选中值双向绑定：Page样式的TabView支持通过selection参数绑定当前选中的页签，绑定值的类型必须和ForEach遍历元素的id类型一致，同时给每个页签设置匹配的tag值。
• 处理保存按钮的交互逻辑：点击保存时先执行存图逻辑、标记当前页为已处理，再找到下一张未处理的图片，驱动TabView原生切页动画滑动到目标页，等切页动画完成后再从数组中移除已处理的元素，全程复用系统动画不会生硬。
• 边界场景处理：如果当前已经是最后一张待处理图片，切完没有剩余待处理项时，再调用dismiss()关闭整个图片预览层即可。

核心代码示例 #

模型层准备 #

如果直接使用UIImage作为数组元素无法新增属性，可以写个简单的结构体包装图片数据：

struct ProcessableImage: Identifiable, Hashable {
    let id = UUID()
    let rawImage: UIImage
    var isProcessed: Bool = false
}

将ViewModel中images数组的类型替换为[ProcessableImage]即可。

ViewModel 新增属性 #

class TestViewModel: ObservableObject {
    // 原有图片数组替换为包装类型
    @Published var images: [ProcessableImage] = []
    // 新增当前选中tab的绑定属性，类型和图片id类型一致
    @Published var currentTab: ProcessableImage.ID?
}

TabView 部分修改 #

TabView(selection: $vm.currentTab) {
    ForEach(vm.images) { image in
        if !image.isProcessed {
            TestView(image: image)
                .tag(image.id) // tag类型必须和selection类型完全一致
        }
    }
}
.tabViewStyle(.page(indexDisplayMode: .never))
.onAppear {
    // 初始默认选中第一张未处理的图片
    vm.currentTab = vm.images.first(where: { !$0.isProcessed })?.id
}

TestView 保存按钮逻辑 #

struct TestView: View {
    @ObservedObject var vm: TestViewModel
    let image: ProcessableImage
    // 引入系统环境的dismiss方法
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        VStack(spacing: 10) {
            Image(uiImage: image.rawImage)
                .resizable()
                .scaledToFit()
            
            Spacer()
            
            Button {
                // 1. 执行你自己的图片保存逻辑，示例为保存到系统相册
                UIImageWriteToSavedPhotosAlbum(image.rawImage, nil, nil, nil)
                
                // 2. 标记当前图片为已处理
                guard let currentIndex = vm.images.firstIndex(where: { $0.id == image.id }) else { return }
                vm.images[currentIndex].isProcessed = true
                
                // 3. 查找下一张待处理图片
                let nextPendingImage = vm.images.first(where: { $0.id != image.id && !$0.isProcessed })
                
                if let nextTarget = nextPendingImage {
                    // 4. 驱动TabView做原生切页动画
                    withAnimation(.easeInOut) {
                        vm.currentTab = nextTarget.id
                    }
                    // 等待切页动画完成（和系统Page Tab切页时长对齐）后再移除已处理元素，避免动画断裂
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.35) {
                        vm.images.removeAll(where: { $0.isProcessed })
                    }
                } else {
                    // 没有剩余待处理图片，直接关闭整个预览页
                    dismiss()
                }
            } label: {
                Text("Save")
            }
        }
    }
}

注意：如果你的图片模型是自定义引用类型（NSObject子类），修改isProcessed属性时需要手动调用vm.objectWillChange.send()触发视图更新，否则ForEach不会感知到状态变化。

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