buttonswiftuiswiftui-listswiftui-navigationlinkswiftui-navigationstack

How to make a custom cell/row menu clickable (3 dots at top right) in a List with NavigationLink


I am trying to show popover when user click on custom cell/row menu in List. But every time the cell get the action and navigating to inside the details screen. Here is my code snippet. Also attached screenshot for reference.

    var body: some View {
        NavigationStack {
            ZStack {
                List {
                    Image("HeaderImage")
                        .resizable()
                        .frame(height: 150)
                        .listRowInsets(EdgeInsets())
                    ForEach((0..<8), id: \.self) { index in
                            NavigationLink(destination: Text("screen1")) {
                                CustomCellView()
                            }
                            NavigationLink(destination: Text("screen2")) {
                                CustomCellView(imageName: "paintpalette")
                            }
                            NavigationLink(destination: Text("screen3")) {
                                CustomCellView(imageName: "slider.horizontal.3")
                            }
                    }
                }
                .listStyle(.plain)
                .navigationBarTitle("Users")                    
            }
        }
    }

enter image description here

  1. Need the 3dot button action should come to main view to show the popover (and entire cell should not be clickable)
  2. Is there any best way to hide the right chevron (without using .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: -8)))

Thanks in advance.


Solution

  • Here is a my code snippet without using the NavigationLink for custom cell.

    @State var viewModel: UserListViewModel
    @State private var selectedUserId: UUID?
    init(viewModel: UserListViewModel) {
        self.viewModel = viewModel
    }
    
    var body: some View {
        NavigationStack {
            ZStack {
                List(viewModel.users ?? [], selection: $selectedUserId) {
                    CellView(user: $0)
                }
                .navigationDestination(item: $selectedUserId, destination: { key in
                    if let users = viewModel.users,
                       let index = users.firstIndex(where: { $0.id == key }) {
                        DetailView(user: users[index])
                    }
                    
                })
                .navigationBarTitle(Text("Users"))
            }
        }
    }
    

    Also, I have used

    .buttonStyle(PlainButtonStyle())

    to get button action (3dot button action on each cell) to show cell menu options.