SwiftUI中如何使用ForEach向HStack动态添加元素

问题原因 #

你使用的ForEach(0..<NumberOfCircles)属于无显式ID的范围构造器，SwiftUI会将其识别为静态范围，仅在视图首次渲染时计算一次区间值，后续@State修饰的NumberOfCircles发生变化时，ForEach不会感知到范围更新，因此不会新增渲染元素。

修复方案 #

只要给ForEach添加id: \.self参数，指定每个元素的唯一标识为自身索引，即可让ForEach响应动态变化的区间：

struct ContentView: View {
    @State var fill : CGFloat = 0
    // Swift变量名规范建议小写开头，你也可以保留原有命名
    @State var NumberOfCircles : Int = 0
    var body: some View {
        HStack(spacing:20) { // 原spacing为100容易超出屏幕宽度，可按需调整
            ForEach(0..<NumberOfCircles, id: \.self){ _ in
                // 此处替换为你自定义的MyShape即可，示例用Circle做效果演示
                Circle()
                    .fill(.blue)
                    .frame(width: 20, height: 20)
            }

            Button(action: {NumberOfCircles = 5}, label: {
                Text("Button")  
            })
        }
    }
}

拓展说明 #

如果后续你需要支持给每个进度元素单独绑定状态、或者动态增删单个元素，也可以改用数组作为数据源，搭配Identifiable协议实现更灵活的列表更新。

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