如何更改 JFoenix 拾色器库的 CSS 样式？

Question

我正在使用 JavaFX 和 Scene Builder 在我的应用程序中实现一些功能

我可以在点击 JFoenix 颜色选择器时选择一种颜色，然后将这种颜色应用到我的标签背景中

我让 JFOenix 拾色器看起来像一个图标。我已将拾色器的标准外观更改为我的图像

问题#1：第一次启动程序时，拾色器完全被白色填充，然后当我将鼠标移到它上面时，它看起来像我的图标。

问题 #2：当我单击具有拾色器的图标时，波纹效果有效，但单击拾色器时不需要任何波纹效果或动画

问题 #3：JFoenix 拾色器也将选择的颜色应用到它自己的背景上，当我再次将鼠标移到它上面时，它的外观又变成了图标图像

问题#4：当拾色器放在堆栈窗格中时拾色器对话框 window 仅当我单击图标左侧时出现，看起来拾色器图标的右侧被禁用，但我需要拾色器对话框 window 当我点击拾色器图标的任何部分时出现

我正在搜索 JFoniex 拾色器的 CSS 个文件，但是 CSS 中没有任何文档说明如何正确自定义拾色器。

请尽可能地帮助我

*我有一个想法使用切换按钮（我知道如何根据自己的需要自定义它）并将拾色器放在这个切换按钮后面并使不透明度为 0。但我不知道如何制作拾色器当我单击切换按钮时，对话框 window 打开。有什么想法吗？

我使用单击拾色器时调用的方法为标签的背景填充颜色。

控制器class:

@FXML  private Label category1;
@FXML  private JFXColorPicker colorPickerCategory;

@FXML
  void changeCategoryColor(ActionEvent event) {

    Color selectedColor = colorPickerCategory.getValue();
    category1.setBackground(new Background(new BackgroundFill(Paint.valueOf(selectedColor.toString()), CornerRadii.EMPTY, Insets.EMPTY)));

  }

CSS:

.jfx-color-picker .color-box {
    -fx-background-image: url("resources/palette.png");
    -fx-background-color: transparent;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-size: contain;
}


.jfx-color-picker:armed,
.jfx-color-picker:hover,
.jfx-color-picker:focused,
.jfx-color-picker {
    -fx-background-color: transparent, transparent, transparent, transparent;
    -fx-background-insets: 0px;
}


.color-picker > .color-picker-label > .picker-color > .picker-color-rect {
    -fx-stroke: null;
    -fx-fill : null;
}

.color-picker {
    -fx-background-color: transparent;
    -fx-color-label-visible: false;
}
.color-picker  .color-picker-label  .picker-color  {
    -fx-alignment: center;
}

.color-picker .color-picker-label .text {
    -fx-fill: transparent;
}

.jfx-color-picker:default{
    -fx-background-color: transparent;
}

Video

场景生成器屏幕

Answer 1

JFXColorPicker 的 skin-class 包含一个窗格和一个标签，其样式分别为类 color-label 和 color-box。标签包含在窗格中。

下面的css显示图标没有背景（=选择的颜色）和没有文本（=十六进制值所选颜色）

.jfx-color-picker {
    -fx-focus-traversable: false;
    -fx-color-label-visible: false;
}

.jfx-color-picker .color-label {
    -fx-background-image: url("resources/palette.png");
    -fx-background-color: transparent;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-size: contain;
}

.jfx-color-picker .color-box {
    visibility: hidden;
}

第一部分禁用文本。中间部分负责图标的显示。最后一部分禁用背景。

这样 css 观察到的问题就不会发生：

没有白色，没有隐藏图标
Ripple-effect 可以选择性地（以编程方式）禁用
选择的颜色可选择不显示在背景中
在 StackPanes

我的测试用例由一个 BorderPane 组成，中间有一个 StackPane。 StackPane 包含 JFXColorPicker 和 3 个按钮。 BorderPane 的右侧包含一个窗格，其颜色由颜色选择器控制。下图显示了 Scenebuilder 中的 FXML（图 1）、启动后的应用程序（图 2）、单击颜色选择器后的应用程序（图 3）和颜色更改后的应用程序（图 4） ):

图1:

图2:

图3:

图4:

下面的css显示图标有背景（=选择的颜色）和有波纹但是没有文字（=所选颜色的十六进制值）

.jfx-color-picker {
    -fx-focus-traversable: false;
    -fx-color-label-visible: false;
}

.jfx-color-picker .color-label {
    -fx-background-image: url("resources/palette.png");
    -fx-background-color: transparent;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center;
    -fx-background-size: contain;
}

下图是颜色变化后的应用。

图5:

为了显示图标有背景（=选择的颜色），但是没有波纹和没有文字（=所选颜色的十六进制值），必须将以下方法添加到控制器中：

public void disableRipple() {
    JFXRippler rippler = (JFXRippler) jfxColorPicker.lookup("JFXRippler");
    rippler.setDisable(true);
}

其中 jfxColorPicker 表示 FXML 中的颜色选择器。

必须在main-方法执行show-方法后调用该方法:

FXMLLoader loader = new FXMLLoader(getClass().getResource("<path to FXML>"));
...
primaryStage.show();
...
Controller controller = loader.getController();
controller.disableRipple();

JFXColorPicker 的 skin-class 位于 JFoenix-master\jfoenix\src\main\java\com\jfoenix\skins\JFXColorPickerSkin.java。这里可以研究控件的交互。

Answer 2

编辑： @Topaco 在上面写了解决方案，但我用其他方式解决了我的问题：我制作了切换按钮，它的风格看起来像一个图标。我将 JFOenix 拾色器放在该切换按钮上方，并将拾色器的不透明度设置为 0。看起来我点击了带有图标的切换按钮，但实际上我点击了拾色器，因为它位于切换按钮上方。

JFoenix 拾色器未包含在任何窗格中。它作为切换按钮的堆栈窗格放置在网格窗格中。颜色选择器被提出来了。切换按钮向后放置

如何更改 JFoenix 拾色器库的 CSS 样式？

How to change CSS style of JFoenix Color Picker library?

java

javafx

scenebuilder