Question

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

我可以在单击JFoenix拾色器时选择一种颜色，然后该颜色将应用于我的标签背景

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

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

问题2：当我单击带有拾色器的图标时，波纹效果可以工作，但是当我单击拾色器时，不需要任何波纹效果或动画

问题3：JFoenix拾色器还将所选颜色应用于其自身的背景，当我再次将鼠标移到其上方时，它再次出现在图标图像上

问题4：将颜色选择器放置在堆栈窗格中时，仅当我单击图标左侧时才会出现“颜色选择器”对话框窗口，看起来像“颜色选择器”图标的右侧已禁用，但是我需要在单击时显示“颜色选择器”对话框窗口到“颜色选择器”图标的任何部分

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

请，请帮助我

*我有个想法使用切换按钮（我知道如何根据自己的需要对其进行自定义），然后将“拾色器”向后放置此切换按钮并使不透明度变为0。但是我不知道如何制作“拾色器”对话框窗口打开当我单击切换按钮时。有什么想法吗？

我使用单击“颜色选择器”以用颜色填充标签背景时调用的方法。

控制器类：

@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的皮肤类包含一个窗格和一个标签，它们分别具有样式类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，观察到的问题就不会发生：

没有白色，没有隐藏的图标
可以选择（通过编程方式）禁用纹波效果
选择的颜色可选地不显示在背景中
在StackPane s中没有问题

我的测试用例包含一个BorderPane，该StackPane的中心是一个StackPane。 JFXColorPicker包含BorderPane和3个按钮。 css的右侧包含一个窗格，该窗格的颜色由拾色器控制。下图显示了Scenebuilder中的FXML（图1），刚启动后的应用程序（图2），单击颜色选择器后的应用程序（图3）和颜色更改后的应用程序（图4）。）：

图。 1：

图。 2：

图。 3：

图。 4：

以下.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; }显示的图标有背景（=选择的颜色）和具有波纹，但没有文本（=十六进制）所选颜色的值）

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

下图显示了颜色更改后的应用程序。

图。 5：

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

jfxColorPicker

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

该方法必须在执行show方法之后的FXMLLoader loader = new FXMLLoader(getClass().getResource("<path to FXML>")); ... primaryStage.show(); ... Controller controller = loader.getController(); controller.disableRipple();方法中调用：

JFXColorPicker

JFoenix-master\jfoenix\src\main\java\com\jfoenix\skins\JFXColorPickerSkin.java的皮肤类别位于if (_.size(_.values(_.omit(this.user, 'language')).filter(Boolean)) < 2)。在这里可以研究控件的交互作用。

Answer 2

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

JFoenix拾色器未包装在任何窗格中。它仅作为切换按钮的堆栈窗格放置在“网格窗格”中。拾色器向前进。切换按钮向后放置

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

2 个答案: