如何通过代码覆盖复杂对象的JavaFX CSS [英] How to override JavaFX css by code for complex objects

问题描述

我使用来自fxControls的JavaFX中的toggleSwitch. 我可以通过CSS文件覆盖以下属性:

I use a toggleSwitch in JavaFX from fxControls. I can override by a CSS file this property:

.toggle-switch:selected .thumb-area {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)), linear-gradient(to bottom, derive(#0b99c9, 30%), #0b99c9);
    -fx-background-insets: 0, 1;
}

但是我想通过代码来更改组件中的某些颜色(例如，选定模式下的蓝色背景)，但是 这不起作用:

But I would like to do it by code to change some colors in the component (for example the blue background in selected mode) but This doesn't work:

String css = ".toggle-switch:selected .thumb-area{-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),linear-gradient(to bottom, derive(#0b99c9, 30%), #0b99c9);-fx-background-insets: 0, 1;}";
toggleSwitch.setStyle(css);

感谢您的帮助.

推荐答案

我认为您可以使用查找的颜色来完成您要实现的目标.在您的CSS文件中，执行以下操作:

I think you can do what you're trying to achieve using a looked-up color. In your CSS file, do:

.root {
  -my-selected-control-color: #0b99c9 ;
}

然后根据您定义的查找颜色定义所有样式:

And then define all your styles in terms of the looked-up color you define:

.toggle-switch:selected .thumb-area{
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
                            linear-gradient(to bottom, derive(-my-selected-control-color, 30%), -my-selected-control-color);
    -fx-background-insets: 0, 1;

}

您可以根据需要定义任意数量的

You can define as many of these as you need.

现在，如果需要，您只有一个地方可以更改颜色(在CSS文件中).您还可以使用单行代码以编程方式对此进行修改:

Now you only have a single place to change the color (in the CSS file) if you need to. You can also modify this programmatically with a single line of code:

// assume root is the root of the UI
// you can always retrieve this with Node root = anyNode.getScene().getRoot();
// This will change all occurrences of -my-selected-control-color to 
// a bright green:
root.setStyle("-my-selected-control-color: #00b140 ;");

另请参见此相关帖子.

这篇关于如何通过代码覆盖复杂对象的JavaFX CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！