JavaFX：点击外部时取消ListView选中状态的解决方案

问题背景 #

我在JavaFX场景中使用了ListView、TextArea、Button、Label等控件，已通过CSS自定义样式。当前存在问题：选中ListView的项后，点击Label这类非焦点控件或场景空白区域时，选中项仍保持白色文本的选中样式；仅点击TextArea时，选中项会恢复绿色文本的未选中样式。需求是：点击ListView外部任意区域（控件或空白），都让选中项显示为未选中状态。

现有CSS代码 #

.listViewPerks {
    -fx-control-inner-background: black;
    -fx-background-color: #000000;
    -fx-selection-bar: transparent;
    -fx-font-family: "Fallout Classic Dialog";
    -fx-alignment: center-left;
    -fx-font-size: 10;
    -fx-background-radius: 0;
    -fx-font-smoothing-type: grey;
}

.listViewPerks .list-cell {
    -fx-text-fill: black;
}

.listViewPerks .list-cell:filled {
    -fx-text-fill: #38FB00;
}

.listViewPerks:focused .list-cell:filled:selected:focused {
    -fx-text-fill: white;
}

.list-cell:filled:selected:focused,
.list-cell:filled:selected {
    -fx-background-color: transparent;
}

之前尝试的无效方案 #

曾监听场景焦点所有者属性，但点击Label时无法触发：

App.getScene().focusOwnerProperty().addListener((prop, oldNode, newNode) -> {
    System.out.println("App.getScene().focusOwnerProperty() -> " + prop + " / " + oldNode + " / " + newNode);
});

解决方案 #

方案一：CSS调整（保留选中状态但切换样式）

核心思路是：仅当ListView拥有焦点时，选中项才显示白色文本；当ListView失焦时，强制选中项恢复绿色文本。修改后的CSS如下：

.listViewPerks {
    -fx-control-inner-background: black;
    -fx-background-color: #000000;
    -fx-selection-bar: transparent;
    -fx-font-family: "Fallout Classic Dialog";
    -fx-alignment: center-left;
    -fx-font-size: 10;
    -fx-background-radius: 0;
    -fx-font-smoothing-type: grey;
}

.listViewPerks .list-cell {
    -fx-text-fill: black;
}

.listViewPerks .list-cell:filled {
    -fx-text-fill: #38FB00;
}

/* 仅ListView获焦时，选中项显示白色 */
.listViewPerks:focused .list-cell:filled:selected {
    -fx-text-fill: white;
}

/* ListView失焦时，选中项强制恢复绿色 */
.listViewPerks:non-focused .list-cell:filled:selected {
    -fx-text-fill: #38FB00;
}

.list-cell:filled:selected:focused,
.list-cell:filled:selected {
    -fx-background-color: transparent;
}

说明：使用:non-focused伪类匹配失焦状态的ListView，覆盖选中项的文本颜色，这样不管点击空白还是非焦点控件，只要ListView失焦，选中项就会变回未选中样式。

方案二：代码实现（直接清空选中状态）

如果需要彻底取消选中状态（而非仅切换样式），可以给场景添加鼠标点击事件，判断点击区域不在ListView内时，清空选中项：

// 替换为你的ListView实例
ListView<?> yourListView = ...;
Scene scene = yourListView.getScene();

// 添加场景鼠标点击事件过滤器
scene.addEventFilter(MouseEvent.MOUSE_PRESSED, event -> {
    Node targetNode = (Node) event.getTarget();
    boolean isClickInsideListView = false;
    
    // 向上遍历节点树，判断点击目标是否属于ListView层级
    while (targetNode != null) {
        if (targetNode == yourListView) {
            isClickInsideListView = true;
            break;
        }
        targetNode = targetNode.getParent();
    }
    
    // 点击外部时清空选中项
    if (!isClickInsideListView) {
        yourListView.getSelectionModel().clearSelection();
    }
});

说明：此方法通过捕获所有场景内的鼠标点击，判断点击位置是否在ListView内部，外部点击直接清空选中状态。之前监听焦点所有者失效是因为Label等控件不会获取焦点，而鼠标事件可以覆盖所有点击场景。

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