如何隐藏ColorPicker弹出框底部的辅助颜色

方法一：使用CSS样式 #

直接通过CSS选择器定位到辅助颜色色块，将其隐藏：

.color-picker-popup .color-palette .extra-color {
    -fx-display: none;
    -fx-managed: false;
}

-fx-display: none负责隐藏色块，-fx-managed: false会移除色块占据的空间，避免留下空白。你可以把这段样式添加到项目的CSS文件中，也可以通过代码直接设置给ColorPicker：

colorPicker.setStyle(".color-picker-popup .color-palette .extra-color {-fx-display: none; -fx-managed: false;}");

方法二：通过代码操作节点 #

借助ColorPicker的Skin获取弹出窗口内容，找到并移除辅助颜色节点：

ColorPicker colorPicker = new ColorPicker();

colorPicker.setOnShown(event -> {
    ColorPickerSkin skin = (ColorPickerSkin) colorPicker.getSkin();
    Node popupContent = skin.getPopupContent();
    // 查找所有辅助颜色色块并批量移除
    List<Node> extraColors = popupContent.lookupAll(".extra-color").stream().toList();
    Node colorPalette = popupContent.lookup(".color-palette");
    if (colorPalette instanceof Pane) {
        ((Pane) colorPalette).getChildren().removeAll(extraColors);
    }
});

注意：必须在弹出框显示后（通过setOnShown监听事件）执行这段代码，否则无法定位到目标节点。

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