我可以使用setStyle（）直接更改Node的子结构类样式吗？ [英] Can I use setStyle() to directly change a Node's substructure class style?

问题描述

我有一个实现自定义ProgressBar的对象。有时我希望酒吧的轨道有白色，有时我希望它是黑色的。我发现可以使用以下命令在我的.css文件中设置它的默认值：

I have an object that implements a custom ProgressBar. Sometimes I want the bar's track to have a white color and sometimes I want it to be black. I found that can set the default value for it in my .css file by using the following:

.my-bar .track {
    -fx-background-color: bar-default-color;
}

我希望我可以根据传入的值设置改变构造函数中的颜色。但是尽管谷歌搜遍了它，我还没有找到一个示例，其中Node.setStyle（）用于更改子结构类的样式。直接在ProgressBar对象上调用setStyle（ - fx-background-color：desired-color）会创建与我想要的颜色不匹配的奇怪颜色。我确定这是因为我需要在.track子结构而不是父类上设置它。那么如何通过代码访问和更改它？

I hoped I could vary that color in the constructor based on passed in value settings. But despite Googling all over for it I have yet to find an example where Node.setStyle() is used to change a Substructure class' style. Calling setStyle("-fx-background-color: desired-color") directly on the ProgressBar object creates odd colors that do not match what I wanted. I'm sure that's because I need to set it on the .track Substructure instead of the parent class. So how do I access and change it via code?

推荐答案

它不能通过setStyle（）直接更改CSS属性但是（作为查找的替代方法）可以更改CSS属性中使用的颜色，这些颜色在modena.css .root 中定义。

It cannot be directly changed the CSS property through the setStyle() but (as an alternative for lookup) it is possible to change the color used in CSS property, These colors are defined in modena.css .root.

因此，对于您的用例，进度条轨道定义为：

So for your use case, the progress bar track is defined as:

.progress-bar > .track {
      -fx-background-color: 
          -fx-shadow-highlight-color,
          linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
          linear-gradient(to bottom, 
            derive(-fx-control-inner-background, -7%),
            derive(-fx-control-inner-background, 0%),
            derive(-fx-control-inner-background, -3%),
            derive(-fx-control-inner-background, -9%)
          );
    -fx-background-insets: 0, 0 0 1 0, 1 1 2 1;
    -fx-background-radius: 4, 3, 2; /* 10, 9, 8 */
}

这里 -fx-shadow-highlight-color ， -fx-text-box-border 和 -fx-control-内部背景是预定义的颜色。它们可以通过setStyle更改：

Here the -fx-shadow-highlight-color, -fx-text-box-border and -fx-control-inner-background are predefined colors. They can be changed by setStyle:

progBar.setStyle( "-fx-control-inner-background: aqua; 
                   -fx-text-box-border: red; 
                   -fx-shadow-highlight-color:yellow"
                );

这篇关于我可以使用setStyle（）直接更改Node的子结构类样式吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！