我可以使用 setStyle() 直接更改节点的子结构类样式吗？

Question

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

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

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

Answer 1

您可以使用lookup( ) 从ProgressBar 中提取样式类为.track 的节点，然后对其应用样式：

final Node track = progressBar.lookup(".track");
track.setStyle("-fx-background-color: desired-color");

Answer 2

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

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

.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-inner-background 是预定义的颜色。它们可以通过 setStyle 来改变：

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