SwiftUI嵌套List中NavigationLink点击异常：仅触发外层行无法导航

问题场景 #

需要实现层级任务列表：

• 外层为任务列表，每个任务下包含子任务列表
• 子任务通过NavigationLink跳转至SubtaskDetailView
• 任务列表与子任务列表均需支持.onDelete和.onMove操作

但当前实现中，嵌套在List内的NavigationLink无法响应点击，仅点击外层任务行时才会触发导航。

问题原因 #

嵌套的List会导致手势优先级冲突：外层List的行默认带有可点击手势，会拦截内层NavigationLink的点击事件；同时SwiftUI的List组件在嵌套时，内部交互逻辑会被外层容器干扰。

解决方案 #

移除内层的List，改用VStack承载任务标题与子任务，同时调整布局样式保持列表视觉效果，优化ForEach的使用方式以绑定数据。

修正后的完整代码 #

import SwiftUI

struct ContentView: View {
    @State private var tasks: [Task] = [
        Task(name: "任务1", subtasks: [
            Subtask(name: "子任务1", details: "子任务1详情"),
            Subtask(name: "子任务2", details: "子任务2详情")
        ]),
        Task(name: "任务2", subtasks: [
            Subtask(name: "子任务1", details: "子任务1详情"),
            Subtask(name: "子任务2", details: "子任务2详情")
        ]),
        Task(name: "任务3", subtasks: [
            Subtask(name: "子任务1", details: "子任务1详情"),
            Subtask(name: "子任务2", details: "子任务2详情")
        ])
    ]
    
    var body: some View {
        NavigationView {
            List {
                // 使用绑定数组的ForEach，更符合SwiftUI最佳实践
                ForEach($tasks) { $task in
                    TaskView(task: $task)
                }
                .onDelete(perform: deleteTask)
                .onMove(perform: moveTask)
            }
            .navigationTitle("任务列表")
            .toolbar {
                EditButton()
            }
        }
    }
    
    private func deleteTask(at offsets: IndexSet) {
        tasks.remove(atOffsets: offsets)
    }
    
    private func moveTask(from source: IndexSet, to destination: Int) {
        tasks.move(fromOffsets: source, toOffset: destination)
    }
}

struct TaskView: View {
    @Binding var task: Task
    
    var body: some View {
        // 用VStack替代内层List，避免手势冲突
        VStack(alignment: .leading, spacing: 8) {
            Text(task.name)
                .font(.headline)
                .padding(.bottom, 4)
            
            // 直接绑定子任务数组，简化索引操作
            ForEach($task.subtasks) { $subtask in
                NavigationLink(destination: SubtaskDetailView(details: subtask.details)) {
                    Text(subtask.name)
                        // 让子任务项充满宽度，保持List行的交互体验
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding(.vertical, 8)
                }
            }
            .onDelete(perform: { indexSet in
                task.subtasks.remove(atOffsets: indexSet)
            })
            .onMove(perform: { indices, newOffset in
                task.subtasks.move(fromOffsets: indices, toOffset: newOffset)
            })
        }
        .padding(.vertical, 8)
        // 移除外层List行的默认内边距，让内容与外层列表对齐
        .listRowInsets(EdgeInsets())
    }
}

struct SubtaskDetailView: View {
    let details: String
    
    var body: some View {
        Text(details)
            .navigationTitle("子任务详情")
    }
}

struct Task: Identifiable {
    let id = UUID()
    var name: String
    var subtasks: [Subtask]
}

struct Subtask: Identifiable {
    let id = UUID()
    var name: String
    var details: String
}

关键修改点 #

1. 移除嵌套List：将TaskView中的内层List替换为VStack，彻底解决手势冲突问题
2. 优化ForEach绑定：使用ForEach($tasks)和ForEach($task.subtasks)直接绑定数据，避免手动处理索引，代码更简洁且不易出错
3. 调整布局样式：给子任务的NavigationLink添加.frame(maxWidth: .infinity)确保点击区域充满整行，同时用.listRowInsets(EdgeInsets())消除外层列表行的默认内边距，保持视觉一致性
4. 保留编辑功能：.onDelete和.onMove修饰符直接作用于ForEach，依然支持任务与子任务的删除、移动操作

内容的提问来源于stack exchange，提问作者Albraa Adil