如何使用 NavigationLink 进行列表视图滑动操作

Question

我想知道如何将 NavigationLink 放入下面代码中的 swipeActions 部分。代码本身的编译没有任何问题，但是当我点击“编辑”链接时没有任何反应。我的目的是通过点击“编辑”来显示另一个视图。谢谢

var body: some View {
    List {
        ForEach(processes, id: \.id) { process in
            NavigationLink(process.name!, destination: MeasurementsView(procID: process.id!, procName: process.name!))
                .swipeActions() {
                    Button("Delete") {
                        deleteProcess = true
                    }.tint(.red)
                    NavigationLink("Edit", destination: ProcessView(procID: process.id!, procName: process.name!)).tint(.blue)
                }
        }
    }
}

Answer 1

它不起作用，因为swipeActions上下文超出了NavigationView。相反，我们可以NavigationLink根据操作使用相同的条件导航。

这是可能方法的简化演示 - 使目的地成为有条件的并使用链接的编程激活。

使用 Xcode 13.2 / iOS 15.2 进行测试

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(0..<2, id: \.id) {
                    // separate into standalone view for better
                    // state management
                    ProcessRowView(process: $0)
                }
            }
        }
    }
}

struct ProcessRowView: View {
    enum Action {
        case view
        case edit
    }
    @State private var isActive = false
    @State private var action: Action?
    let process: Int

    var body: some View {
        // by default navigate as-is
        NavigationLink("Item: \(process)", destination: destination, isActive: $isActive)
            .swipeActions() {
                Button("Delete") {

                }.tint(.red)
                Button("Edit") {
                    action = .edit    // specific action
                    isActive = true   // activate link programmatically
                }.tint(.blue)
            }
            .onChange(of: isActive) {
                if !$0 {
                    action = nil  // reset back
                }
            }
    }

    @ViewBuilder
    private var destination: some View {
        // construct destination depending on action
        if case .edit = action {
            Text("ProcessView")
        } else {
            // just to demo different type destinations
            Color.yellow.overlay(Text("MeasurementsView"))
        }
    }
}