我正在使用 JavaFX 和 Scene Builder 在我的应用程序中实现一些功能
我可以在点击 JFoenix 颜色选择器时选择一种颜色,然后将这种颜色应用于我的标签背景
我让 JFOenix 拾色器看起来像一个图标。我已将拾色器的标准外观更改为我的图像
问题#1: 当我第一次启动程序时,拾色器完全充满了白色,然后当我将鼠标移到它上面时它看起来像我的图标。
问题 #2:当我单击带有拾色器的图标时,波纹效果有效,但单击拾色器时不需要任何波纹效果或动画
问题 #3:JFoenix 拾色器也将选择的颜色应用到它自己的背景上,当我再次将鼠标移到它上面时,它的外观再次变成图标图像
问题#4: 当拾色器放置在堆栈 Pane 中时拾色器对话框窗口仅在我单击图标左侧时出现,看起来拾色器图标右侧被禁用,但我需要单击时出现拾色器对话框窗口到拾色器图标的任何部分
我正在搜索 JFoniex 拾色器的 CSS 文件,但没有任何文档说明如何在 CSS 中正确自定义拾色器。
请尽你所能帮助我
*我有一个使用切换按钮的想法(我知道如何根据自己的需要自定义它)并将拾色器放在这个切换按钮的后面并使不透明度为 0。但我不知道如何制作拾色器对话框窗口打开当我点击切换按钮时。有什么想法吗?
我使用单击拾色器时调用的方法用颜色填充标签的背景。
Controller 类:
@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;
}
最佳答案
JFXColorPicker
的皮肤类包含一个 Pane 和一个具有样式类 color-label
和 color-box
的标签,分别。标签包含在 Pane 中。
以下 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
没有问题
我的测试用例由一个 BorderPane
组成,中间有一个 StackPane
。 StackPane
包含 JFXColorPicker
和 3 个按钮。 BorderPane
的右侧部分包含一个 Pane ,其颜色由颜色选择器控制。
下图显示了 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:
为了显示图标有背景(=选择的颜色),但没有波纹和没有文字(=选择的十六进制值颜色), 必须将以下方法添加到 Controller 中:
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
的皮肤类位于 JFoenix-master\jfoenix\src\main\java\com\jfoenix\skins\JFXColorPickerSkin.java
。
在这里可以研究控件的交互。
关于java - 如何更改 JFoenix 拾色器库的 CSS 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53804624/