SwiftUI列表项移动后可见性状态显示异常求助

你遇到的问题核心在于SwiftUI的View复用机制和状态管理不当：

• 你用ForEach(0..<plots.count, id: \.self)基于索引遍历数组，当元素交换位置时，SwiftUI会认为索引对应的View没有变化，直接复用原有PlotView实例。
• PlotView内的@State private var visible是视图内部状态，仅在onAppear时同步一次plot.visible，但View复用时不会再次触发onAppear，导致显示状态与plot模型的实际visible值脱节。

1. 让Plot遵循Identifiable协议 #

给Plot添加唯一标识，让SwiftUI能精准识别每个元素，避免View复用错误：

class Plot: Equatable, Identifiable {
    let id = UUID() // 添加唯一ID
    static func == (lhs: ContentView.Plot, rhs: ContentView.Plot) -> Bool {
        lhs.id == rhs.id // 用ID判断元素相等
    }
    
    internal init(index: Int, visible: Bool = true) {
        self.index = index
        self.visible = visible
    }
    
    let index: Int
    var visible: Bool = true
}

2. 用@Binding替代@State同步状态 #

直接将PlotView的可见性状态绑定到plot模型的visible属性，确保视图与模型状态实时同步：

struct PlotView: View {
    @Binding var plot: Plot // 改为Binding类型
    
    struct Delegate {
        let moveDown: ()->Void
        let canMoveDown: ()->Bool
    }
    
    let delegate: Delegate
    
    var body: some View {
        HStack {
            Text("PLOT \(plot.index)")
            
            Button(action: {
                plot.visible.toggle() // 直接修改模型状态
            }, label: {
                Image(systemName: "eye.circle" + (plot.visible ? ".fill" : "")) // 直接读取模型状态
            })
            
            Button(action: {
                delegate.moveDown()
            }, label: {
                Image(systemName: "chevron.down.circle")
            })
            .disabled(!delegate.canMoveDown())
        }
        // 移除原有的onAppear和onChange，Binding会自动同步状态
    }
}

3. 调整ForEach遍历方式 #

基于Plot元素本身遍历，而非索引，让SwiftUI正确跟踪每个元素的位置变化：

var body: some View {
    VStack {
        ForEach($plots) { $plot in // 使用绑定数组遍历元素
            PlotView(plot: $plot, delegate: .init(moveDown: {
                if let currentIndex = plots.firstIndex(where: { $0.id == plot.id }) {
                    if currentIndex < plots.count - 1 {
                        plots.swapAt(currentIndex, currentIndex + 1)
                    } else {
                        plots.insert(plots.removeLast(), at: 0)
                    }
                }
            }, canMoveDown: {
                !plots.isEmpty
            }))
        }

        Button(action: {
            plots.append(.init(index: plots.count))
        }, label: {
            Image(systemName: "plus.circle")
        })
    }
}

修改完成后，修改PLOT 1的可见性并向下移动时，视图会正确显示每个Plot的实际可见状态，不会出现显示与模型不一致的问题。

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