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

Question

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

这是我的 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

为进度条定义“查找颜色”：

.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+";");

但是，您不能简单地在 Paint 对象上调用 toString()：您需要对其进行适当的格式化。因此，请执行以下操作：

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 加载 场景对象。如果场景图包含控件，则默认 加载用户代理样式表。内联样式通过 节点集样式 API。内联样式类似于 style="..." HTML 元素的属性。从场景样式加载的样式 表单优先于用户代理样式表中的选择器。 内联样式优先于其他地方的样式。这 可以使用“！important”修改样式选择器的优先顺序 在样式声明中。

什么意思？

这意味着你不能使用setStyle ("selector { property:value"}访问选择器，我们在这个方法中只添加属性和值，如果你阅读setStyle的javadoc你会发现这个方法中的参数代表节点的css样式，并且在您的情况下，您需要使用 lookup() 来搜索内部元素 (.bar )：

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

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

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

但我看到你从Color property 得到Paint value

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*/

}

，我猜你会有一个值问题，因为如果你检查Color documentation 和Paint documentation，当我测试这一行Paint.valueOf("#0057e7") 的Paint value 时，我发现结果是：0x0057e7ff，它意味着每次您的方法返回值以0x 开头并且css 无法根据CSS GUIDE 理解此值，因此您应该将0x 替换为#，如下所示：

   bar.setStyle("-fx-background-color:" + value.toString().replace("0x", "#"));

尝试阅读JavaFX CSS Reference Guide 的所有内容以了解“JavaFX 级联样式表”。