Question

我正在尝试为进度条控件创建自定义属性。我尝试通过更改java代码的样式来更改进度条颜色，但是当我使用setStyle(".bar {-fx-background-color:" + value + ";}");方法时，颜色不会改变。我使用了其他方法setColor（（），但结果相同，颜色不会改变。

这是我的java代码：

private final ObjectProperty<Paint> Color = new SimpleObjectProperty<>(this, "Color", Paint.valueOf("#0057e7"));

public Paint getColor() {
    return Color.get();
}

public void setColor(Paint value) {

    Color.set(value);
    /*When the user change the property value ,it was sending for make chainging in css*/
    changeColor(value);//send changed value

}

public ObjectProperty ColorProperty() {
    return Color;
}

private static final String USER_AGENT_STYLESHEET = superfx.SuperFx.class.getResource("/stylesheets/style.css").toExternalForm();
private static final String DEFALUT_STYLE_CLASS = "super-fx-qntm-progress-bar";

@Override
public String getUserAgentStylesheet() {
    return USER_AGENT_STYLESHEET;
}     

public SuperFXFQProgressBar() {
    defaultStyle();
    idenfinite();

}

public SuperFXFQProgressBar(double progress) {

    super(progress);
    defaultStyle();
    idenfinite();

}

private void defaultStyle() {

    this.setMinHeight(10);
    this.setPrefHeight(10);
    getStylesheets().add(USER_AGENT_STYLESHEET);
    getStyleClass().add(DEFALUT_STYLE_CLASS);

}

private void idenfinite() {
    setProgress(ProgressBar.INDETERMINATE_PROGRESS);
}

private void changeSpeed(double value) {
    this.setStyle("\n"
            + "    -fx-indeterminate-bar-animation-time:" + value + ";");
}

/*My problem here*/

private void changeColor(Paint value) {
     /*How can i change the bar color from here*/
    this.setStyle("\n"
            + "    .bar {-fx-background-color:" + value + ";}"); /*this line does not five any effect*/

}

这是我的css：

.super-fx-qntm-progress-bar {

    -fx-background-color: transparent;
    -fx-indeterminate-bar-animation-time:1.0;
    -fx-indeterminate-bar-flip:true;
    -fx-indeterminate-bar-escape:true;
    -fx-indeterminate-bar-length:10;
    -fx-min-height:5;
}

.super-fx-qntm-progress-bar .track{

    -fx-background-color: transparent;
    -fx-border-radius:20;
    -fx-background-radius:20;

}

.super-fx-qntm-progress-bar .bar { 

    -fx-background-color: #0057e7;
    -fx-background-insets: 1 1 1 3, 1 1 1 1, 1 1 2 3; 
    -fx-border-radius:50;
    -fx-background-radius:50;


}

Answer 1

定义一个＆＃34;查找颜色＆＃34;进度条：

.super-fx-qntm-progress-bar {

    -bar-color: #0057e7;
    /* existing code ... */
}

然后用它作为条形图的颜色：

.super-fx-qntm-progress-bar .bar { 

    -fx-background-color: -bar-color ;
    -fx-background-insets: 1 1 1 3, 1 1 1 1, 1 1 2 3; 
    -fx-border-radius:50;
    -fx-background-radius:50;


}

然后，您在Java代码中所需要的只是

this.setStyle("-bar-color: "+value+";");

但是，您无法在toString()对象上调用Paint：您需要对其进行适当格式化。所以做一些像：

private String formatColor(Color c) {
    int r = (int) (255 * c.getRed());
    int g = (int) (255 * c.getGreen());
    int b = (int) (255 * c.getBlue());
    return String.format("#%02x%02x%02x", r, g, b);
}

然后

this.setStyle("-bar-color: "+formatColor((Color)value)+";");

Answer 2

你应该知道：

css样式可以来自样式表或内联样式。样式表从getStylesheets属性中指定的URL加载 Scene对象。如果场景图包含Control，则为默认值加载了用户代理样式表。内联样式通过节点setStyle API。内联样式类似于样式=＆＃34; ...＆＃34; HTML元素的属性。样式从Scene的样式加载工作表优先于用户代理工作表中的选择器。内联样式优先于其他地方的样式。该样式选择器的优先顺序可以使用＆＃34;！important＆＃34;进行修改。在样式声明中。

什么意思？

这意味着您无法使用@Component public class StringUtility { @Value("${maxValue}") private String maxValue; @Cacheable("string-utility") public String getMaxValue() { return maxValue; } }访问选择器，我们只在此方法中添加属性和值，如果您读取setStyle的javadoc，您会发现此方法中的参数表示节点的css样式，在您的情况下，您需要使用setStyle ("selector { property:value"}来搜索内部元素（.bar）：

lookup()

通过使用此代码，我们将添加我们的样式后访问进度条的bar元素。

Node bar = this.lookup(".bar");

但我发现你从bar.setStyle("-fx-background-color:" + value);

获得了Paint value

Color property

，我想你会遇到价值问题，因为如果你检查Color documentation和Paint documentation，当我测试private void changeColor(Paint value) { /*How can i change the bar color from here*/ this.setStyle("\n" + " .bar {-fx-background-color:" + value + ";}"); /*this line does not five any effect*/ }此行Paint value时，我发现了结果是：Paint.valueOf("#0057e7")，这意味着每次您的方法返回值都以0x0057e7ff开头，并且css根据CSS GUIDE无法理解此值，因此您应该将0x替换为{{} 1}}像这样：

0x

尝试阅读JavaFX CSS Reference Guide的所有内容，以理解＆＃34; JavaFX层叠样式表＆＃34;。

如何从java代码更改进度颜色？

2 个答案: