如何在JavaFX中实现搜索结果节点的键盘上下导航？

要实现搜索结果节点的上下方向键导航，核心是跟踪当前选中项索引、确保搜索结果节点可接收焦点，以及正确处理键盘事件的传递与切换逻辑。以下是针对你的代码的具体改造步骤：

1. 控制器中添加状态变量 #

在UIController中添加变量跟踪当前选中的结果索引，以及标记判断是否从搜索框触发导航：

// 当前选中的搜索结果索引，初始为-1（未选中）
private int currentSelectedIndex = -1;
// 标记是否从搜索框按下方向键，用于首次聚焦结果
private boolean navigateFromSearchBox = false;

2. 修改搜索结果节点的可聚焦性 #

编辑search-song.fxml，将根VBox设置为可聚焦（默认VBox不可聚焦），同时可添加焦点样式便于用户识别：

<VBox fx:id="vboxSongSearch" 
      focusTraversable="true"  <!-- 新增：允许节点接收焦点 -->
      onKeyPressed="#onSearchedSongPress2" 
      onMouseClicked="#onSearchedSongClick" 
      prefWidth="183.0" 
      styleClass="search-result" 
      stylesheets="@../styles.css">

同时在CSS中添加焦点样式（可选但推荐）：

.search-result:focused {
    -fx-background-color: #f0f0f0; /* 选中时的背景色 */
    -fx-border-color: #2196F3; /* 选中边框 */
}

3. 改造搜索框的键盘事件处理 #

修改getText方法中的方向键逻辑，避免在异步任务回调中处理（任务完成时机和按键事件不同步），改为在搜索框的onKeyPressed中直接处理：

public void getText(KeyEvent event) throws IOException {
    KeyCode keyCode = event.getCode();
    // 先处理方向键逻辑
    if (keyCode == KeyCode.DOWN || keyCode == KeyCode.UP) {
        ObservableList<Node> results = vboxSong.getChildren();
        if (results.isEmpty()) return;
        
        navigateFromSearchBox = true;
        // 根据按键确定初始选中索引
        currentSelectedIndex = keyCode == KeyCode.DOWN ? 0 : results.size() - 1;
        selectResult(currentSelectedIndex);
        event.consume(); // 阻止事件继续传递
        return; // 方向键不触发搜索
    }

    // 原有的搜索逻辑保留
    String text = searchArea.getText();
    DatabaseMySQL db = new DatabaseMySQL();

    scrlpneSong.setVisible(true);
    scrlpneSong.setContent(vboxSong);

    Task<List<Songs>> task = new Task<>() {
        @Override
        protected List<Songs> call() throws Exception {
            return db.searchSongDetailsBySongName(text);
        }
    };

    task.setOnSucceeded(e -> {
        List<Songs> songList = task.getValue();
        vboxSong.getChildren().clear();
        currentSelectedIndex = -1; // 搜索完成后重置选中索引

        for (Songs song : songList) {
            try {
                Node node = FXMLLoader.load(Objects.requireNonNull(getClass().getResource("layouts/search-song.fxml")));
                // 绑定歌曲数据到节点（原逻辑保留）
                Label lblSongName = (Label) node.lookup("#searchResultSongName");
                Label lblISRC = (Label) node.lookup("#searchResultISRC");
                Label lblArtist = (Label) node.lookup("#searchResultArtist");
                lblSongName.setText(song.getSongName());
                lblISRC.setText(song.getISRC().trim());
                lblArtist.setText(song.getSinger().trim());
                
                vboxSong.getChildren().add(node);
            } catch (IOException ex) {
                ex.printStackTrace();
            }
        }
    });

    new Thread(task).start();
}

4. 实现结果列表的导航逻辑 #

添加通用的选中方法和结果列表的键盘事件处理：

// 选中指定索引的结果项，并自动滚动到可视区域
private void selectResult(int index) {
    ObservableList<Node> results = vboxSong.getChildren();
    if (index < 0 || index >= results.size()) return;

    // 取消上一个选中项的焦点（如果有）
    if (currentSelectedIndex >= 0 && currentSelectedIndex < results.size()) {
        results.get(currentSelectedIndex).setFocused(false);
    }

    currentSelectedIndex = index;
    Node selectedNode = results.get(currentSelectedIndex);
    selectedNode.requestFocus();
    
    // 自动滚动到选中项
    scrlpneSong.setVvalue(selectedNode.getLayoutY() / (vboxSong.getHeight() - scrlpneSong.getViewportBounds().getHeight()));
}

// 处理结果列表的键盘事件（绑定到vboxSong的onKeyPressed）
public void onSearchedSongPress(KeyEvent event) {
    ObservableList<Node> results = vboxSong.getChildren();
    if (results.isEmpty()) return;

    KeyCode keyCode = event.getCode();
    if (keyCode == KeyCode.DOWN) {
        // 循环导航：到最后一项后回到第一项
        int nextIndex = (currentSelectedIndex + 1) % results.size();
        selectResult(nextIndex);
        event.consume();
    } else if (keyCode == KeyCode.UP) {
        // 循环导航：到第一项后回到最后一项
        int prevIndex = (currentSelectedIndex - 1 + results.size()) % results.size();
        selectResult(prevIndex);
        event.consume();
    } else if (keyCode == KeyCode.ENTER) {
        // 处理选中项的确认逻辑（比如打开详情）
        handleResultSelection(currentSelectedIndex);
        event.consume();
    }
}

// 处理结果项的点击事件（绑定到search-song.fxml的onMouseClicked）
public void onSearchedSongClick(MouseEvent event) {
    Node clickedNode = (Node) event.getSource();
    currentSelectedIndex = vboxSong.getChildren().indexOf(clickedNode);
    handleResultSelection(currentSelectedIndex);
}

// 自定义的选中项处理逻辑（根据你的需求实现）
private void handleResultSelection(int index) {
    if (index < 0 || index >= vboxSong.getChildren().size()) return;
    // 这里可以从songList中获取对应歌曲，或者从节点中提取数据
    // 执行你的业务逻辑，比如跳转到详情页
}

关键注意点 #

• 异步任务与焦点同步：搜索完成后要重置选中索引，避免旧索引导致的错误。
• 事件消费：处理方向键后调用event.consume()，防止事件传递到其他控件（比如搜索框继续输入）。
• 滚动跟随：选中项超出可视区域时，自动调整ScrollPane的滚动位置，提升用户体验。
• 循环导航：支持从最后一项按向下键回到第一项，第一项按向上键到最后一项，符合用户习惯。

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