SwiftUI中如何修改视图绑定的数组内结构体并规避索引问题？

你碰到的这个问题在SwiftUI里很常见，核心原因有两个：一是SingleBall是值类型（struct），ForEach迭代出来的ball是原数组元素的不可变拷贝，所以直接修改会报错；二是用索引访问数组的话，一旦元素被删除，索引就会错位，很容易触发越界问题。

好在你的SingleBall已经实现了Identifiable协议，我们可以利用它唯一的id来精准定位原数组中的元素，完美解决这两个问题。下面是具体的实现方案：

修改后的核心代码 #

把你原来的ForEach部分替换成这样：

ForEach(ballStorage.balls) { ball in
    littleBall(id: ball.id)
        .position(ball.position)
        .gesture(DragGesture()
            .onChanged { gesture in
                // 通过id找到原数组中对应的元素索引
                if let index = ballStorage.balls.firstIndex(where: { $0.id == ball.id }) {
                    // 修改原数组里的元素位置
                    ballStorage.balls[index].position = gesture.location
                }
            }
        )
}

为什么这个方案可行？ #

• 精准定位元素：通过firstIndex(where:)结合唯一的id查找元素，不管数组怎么增删元素，都能准确找到你正在拖拽的那个SingleBall，完全避免了索引错位的问题。
• 同步修改原数据：我们修改的是ballStorage.balls数组里的原元素，不是拷贝，再加上ballStorage是@StateObject、balls是@Published属性，修改后会自动触发视图刷新，让UI同步更新位置。

完整的可运行代码 #

这里给你贴出完整的修改后代码，方便直接测试：

import SwiftUI

let screenWidth = UIScreen.main.bounds.size.width
let screenHeight = UIScreen.main.bounds.size.height

struct SingleBall: Identifiable {
    var id = UUID()
    var position = CGPoint.zero
}

class BallStorage: ObservableObject {
    @Published var balls: [SingleBall] = [
        SingleBall(position: CGPoint(x: 110, y: 220)),
        SingleBall(position: CGPoint(x: 150, y: 120)),
        SingleBall(position: CGPoint(x: 200, y:160)),
        SingleBall(position: CGPoint(x: 200, y: 200))
    ]
}

// 补全你原来缺失的littleBall视图
struct littleBall: View {
    let id: UUID
    var body: some View {
        Circle()
            .fill(Color.blue)
            .frame(width: 40, height: 40)
    }
}

struct StartScreen: View {
    @StateObject var ballStorage = BallStorage()
    var body: some View {
        ZStack {
            ForEach(ballStorage.balls) { ball in
                littleBall(id: ball.id)
                    .position(ball.position)
                    .gesture(DragGesture()
                        .onChanged { gesture in
                            if let index = ballStorage.balls.firstIndex(where: { $0.id == ball.id }) {
                                ballStorage.balls[index].position = gesture.location
                            }
                        }
                    )
            }
        }
        .frame(width: screenWidth, height: screenHeight)
    }
}

struct test_Previews: PreviewProvider {
    static var previews: some View {
        StartScreen()
    }
}

另外补充一点：如果你之后需要支持删除球的功能，这个方案也完全兼容，因为id始终是唯一的，删除其他元素不会影响你对当前拖拽元素的定位。

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