SwiftUI 4 - iOS 16：在星级视图中奇怪的 animation

Question

我正在使用以下代码片段来显示一个简单的星级评分视图：

struct ContentView: View {
    @State var rating: Float = 1.0
    
    var body: some View {
        HStack(spacing: 4) {
            ForEach (0 ..< filledStarsCount, id: \.self) { index in
                Button {
                    rating = Float(index + 1)
                    
                } label: {
                    Image(systemName: "star.fill")
                }
              
            }
            
            ForEach (0 ..< emptyStarsCount, id: \.self) { index in
                Button {
                    rating = Float(index + filledStarsCount + 1)
                    
                } label: {
                    Image(systemName: "star")
                }
               
            }
        }
        .font(.title)
    }

    var emptyStarsCount: Int {
        filledStarsCount == 5 ? 0 : abs(5 - filledStarsCount  )
    }
    
    var filledStarsCount: Int {
        let rounded = Int(rating)
        if rounded > 5 { 
            return 5
        }
        else {
            return rounded
        }
    }
}

但是每当我点击一个空星时，视图会在 iOS 16 中以一种奇怪的方式重绘，并在 iOS 15.5 中重新绘制（带有一点闪光），这是该问题的视频截图：

代码可以复制粘贴在 XCode 中试用。

Answer 1

奇怪的 animation 是因为您不应该使用具有动态范围的ForEach视图结构（它不是 for 循环），例如0..< filledStarsCount ，它必须是 static 数字，例如0..< 5 . 原因是在使用索引作为 ID 时它无法跟踪更改，因为如果说有 5 个项目并且索引 0 的项目被删除，那么仍然有一个索引为 0 的项目。一旦你明白你知道解决方案是始终创建 5 星位置并决定每个位置是否应具有填充图像，例如

ForEach (0 ..< 5) { index in
    Button {
       rating = Float(index + 1)
    } label: {
       Image(systemName: rating < index ? "star.fill" : "star" ) // needs tested 
    }
}