时间戳

首页 > 解决方案 > 如何在 SwiftUI 列表行中独立选择复选框按钮和 NavigationLink 到另一个视图

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

问题描述

我希望像待办事项列表一样制作一个列表，单元格有一个复选框和文本。我希望在选择列表单元格时，可以将视图转换为 detailView。同时我也可以选中复选框，但不要触发视图转换为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)


    }
}

标签： listbuttonswiftuinavigationview

解决方案

这与复选框图像上的手势配合得很好。两个按钮不起作用，因为每次点击都转到两个按钮。

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)
            }
        }
    }
}

推荐阅读