0

I have a list inside a view. Inside the list, items are iterated through to populate the list. When you click on each list item, I want to navigate to another view.
This is working as expected but I want to have a Button represented by a circle in each list item that can be clicked independently without navigating to the second view. Right now, clicking the circle just takes me to 2nd view. How can I accomplish this?

var body: some View {
    NavigationView {
        List {
            ForEach(items) { item in
                NavigationLink(
                    destination: OtherView(name: "test"),
                    label: {
                       Text("Navigate")
                    })
                HStack {
                    Image("1")
                        .resizable()
                        .frame(width: 32.0, height: 32.0)
                    Button(action: addItem) {
                        Label("Add Item", systemImage: "circle")
                    }
                }

            }
        }
    }
}
mitchellOcavoos
  • 63
  • 6
  • Not sure but I think you should put the text, image, and button all into the navigation link with a HStack. and one thing that helped me in a similar problem is `.buttonStyle(PlainButtonStyle())` – Tony Zhang May 31 '21 at 14:19
  • Make a `RowView(item:item)` and but what you have inside your `ForEach` in there. Each `Item` will have a `RowView` and you can manipulate individually in there. – lorem ipsum May 31 '21 at 14:30

1 Answers1

1

You can not do this with List. You can use VStack or LazyVStack inside a ScrollView as an alternative solution

Hieu Dinh
  • 692
  • 5
  • 18