SwiftUI(macOS)：如何用键盘箭头循环滚动ScrollView中的项

当然可以实现这个功能，你需要手动管理选中状态、监听键盘事件、处理循环逻辑，同时让ScrollView自动滚动到选中项。以下是完整的实现方案：

核心实现思路 #

1. 维护选中项的索引状态，用于高亮和定位
2. 让ScrollView获取焦点，确保能接收键盘事件
3. 监听左右箭头按键，更新选中索引并处理循环逻辑
4. 通过ScrollViewReader自动滚动到选中的项
5. 为每个子视图添加可聚焦属性，关联选中状态实现高亮

完整代码示例 #

import SwiftUI

struct HorizontalScrollableItemsView: View {
    let items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6"]
    @State private var selectedIndex = 0
    @FocusState private var isScrollViewFocused: Bool

    var body: some View {
        VStack {
            ScrollView(.horizontal) {
                ScrollViewReader { proxy in
                    HStack(spacing: 16) {
                        ForEach(items.indices, id: \.self) { index in
                            // 自定义子视图，根据选中状态切换样式
                            Text(items[index])
                                .padding(.vertical, 8)
                                .padding(.horizontal, 16)
                                .background(selectedIndex == index ? Color.blue : Color.gray.opacity(0.2))
                                .foregroundColor(selectedIndex == index ? .white : .black)
                                .cornerRadius(8)
                                .focusable()
                                .id(index)
                                .onTapGesture {
                                    selectedIndex = index
                                    isScrollViewFocused = true
                                }
                        }
                    }
                    .padding()
                    .onChange(of: selectedIndex) { newIndex in
                        // 自动滚动到选中项
                        proxy.scrollTo(newIndex, anchor: .center)
                    }
                }
            }
            .focused($isScrollViewFocused)
            .onKeyPress(.leftArrow) {
                // 左箭头循环逻辑
                selectedIndex = selectedIndex == 0 ? items.count - 1 : selectedIndex - 1
                return .handled
            }
            .onKeyPress(.rightArrow) {
                // 右箭头循环逻辑
                selectedIndex = selectedIndex == items.count - 1 ? 0 : selectedIndex + 1
                return .handled
            }
            .onAppear {
                // 初始让ScrollView获取焦点
                isScrollViewFocused = true
            }
        }
        .frame(height: 100)
    }
}

struct HorizontalScrollableItemsView_Previews: PreviewProvider {
    static var previews: some View {
        HorizontalScrollableItemsView()
    }
}

关键部分说明 #

• @FocusState：确保ScrollView处于焦点状态，这样才能接收键盘事件；初始加载和点击子视图时，都会主动激活焦点
• ScrollViewReader：通过proxy.scrollTo方法，在选中索引变化时自动将对应项滚动到视图中心
• onKeyPress：监听左右箭头按键，处理循环切换逻辑——选中第一个项时按左箭头切换到最后一个，选中最后一个时按右箭头切换到第一个
• 子视图高亮：通过selectedIndex判断当前项是否选中，切换背景色和文字色实现高亮效果
• .focusable()：让每个子视图具备可聚焦能力，配合焦点状态确保键盘导航的连贯性

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