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

【问题标题】：How to use NavigationLink for List view swipe action如何使用 NavigationLink 进行列表视图滑动操作
【发布时间】：2022-08-23 21:49:59
【问题描述】：

我想知道如何在下面的代码中将 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)
                }
        }
    }
}

标签： swiftui swiftui-navigationlink

【解决方案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"))
        }
    }
}

【讨论】：

如果我们不需要/不想要 NavigationLink 作为行视图怎么办？我有一行在正常触摸时不应导航（并且不应通过扩展显示导航克拉指示器），但希望能够滑动以显示编辑按钮，然后点击该按钮以进入编辑视图。