Controlsfx Popover样式和焦点

Question

我正在使用Popover，它用作Textfield的类似工具提示的帮助显示。它包含一个Label和一个TextArea作为内容，并在用户输入文本字段时创建。（通过Focus usPropery.addListener）

我使用以下方式应用样式：

popOver.getRoot().getStylesheets().add(...) 

（见文件）

这适用于文本区域，但仅部分适用于标签。

我的风格是这样的：

*{
    -tb-dark-grey: rgb(32,38,44);
}

.root {
   -fx-base: -tb-dark-grey;
   -fx-background: -tb-dark-grey;
   -fx-control-inner-background: -tb-dark-grey;
}

这在我的主窗口中效果很好。包括所有标签和文本区域。一切都得到深蓝色背景和白色文本。然而，对于Popover中的标签，它只将文本颜色更改为白色，但背景保持通常的浅灰色。

我尝试使用TextArea作为解决方法。这适用于样式。但它总是从文本字段中窃取焦点。这使得无法键入某些内容。禁用TextArea可以工作，但这会改变TextArea的样式。

我已经尝试过应用另一个问题中的样式。我也尝试过用它来恢复焦点，但也不起作用。

popup.Show(this.inputField)
this.inputField.requestFocus(); // also tried this with Platform.runLater

Answer 1

您的问题应该是Label不使用您在. root样式类中覆盖的任何颜色。根据JavaFX CSS参考指南，您可以使用fx-backend-Color对Label的背景进行样式设置。

在样式表中添加以下行应该可以做到这一点：

.label {
    -fx-background-color: -tb-dark-grey;
}

如果要为标签设置不同的样式，还可以通过创建自定义样式类为每个标签分别应用样式：

CSS：

.custom-label {
    -fx-background-color: -tb-dark-grey;
}

然后将其应用于特定的标签：

Label label = new Label("I am a label");
label.getStyleClass().add("custom-label");

编辑：您可能应该知道，您的文本区域不会显示您在样式表中定义的确切颜色。如果您检查Modena样式表，它是JavaFX的默认主题和样式（这里描述了如何找到它）。您可以找到以下内容的css：

.text-area .content {
    /*the is 1px less top and bottom than TextInput because of scrollpane border */
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
    -fx-cursor: text;
    -fx-background-color:
        linear-gradient(from 0px 0px to 0px 4px, derive(-fx-control-inner-background, -8%), -fx-control-inner-background);
    -fx-background-radius: 2;
}

如你所见。文本区域内容的背景色并不完全是您在样式表中定义的“fx控件内部背景”，而是从衍生自“fx控件内部背景”的颜色到所需颜色的线性渐变。这对你来说可能并不明显，但很高兴知道。

设置文本区域背景的颜色，这样您的颜色就可以这样做：

.text-area .content {
    -fx-background-color: tb-dark-grey;
}