SwiftUI：@State变量更新时CarouselImageView子视图未同步更新

问题现象 #

点击ListView的Remove按钮，调用父视图ContentView的removeView方法删除对应索引的元素后，ListView的randomString文本能正常更新，但CarouselImageView显示的图片未同步：原索引0的图片会替换索引1的图片，索引1替换索引2，以此类推。排查发现ListView的listModels已正确更新，但CarouselImageView的init方法中打印的imageList仍是旧值。

核心问题分析 #

1. ForEach复用视图：ContentView中ForEach(0..<lists.count, id: \.self)使用索引作为唯一标识，当删除元素后，后续元素的索引前移，SwiftUI会复用之前的ListView实例，导致实例内部的@State变量（如listModels、currentIndex）不会重置，保留旧值。
2. 错误的父视图引用：ListView直接持有parent: ContentView实例，违反SwiftUI单向数据流原则，易导致视图更新异常。
3. 冗余的ChangeObserver：通过ChangeObserver通知更新多此一举，且onReceive的时机无法保证视图复用后正确更新listModels。
4. CarouselImageView初始化限制：CarouselImageView的init仅在视图首次创建时调用，复用ListView后不会重新初始化，导致imageList始终为旧值。

解决方案 #

1. 使用自定义模型替代字典：创建符合Identifiable协议的模型，让ForEach使用模型的唯一id，避免视图复用。
2. 用闭包替代父视图引用：通过闭包回调实现子视图对父视图数据的修改，遵循SwiftUI数据流规范。
3. 移除ChangeObserver：直接在ListView的body中根据数据源初始化listModels，确保数据变化时同步更新。
4. 确保CarouselImageView响应数据变化：让CarouselImageView的imageList直接依赖传入的listModels，数据更新时触发视图重绘。

修改后的完整代码 #

import SwiftUI

// 自定义模型替代字典，遵循Identifiable保证唯一标识
struct ListData: Identifiable {
    let id = UUID()
    let randomString: String
    let images: [String]
}

struct ContentView: View {
    @State var lists: [ListData] = [
        ListData(
            randomString: UUID().uuidString,
            images: [
                "https://source.unsplash.com/random/200x200?sig=1",
                "https://source.unsplash.com/random/200x200?sig=2",
                "https://source.unsplash.com/random/200x200?sig=3"
            ]
        ),
        ListData(
            randomString: UUID().uuidString,
            images: [
                "https://source.unsplash.com/random/200x200?sig=4",
                "https://source.unsplash.com/random/200x200?sig=5"
            ]
        ),
        ListData(
            randomString: UUID().uuidString,
            images: [
                "https://source.unsplash.com/random/200x200?sig=6",
                "https://source.unsplash.com/random/200x200?sig=7",
                "https://source.unsplash.com/random/200x200?sig=8",
                "https://source.unsplash.com/random/200x200?sig=9",
                "https://source.unsplash.com/random/200x200?sig=10",
                "https://source.unsplash.com/random/200x200?sig=11"
            ]
        ),
        ListData(
            randomString: UUID().uuidString,
            images: [
                "https://source.unsplash.com/random/200x200?sig=12"
            ]
        ),
        ListData(
            randomString: UUID().uuidString,
            images: [
                "https://source.unsplash.com/random/200x200?sig=13",
                "https://source.unsplash.com/random/200x200?sig=14"
            ]
        )
    ]
    
    var body: some View {
        ScrollView {
            VStack {
                // 基于模型唯一id识别视图，避免删除元素后复用旧视图
                ForEach($lists) { $list in
                    ListView(list: list, onRemove: {
                        lists.removeAll { $0.id == list.id }
                    })
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 10)
                }
            }
        }
    }
}

struct ListView: View {
    let list: ListData
    let onRemove: () -> Void
    @State var currentIndex = 0
    
    // 计算属性随list变化自动生成最新的listModels
    private var listModels: [ListModels] {
        list.images.map { ListModels(imageUrl: $0) }
    }
    
