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

Question

I'm trying to build a custom list where the user can select an entry and the row will expand and show a picker. This picker should update an object (TimeItem) which stores the time information.

However, I was not able to use Binding in the ForEach Loop with Picker and I don't know why. The error message in Xcode is "The compiler is unable to type-check this expression in reasonable time; try breaking up the expression into distinct sub-expressions".

I also tried to use ForEach(Array(items.enumerated()), id: \.1) instead of ForEach(items) to get the index of the current row but that would mess up the delete animation (but only sometimes?.).

I do not want to use the same Binding for each row (for ex. self.$selectedElement.minutes ) - every row should have its own Binding.

Does anybody know how to fix this issue? Thanks for helping!

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

That case when you should do what compiler said: break up expression (ie. that big view) into distinct sub-expressions (ie. smaller subviews)

Here is fixed components (tested with 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
            }
        }
    }
}