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")
}
}
}
.listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: -8))
)Thanks in advance.
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.