    var body: some View {
        VStack {
            Text(list.randomString)
            CarouselImageView(index: $currentIndex, imageList: listModels) { listModel in
                GeometryReader { proxy in
                    let imageUrl = listModel.imageUrl
                    guard let url = URL(string: imageUrl) else {
                        EmptyView()
                        return
                    }
                    let size = proxy.size
                    ZStack {
                        AsyncImage(url: url)
                            .frame(width: size.width, height: size.width)
                    }
                    .frame(width: size.width, height: size.width)
                    .background(Color.gray)
                    .cornerRadius(7)
                    .overlay(RoundedRectangle(cornerRadius: 7).stroke(Color.red, lineWidth: 4))
                }
            }
            .frame(width: UIScreen.main.bounds.width - 40, height: UIScreen.main.bounds.width - 40)
            
            Button(action: onRemove) {
                Text("Remove")
                    .foregroundColor(Color.blue)
                    .font(.system(size: 17))
            }
            .frame(maxWidth: .infinity)
        }
        .frame(maxWidth: .infinity)
    }
}

struct ListModels: Identifiable {
    var id = UUID().uuidString
    var imageUrl: String
}

struct CarouselImageView<Content: View, T: Identifiable>: View {
    var spacing: CGFloat = 10
    var trailingSpace: CGFloat = 50
    var reducer: Int = 70
    @Binding var index: Int
    let imageList: [T]
    let content: (T) -> Content
    @GestureState var offset: CGFloat = 0
    @State var currentIndex = 0
    
    var body: some View {
        GeometryReader { proxy in
            let adjustmentWidth = (trailingSpace / 2) - spacing
            let width = proxy.size.width - (trailingSpace - spacing)
            HStack(spacing: spacing) {
                if imageList.count == 1 {
                    Spacer()
                }
                
                // 基于模型id获取索引，避免数据混乱
                ForEach(imageList) { item in
                    guard let itemIndex = imageList.firstIndex(where: { $0.id == item.id }) else {
                        EmptyView()
                        return
                    }
                    let indexToCI = abs(itemIndex - currentIndex)
                    let liner = CGFloat((indexToCI > 2 ? 2 : indexToCI) * reducer)
                    let proxyWidth = proxy.size.width - trailingSpace - liner
                    content(item)
                        .frame(width: proxyWidth, height: proxyWidth)
                }
                
                if imageList.count == 1 {
                    Spacer()
                }
            }
            .padding(.horizontal, spacing)
            .offset(x: currentIndex.maxOffset(reducer: reducer, width: proxy.size.width, spacing: spacing, trailingSpace: trailingSpace) + (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), imageList.count - 1), 0)
                        index = currentIndex
                    })
                    .onChanged({ value in
                        let offsetX = value.translation.width
                        let progress = -offsetX / width
                        let roundIndex = progress.rounded()
                        index = max(min(currentIndex + Int(roundIndex), imageList.count - 1), 0)
                    })
            )
        }
        .animation(.easeInOut, value: offset == 0)
    }
}

// 补充原代码缺失的maxOffset方法
extension Int {
    func maxOffset(reducer: Int, width: CGFloat, spacing: CGFloat, trailingSpace: CGFloat) -> CGFloat {
        let itemWidth = width - trailingSpace
        let totalSpacing = CGFloat(self) * spacing
        return -(CGFloat(self) * itemWidth + totalSpacing)
    }
}

关键修改说明 #

• 自定义ListData模型：给每个列表项分配唯一id，ForEach基于id识别视图，删除元素后不会复用旧视图实例。
• 闭包回调删除逻辑：ListView通过onRemove闭包通知ContentView删除对应项，避免持有父视图引用，符合单向数据流原则。
• 计算属性生成listModels：listModels随list的变化自动更新，确保CarouselImageView始终获取最新数据。
• 修复索引获取逻辑：使用firstIndex(where:)基于模型id查找位置，避免直接索引导致的数据混乱。

内容的提问来源于stack exchange，提问作者KANAYO AUGUSTIN UG