JavaFX 使用 JFoenix 框架更改关闭选项卡按钮颜色

Question

我正在使用 JFoenix 在我的 JavaFX 应用程序中包含类似元素的 google Material 。我注意到，为了使用 css 设置 JFoenix 元素的样式，一些命令与仅使用 JavaFX 时不同，因此我无法按照我的意愿设置 JFoenix 的 TabPane 样式。

此时我的TabPane如下图所示: https://ibb.co/DtxVpJJ

我希望按如下方式更改那些关闭选项卡按钮的颜色: https://ibb.co/yRbDGnQ

我已经尝试了很多在互联网上找到的解决方案，但没有一个能够解决问题。主要的两个解决方案是:

• 直接更改按钮的颜色 ( https://blog.samirhadzic.com/2016/08/30/close-options-for-tabpane )。

• 隐藏按钮并将其替换为图标。( Javafx change Tab X to image icon from url )

使用代码改变颜色，没有任何反应:

.jfx-tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-close-button{
    -fx-background-color:red;
}

使用以下代码，图标出现但仍在白色默认十字后面:

.jfx-tab-pane .tab-close-button {
    -fx-background-color: transparent;
    -fx-shape:null;
    -fx-background-image: url("../../assets/close-32.png");
    -fx-background-size: 25;
    -fx-background-repeat: no-repeat;
}

结果:

https://ibb.co/NSmWQ3m

这似乎是一个如此简单的问题，我无法解决它。有什么想法吗？

Answer 1

例如 JFoenix 的 TabsDemo在

JFoenix-master\demo\src\main\java\demos\components\TabsDemo.java

与可关闭 Pane 的修改一起使用。默认如下:

关闭按钮的颜色可以更改为例如带有以下 css 的红色:

.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
     -fx-background-color: red;
}

也可以使用图标。在这种情况下，CSS 可以是:

.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button {
    -fx-background-image: url(<path to icon file>);
    -fx-background-repeat: no-repeat;
}

.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
    -fx-shape: "";
    -jfx-size: 0;
    -fx-background-color: Transparent;
}

最后一节覆盖默认样式，将十字的形状、大小和颜色定义为 SVG:

.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
    -fx-shape: "M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z";
    -jfx-size: 12;
    -fx-background-color: rgba(255, 255, 255, .87);
}

TabPane-css 的蓝图可以在

JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls\jfx-tab-pane.css

和

JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls\jfx-button.css

JFXTabPane 部分。

这可用于创建更复杂的效果，例如在选择 Pane 时更改颜色/图标等。