如何在 SwiftUI 列表行中 select 复选框按钮和 NavigationLink 独立到另一个视图

Question

我希望做一个像待办事项列表一样的列表，单元格有一个复选框和文本。我希望当列表单元格 selected 时，视图可以转换为 detailView。同时我也可以 select 复选框，但不会触发视图转换为 detailView。

我去掉了List{}，代码运行没问题，但是List属性和方法不能用了。所以我打算编写一个客户列表视图。但我认为这不是好方法。所以如果还是找不到好的制作方法，我可能最后会这样实现。

NavigationView {
     VStack {   
        List {
                 ForEach(todayDietModel.todayDietItems) { item in
                     NavigationLink(destination: DietItemDetailView()) {
                            TodayDietRow(todayDietItem: item)
                                .animation(.spring())
                        }
                    }
                }

            }
            .frame(width: 352, height: 400)
            .background(Color.white)
            .cornerRadius(16)

}


struct TodayDietRow: View {
   @State var isFinished: Bool = false

    var body: some View {
        HStack(spacing: 20.0) {
            Button(action: {self.isFinished.toggle()}) {
                if self.isFinished {
                    Image("icon_checked_s001")
                        .resizable()
                        .renderingMode(.original)
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 24, height: 24)
                } else {
                    Image("icon_unchecked_s001")
                        .resizable()
                        .frame(width: 24, height: 24)
                }

            }
            .padding(.leading, 10)


            Text("DietName")
                .font(.system(size:13))
                .fontWeight(.medium)
                .foregroundColor(Color.black)   

        }
        .frame(width: 327, height: 48)


    }
}

Answer 1

这对复选框图像上的手势非常有效。两个按钮不起作用，因为每次点击都转到两个按钮。

struct TodayTodoView2: View {
    @ObservedObject var todayDietModel = TodayDietModel()

    func image(for state: Bool) -> Image {
        return state ? Image(systemName: "checkmark.circle") : Image(systemName: "circle")
    }

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach($todayDietModel.todayDietItems) { (item: Binding<TodayDietItem>) in
                        HStack{
                            self.image(for: item.value.isFinished).onTapGesture {
                                item.value.isFinished.toggle()
                            }
                            NavigationLink(destination: DietItemDetailView2(item: item)) {
                                Text("DietNamee \(item.value.dietName)")
                                    .font(.system(size:13))
                                    .fontWeight(.medium)
                                    .foregroundColor(Color.black)
                            }
                        }
                    }
                }
                .background(Color.white)
            }
        }
    }
}

如何在 SwiftUI 列表行中 select 复选框按钮和 NavigationLink 独立到另一个视图

How to select checkbox button and NavigationLink to another view independently in SwiftUI List row

list

button

swiftui

navigationview