SwiftUI中mode变更后confettiCannon未更新，如何强制视图重渲染？

问题场景 #

以下SwiftUI代码中，当mode变量切换时，按钮上的mode.icon能正常更新，但confettiCannon传入的mode.items却不会同步更新，导致发射的纸屑样式始终是旧的：

struct TriggerButton: View {
    @State private var confettiCounter: Int = 0
    @Binding var mode: ConfettiMode
    @Binding var showText: Bool
    @State private var counter = 0
    
    var body: some View {
        VStack {
            Button {
                confettiCounter += 1
                if showText {
                    withAnimation(.easeIn(duration: 0.5)) {
                        showText = false
                    }
                }
                counter += 1
                if counter == 3 {
                    counter = 0
                    mode = mode.next()
                }
            } label: {
                Text(mode.icon)
                    .font(.system(size: 100))
                    .shadow(radius: 15, x: 5, y: 5)
            }
            .confettiCannon(counter: $confettiCounter, num: 70, confettis: mode.items, colors: [.red, .green, .yellow, .pink, .purple, .orange], confettiSize: 10, rainHeight: 300, openingAngle: Angle.degrees(30), closingAngle: Angle.degrees(150), radius: 500)
        }
    }
}

原因分析 #

ConfettiSwiftUI库的confettiCannon修饰符内部逻辑仅在初始渲染或counter值变化时读取confettis参数，并未将confettis作为视图更新的依赖项进行追踪。因此当mode.items变化时，修饰符不会主动刷新，依然使用之前缓存的纸屑样式列表。

解决方法 #

给添加了confettiCannon修饰符的视图加上.id(mode)，让SwiftUI在mode变化时重新创建该视图及关联的修饰符实例，从而读取最新的mode.items：

struct TriggerButton: View {
    @State private var confettiCounter: Int = 0
    @Binding var mode: ConfettiMode
    @Binding var showText: Bool
    @State private var counter = 0
    
    var body: some View {
        VStack {
            Button {
                confettiCounter += 1
                if showText {
                    withAnimation(.easeIn(duration: 0.5)) {
                        showText = false
                    }
                }
                counter += 1
                if counter == 3 {
                    counter = 0
                    mode = mode.next()
                }
            } label: {
                Text(mode.icon)
                    .font(.system(size: 100))
                    .shadow(radius: 15, x: 5, y: 5)
            }
            .confettiCannon(counter: $confettiCounter, num: 70, confettis: mode.items, colors: [.red, .green, .yellow, .pink, .purple, .orange], confettiSize: 10, rainHeight: 300, openingAngle: Angle.degrees(30), closingAngle: Angle.degrees(150), radius: 500)
            .id(mode) // 新增该行，绑定mode作为视图唯一标识
        }
    }
}

原理说明 #

.id(mode)会让SwiftUI将mode的值作为视图的唯一标识，当mode变化时，SwiftUI会判定该视图为全新的视图，重新初始化所有关联的修饰符，包括confettiCannon，此时修饰符就会读取最新的mode.items值，实现纸屑样式随mode同步更新。

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