view - 如何使用 matchedGeometryEffect 在 SwiftUI 中转换 subview ？

Question

我有一些 SwapItem结构，每个都有一个 child SwapItemChild .然后，使用 ForEach SwiftUI，我想显示每个 SwapItem 的名称，称为项目 View ，还包含一个圆圈，其颜色为其各自的 SwapItemChild。 ，称为 subview 。随后，我想交换两个项目的 child ，并让各自的 child View 改变位置动画。这是受此效果的其他示例启发的 this extensive tutorial ，但不是特别是 children 的观点交换。

我尝试使用 matchedGeometryEffect 来做到这一点通过各自的 ID 识别每个 subview SwapItemChild .然而，这会导致动画跳动，只有顶部的 subview 向下移动，而底部的 subview 会立即跳到顶部。

功能示例代码如下。

// MARK: - Model
struct SwapItem: Identifiable {
    let id = UUID()
    let name: String
    var child: SwapItemChild
}

struct SwapItemChild: Identifiable {
    let id = UUID()
    let color: Color
}

class SwapItemStore: ObservableObject {
    @Published private(set) var items = [SwapItem(name: "Task 1", child: SwapItemChild(color: .red)),
                                         SwapItem(name: "Task 2", child: SwapItemChild(color: .orange))]
    
    func swapOuterChildren(){
        let tmpChild = items[0].child
        items[0].child = items[1].child
        items[1].child = tmpChild
    }
}

// MARK: - View
struct SwapTestView: View {
    @StateObject private var swapItemStore = SwapItemStore()
    @Namespace private var SwapViewNS
    
    var body: some View {
        VStack(spacing: 50.0) {
            Button(action: swapItemStore.swapOuterChildren){
                Text("Swap outer children")
                    .font(.title)
            }
            
            VStack(spacing: 150.0) {
                ForEach(swapItemStore.items){ item in
                    SwapTestItemView(item: item, ns: SwapViewNS)
                }
            }
        }
    }
}

struct SwapTestItemView: View {
    let item: SwapItem
    let ns: Namespace.ID
    
    var body: some View {
        HStack {
            Circle()
                .fill(item.child.color)
                .frame(width: 100, height: 100)
                .matchedGeometryEffect(id: item.child.id, in: ns)
                .animation(.spring())
            
            Text(item.name)
        }
    }
}

matchedGeometryEffect 的正确实现是什么？让这些 subview 无缝交换位置？

Answer 1

我已经遇到过这种问题，试试这个:

ForEach(swapItemStore.items, id: \.self.child.id)

另一种方式:

struct SwapItem: Identifiable, Hashable {
    let id = UUID()
    let name: String
    var child: SwapItemChild
}

struct SwapItemChild: Identifiable, Hashable {
    let id = UUID()
    let color: Color
}

与:

ForEach(swapItemStore.items, id: \.self)

参见:https://www.hackingwithswift.com/books/ios-swiftui/why-does-self-work-for-foreach