SwiftUI中如何通过滑动动作触发NavigationLink页面跳转？

问题分析 #

• 直接在闭包中初始化NavigationLink但未将其加入视图层级，导致SwiftUI无法识别跳转请求，出现"Result of 'NavigationLink<...>' initializer is unused"警告
• 代码存在语法错误（如.{EmptyView()}）、视图名称不统一（ListItemView和PhoneItemView混用）等问题

方法一：使用状态变量控制NavigationLink（兼容iOS13+） #

1. 修改ContentView，增加状态变量控制跳转

struct ContentView: View {
    @StateObject var viewModel = YourViewModel() // 替换为你的实际ViewModel
    @State private var shouldNavigate = false
    @State private var selectedItem: ListItemViewModel? // 存储选中的条目数据

    var body: some View {
        NavigationStack { // iOS16+用NavigationStack，iOS13-15替换为NavigationView
            List {
                ForEach(viewModel.data) { item in
                    ListItemView(vm: item, callHandler: { selectedItem in
                        print("swipe action tapped")
                        self.selectedItem = selectedItem
                        self.shouldNavigate = true
                    })
                }
            }
            // 全局隐藏的NavigationLink，由状态变量控制激活
            .background(
                NavigationLink(
                    destination: DetailView(item: selectedItem!),
                    isActive: $shouldNavigate,
                    label: { EmptyView() }
                )
            )
        }
    }
}

2. 修正ListItemView的语法错误

struct ListItemView: View {
    let vm: ListItemViewModel
    var callHandler: ((ListItemViewModel) -> Void)?
    var textHandler: ((ListItemViewModel) -> Void)?

    var body: some View { // 补上缺失的body属性
        HStack {
            Text("Click Me")
        }
        .swipeActions(allowsFullSwipe: false) {
            Button {
                callHandler?(vm) // 直接调用回调触发跳转逻辑
            } label: {
                Label("Go", systemImage: "text.bubble.fill")
            }
            .tint(.green)
        }
    }
}

// 修正扩展名称，与视图名称统一
private extension ListItemView {
    var callAction: () -> Void {
        return {
            callHandler?(vm)
        }
    }
}

方法二：使用NavigationStack的Path（iOS16+推荐） #

1. ContentView中用path管理导航栈

struct ContentView: View {
    @StateObject var viewModel = YourViewModel()
    @State private var navigationPath = NavigationPath()

    var body: some View {
        NavigationStack(path: $navigationPath) {
            List {
                ForEach(viewModel.data) { item in
                    ListItemView(vm: item, callHandler: { selectedItem in
                        print("swipe action tapped")
                        // 将选中条目加入导航路径
                        navigationPath.append(selectedItem)
                    })
                }
            }
            // 定义路径对应的跳转目标
            .navigationDestination(for: ListItemViewModel.self) { item in
                DetailView(item: item)
            }
        }
    }
}

2. ListItemView保持方法一中修正后的版本即可

关键说明 #

• 确保ListItemViewModel遵循Identifiable协议（适配ForEach），若未遵循，需在ForEach中显式指定id参数
• 方法二更贴合SwiftUI现代导航模式，无需额外维护状态变量，优先推荐iOS16及以上版本使用
• 原代码中ZStack内的无效NavigationLink可直接删除，无需通过透明视图隐藏

内容的提问来源于stack exchange，提问作者Sachinthana Aluvihare