如何增大JavaFX ColorPicker调色板尺寸及弹窗颜色网格大小？

一、增大调色板弹窗的宽高 #

有两种常用实现方式：

1. 代码动态设置 #

借助ColorPicker的onShown事件，获取弹出容器后直接修改尺寸：

ColorPicker colorPicker = new ColorPicker();
colorPicker.setOnShown(event -> {
    // 获取调色板容器的父级Popup
    Popup popup = (Popup) colorPicker.lookup(".color-palette").getParent();
    // 自定义宽高，数值按需调整
    popup.setWidth(400);
    popup.setHeight(500);
});

2. CSS全局设置 #

在样式文件中直接为调色板容器指定偏好尺寸：

.color-palette {
    -fx-pref-width: 400px;  /* 弹窗宽度 */
    -fx-pref-height: 500px; /* 弹窗高度 */
}

二、增大颜色网格内的颜色块尺寸 #

通过CSS修改颜色单元格的宽高即可，还可调整间距优化显示效果：

/* 固定颜色块的尺寸 */
.color-palette .color-cell {
    -fx-min-width: 30px;
    -fx-min-height: 30px;
    -fx-max-width: 30px;
    -fx-max-height: 30px;
    /* 可选：调整颜色块之间的间距 */
    -fx-padding: 2px;
}

如果需要隐藏默认的网格线，可在.color-palette样式中添加：

.color-palette {
    -fx-grid-lines-visible: false;
}

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