在SwiftUI中，如何通过按钮点击在列表行（TableView Cell）中导航到详细视图？

Question

我有一个包含单元格的列表/表视图，每个单元格都包含有关给定项的详细信息以及一些按钮，例如编辑该项、显示该项的详细信息、显示给定项的子视图等。

现在，对于显示项目详细信息的情况，我尝试添加 NavigationLink ，但是现在如果有人在单元格上的任何地方点击，它就会移动到详细信息屏幕。

我不想在屏幕上的任何地方单击时都进入详细信息屏幕，我希望只有当某人在单元格中单击“显示详情”按钮时才推出详细信息屏幕。

- Mehul Thakkar

Answer 1

1. 在navigationLink上使用.hidden()修饰符，以防止列表项捕获它的动作。

2. 将列表项上的.buttonStyle从automatic改为其他样式，以防止其捕获按钮动作。(例如borderless)

工作演示

struct ContentView: View {
    @State var selectedTag: Int?

    var body: some View {
        NavigationView {
            List(1...10, id: \.self) { id in
                HStack {
                    Text("Item \(id: id)")
                    Spacer()
                    
                    Button("Show detail") { selectedTag = id }
                    .background(link(id))
                }.buttonStyle(.borderless) ///  ⚠️ on the item! **NOT** on the button!!!
            }
        }
    }
    
    func link(id: Int) -> some View {
        NavigationLink("",
            destination: Text("\(id) Selected"),
            tag: id,
            selection: $selectedTag
        ).hidden()
    }
}

- Mojtaba Hosseini

---

谢谢帮忙...SwiftUI让一些困难的事情变得简单，而简单的事情变得更加困难。 - Mehul Thakkar