SwiftUI 自定义 List 不能在 ForEach 中使用 Binding

Question

我正在尝试构建一个自定义列表，用户可以在其中选择一个条目，该行将展开并显示一个选择器。这个选择器应该更新一个存储时间信息的对象（TimeItem）。

但是，我无法在 ForEach 循环中通过 Picker 使用绑定，我不知道为什么。 Xcode 中的错误消息是“编译器无法在合理的时间内对该表达式进行类型检查；请尝试将表达式分解为不同的子表达式”。

我还尝试使用ForEach(Array(items.enumerated()), id: \.1) 而不是ForEach(items) 来获取当前行的索引，但这会弄乱删除动画（但只是有时！？）。

我不想为每一行使用相同的绑定（例如self.$selectedElement.minutes） - 每行都应该有自己的绑定。

有人知道如何解决这个问题吗？感谢您的帮助！

class TimeItem: Identifiable, Equatable, ObservableObject {
    static func == (lhs: TimeItem, rhs: TimeItem) -> Bool {
        lhs.id == rhs.id
    }

    let id = UUID()
    @Published var minutes: Int = 0
    @Published var seconds: Int = 30
}

struct ContentView: View {
    @State var items = [TimeItem]()
    @State var selectedElement: TimeItem?

    var body: some View {
        ScrollView(){
            VStack{
                ForEach(items){ elem in
                    
                    ZStack{
                        
                        Rectangle()
                            .cornerRadius(12)
                            .frame(height: elem == selectedElement ? 120 : 40)
                            .foregroundColor(Color.gray.opacity(0.15))

                        Text("\(elem.minutes)")
                            .opacity(elem == selectedElement ? 0 : 1)
                            .transition(AnyTransition.scale)
                        
                        if(elem == selectedElement){
                            HStack{
                                Picker(selection: elem.$minutes, label: Text("")){ // <- I can't use Binding with "elem"
                                ForEach(0..<60){ i in
                                    Text("\(i)")
                                }
                            }
                            .frame(width: 120)
                            .clipped()
                            
                                Picker(selection: .constant(0), label: Text("")){
                                    ForEach(0..<60){ i in
                                        Text("\(i)")
                                    }
                                }
                                .frame(width: 120)
                                .clipped()
                            }
                            .frame(height: 120)
                            .clipped()
                        }
                        

                        HStack{
                            Button(action: {
                                self.items.removeAll { $0.id == elem.id }
                            })
                            {
                                Image(systemName: "minus.circle.fill")
                                    .foregroundColor(Color.red)
                                    .font(.system(size: 22))
                                    .padding(.leading, 10)
                            }
                            Spacer()
                        }

                    }
                    .padding(.horizontal)
                    .padding(.top)
                    .contentShape(Rectangle())
                    .onTapGesture {
                        withAnimation(.spring()){
                            self.selectedElement = elem
                        }
                    }
                }
            }
            Spacer()

            Button(action: {
                self.items.append(TimeItem())
            })
            {
                ZStack{
                    Rectangle()
                        .cornerRadius(12)
                        .frame(height: 40)
                        .foregroundColor(Color.gray.opacity(0.15))

                    Text("Add")

                    HStack{
                        Image(systemName: "plus.circle.fill")
                            .foregroundColor(Color.green)
                            .font(.system(size: 22))
                            .padding(.leading, 10)

                        Spacer()
                    }
                }.padding()
            }
        }.animation(.spring(), value: items)
    }
}

Answer 1

你应该按照编译器所说的去做：将表达式（即大视图）分解为不同的子表达式（即较小的子视图）

这里是固定组件（使用 Xcode 11.4 / iOS 13.4 测试）

struct ContentView: View {
    @State var items = [TimeItem]()
    @State var selectedElement: TimeItem?

    var body: some View {
        ScrollView(){
            VStack{
                ForEach(items){ elem in
                    ItemRowView(elem: elem, selectedElement: self.$selectedElement){
                        self.items.removeAll { $0.id == elem.id }
                    }
                }
            }
            Spacer()
            AddItemView {
                self.items.append(TimeItem())
            }
        }.animation(.spring(), value: items)
    }
}

struct SelectedElementView: View {
    @ObservedObject var elem: TimeItem

    var body: some View {
        HStack{
            Picker(selection: $elem.minutes, label: Text("")){
                ForEach(0..<60){ i in
                    Text("\(i)")
                }
            }
            .frame(width: 120)
            .clipped()

            Picker(selection: .constant(0), label: Text("")){
                ForEach(0..<60){ i in
                    Text("\(i)")
                }
            }
            .frame(width: 120)
            .clipped()
        }
        .frame(height: 120)
        .clipped()
    }
}

struct AddItemView: View {
    let action: ()->()
    var body: some View {
        Button(action: action)
        {
            ZStack{
                Rectangle()
                    .cornerRadius(12)
                    .frame(height: 40)
                    .foregroundColor(Color.gray.opacity(0.15))

                Text("Add")

                HStack{
                    Image(systemName: "plus.circle.fill")
                        .foregroundColor(Color.green)
                        .font(.system(size: 22))
                        .padding(.leading, 10)

                    Spacer()
                }
            }.padding()
        }
    }
}

struct ItemRowView: View {
    @ObservedObject var elem: TimeItem
    @Binding var selectedElement: TimeItem?
    let action: ()->()

    var body: some View {
        ZStack{

            Rectangle()
                .cornerRadius(12)
                .frame(height: elem == selectedElement ? 120 : 40)
                .foregroundColor(Color.gray.opacity(0.15))

            Text("\(elem.minutes)")
                .opacity(elem == selectedElement ? 0 : 1)
                .transition(AnyTransition.scale)

            if(elem == selectedElement){
                SelectedElementView(elem: elem)
            }


            HStack{
                Button(action: action)
                {
                    Image(systemName: "minus.circle.fill")
                        .foregroundColor(Color.red)
                        .font(.system(size: 22))
                        .padding(.leading, 10)
                }
                Spacer()
            }

        }
        .padding(.horizontal)
        .padding(.top)
        .contentShape(Rectangle())
        .onTapGesture {
            withAnimation(.spring()){
                self.selectedElement = self.elem
            }
        }
    }
}