SwiftUI中List嵌套ForEach时如何实现行选中功能？

核心问题分析 #

你的代码出现空白和无法选中的原因主要有两点：

• NavigationLink与编辑模式的冲突：默认的NavigationLink在列表进入编辑模式后会干扰布局，导致列表项无法正常显示或选中。
• 代码结构错误：你的toolbar放置位置不正确，且NavigationLink的label部分未完成，存在语法问题。

具体解决方案 #

方案1：使用navigationDestination替代直接嵌套NavigationLink #

这种方式能彻底避免导航链接与编辑模式的冲突，同时满足必须用ForEach的要求：

import SwiftUI

struct Workout: Identifiable { // 确保Workout遵循Identifiable协议，或在ForEach中指定id参数
    let id = UUID()
    var name: String
    // 其他业务属性
}

struct ContentView: View {
    @State private var selection: Workout?
    @State private var workouts: [Workout] = [
        Workout(name: "晨跑30分钟"),
        Workout(name: "力量训练1小时")
    ]
    
    var body: some View {
        NavigationStack {
            List(selection: $selection) {
                Section(header: Text("Recent Workouts")) {
                    ForEach(workouts) { workout in
                        // 用普通文本作为列表项主体，导航逻辑交给navigationDestination处理
                        Text(workout.name)
                    }
                }
            }
            .navigationTitle("Workouts")
            .toolbar {
                EditButton()
            }
            // 绑定导航目标，通过selection触发跳转
            .navigationDestination(item: $selection) { workout in
                EditWorkoutView(workout: workout)
                    .navigationBarBackButtonHidden(true)
            }
        }
    }
}

struct EditWorkoutView: View {
    let workout: Workout
    var body: some View {
        Text("编辑：\(workout.name)")
            .navigationTitle("编辑训练")
    }
}

方案2：保留NavigationLink但调整布局方式 #

如果一定要在ForEach里保留NavigationLink，可以将其放在列表项的背景或overlay中，避免干扰编辑模式的选中交互：

List(selection: $selection) {
    Section(header: Text("Recent Workouts")) {
        ForEach(workouts) { workout in
            // 先放置可选中的文本作为列表项主体
            Text(workout.name)
                .overlay(
                    // 将NavigationLink放在overlay中，设置透明不影响视觉和选中交互
                    NavigationLink(destination: {
                        EditWorkoutView(workout: workout)
                            .navigationBarBackButtonHidden(true)
                    }, label: {
                        EmptyView()
                    })
                    .opacity(0)
                )
                .tag(workout) // 给列表项绑定对应tag，配合selection完成选中关联
        }
    }
}
.navigationTitle("Workouts")
.toolbar { EditButton() }

关键注意事项 #

• 确保Workout类型遵循Identifiable协议，或者在ForEach中显式指定id: \.id参数，否则ForEach无法正确识别列表项。
• toolbar必须放在NavigationStack或List的外部层级，不能嵌套在ForEach或Section内部。
• 当使用List(selection:)时，列表项需要通过.tag()绑定对应的选中值（单个元素绑定元素本身，多选则绑定元素集合）。

内容的提问来源于stack exchange，提问作者Milan Labus