能否用SwiftUI实现指定图片浏览效果？TabView动态加载闪屏问题求助

你遇到的TabView动态加载时屏幕闪烁，核心原因有两个：

1. 使用了.id(photoList.viewImageList)，每次viewImageList数组变化时，整个TabView会被销毁并重建，直接导致闪烁
2. ForEach绑定id: \.self使用的是数组内的索引值，数组元素变动时会触发大量子视图重建，加剧闪烁

以下是针对性的修复方案：

1. 核心代码修改 #

var body: some View {
    GeometryReader { geo in
        ZStack {
            TabView(selection: $imgIndex) {
                ForEach(photoList.viewImageList, id: \.self) { index in
                    let assetId = photoList.imgIdList[index].localIdentifier
                    PhotoGridThumbnail(cacheIdList: $cacheIdList, currentIndex: $imgIndex, assetLocalId: assetId, index: index)
                        .environmentObject(photoList)
                        .aspectRatio(contentMode: .fit)
                        .frame(width: geo.size.width, alignment: .center)
                        .tag(index)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            .animation(.easeOut(duration: 0.2), value: imgIndex) // 仅在索引切换时应用动画
            .frame(width: geo.size.width, height: geo.size.height, alignment: .center)
            .onChange(of: imgIndex, perform: { newValue in
                self.setupIndexRange(newValue: newValue)
            })
            // 移除.id(photoList.viewImageList)，避免TabView完全重建
        }
    }
}

2. 优化动态加载逻辑 #

修改setupIndexRange方法，采用窗口化维护数组的方式，只在滑动到边缘时更新前后少量元素，避免数组频繁大幅变动：

func setupIndexRange(newValue: Int) {
    let totalImages = photoList.imgIdList.count
    let windowSize = 5 // 固定窗口大小：当前图片+前后各2张
    var newViewList = [Int]()
    
    // 计算窗口的起止索引，防止越界
    let start = max(0, newValue - 2)
    let end = min(totalImages - 1, newValue + 2)
    
    // 填充窗口内的图片索引
    for index in start...end {
        newViewList.append(index)
    }
    
    // 仅当窗口内容变化时更新数组，同时保持当前选中图片的位置
    if newViewList != photoList.viewImageList {
        let currentAssetId = photoList.imgIdList[newValue].localIdentifier
        photoList.viewImageList = newViewList
        // 找到新数组中对应图片的索引，修正选中位置
        if let newIndex = photoList.viewImageList.firstIndex(where: { 
            photoList.imgIdList[$0].localIdentifier == currentAssetId 
        }) {
            imgIndex = newIndex
        }
    }
}

3. 额外优化建议 #

• 确保PhotoGridThumbnail内部实现了图片缓存逻辑，避免每次显示图片时重新从相册加载，这也是导致闪烁的常见诱因
• 如果想进一步降低子视图重建概率，可以把ForEach的元素改为图片的localIdentifier而非索引，再映射到对应的位置，让视图的id更稳定

内容的提问来源于stack exchange，提问作者F.Flamel