如何在SwiftUI中为List指定导航用的键盘快捷键？

要实现无需List先获取焦点即可通过键盘快捷键导航上下项的需求，核心思路是通过绑定List的选中状态，结合全局生效的键盘快捷键来修改选中索引，同时处理边界逻辑确保导航合法。以下是具体实现方案：

核心实现代码 #

import SwiftUI

struct ContentView: View {
    // 示例列表数据
    let items = ["条目1", "条目2", "条目3", "条目4", "条目5"]
    // 绑定List选中项
    @State private var selectedItem: String? = "条目1"
    // 可选：绑定编辑器焦点状态，用于场景还原
    @FocusState private var isEditorFocused: Bool
    
    // 计算当前选中项的索引
    private var selectedIndex: Int? {
        items.firstIndex(of: selectedItem ?? "")
    }
    
    var body: some View {
        NavigationSplitView {
            List(items, selection: $selectedItem) { item in
                Text(item)
            }
        } detail: {
            TextField("编辑条目", text: Binding(
                get: { selectedItem ?? "" },
                set: {
                    guard let index = selectedIndex else { return }
                    // 这里注意：如果是可变数组，直接修改对应位置元素；不可变数组需调整数据源逻辑
                    // items[index] = $0
                }
            ))
            .focused($isEditorFocused)
            .padding()
        }
        // 绑定全局快捷键：Command+上箭头导航上一项
        .keyboardShortcut(.upArrow, modifiers: .command) {
            navigateToPrevious()
        }
        // 绑定全局快捷键：Command+下箭头导航下一项
        .keyboardShortcut(.downArrow, modifiers: .command) {
            navigateToNext()
        }
    }
    
    // 导航至前一项，处理边界逻辑
    private func navigateToPrevious() {
        guard let currentIndex = selectedIndex else { return }
        let newIndex = max(0, currentIndex - 1)
        selectedItem = items[newIndex]
        // 自动滚动到选中项，提升视觉体验
        withAnimation {
            ScrollViewReader { proxy in
                proxy.scrollTo(newIndex)
            }
        }
    }
    
    // 导航至下一项，处理边界逻辑
    private func navigateToNext() {
        guard let currentIndex = selectedIndex else { return }
        let newIndex = min(items.count - 1, currentIndex + 1)
        selectedItem = items[newIndex]
        // 自动滚动到选中项
        withAnimation {
            ScrollViewReader { proxy in
                proxy.scrollTo(newIndex)
            }
        }
    }
}

关键细节说明 #

1. 全局快捷键绑定：将快捷键附加在顶层的NavigationSplitView上，确保快捷键在整个视图层级内都能触发，无需List先获得焦点。
2. 边界处理：通过max(0, ...)和min(items.count-1, ...)确保索引不会越界，避免数组访问错误。
3. 自动滚动：借助ScrollViewReader实现选中项自动滚动到可视区域，优化用户体验。
4. 快捷键组合：示例使用Command+上下箭头，可根据需求修改修饰符（如换成Option或Control），避免与系统默认快捷键冲突。

可选：添加菜单栏支持 #

如果是macOS应用，可通过CommandGroup将导航操作添加到菜单栏，同时保留键盘快捷键：

// 在NavigationSplitView的修饰符中添加
.commandGroup(replacing: .navigation) {
    Button("上一条目") {
        navigateToPrevious()
    }
    .keyboardShortcut(.upArrow, modifiers: .command)
    
    Button("下一条目") {
        navigateToNext()
    }
    .keyboardShortcut(.downArrow, modifiers: .command)
}

内容的提问来源于stack exchange，提问作者Philippe-André Lorin