Controlsfx PopOver 样式和焦点

Question

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

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

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

（在文档documentation 中找到）

这适用于 TextArea，但仅适用于标签。

我的风格是这样的：

*{
    -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 的样式。

我已经尝试应用 this other question 中的样式。 我也尝试过重新获得焦点，但也没有用。

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

Answer 1

您的问题应该是Label 没有使用您在.root 样式类中覆盖的任何颜色。根据JavaFX CSS reference guide，您可以使用fx-background-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");

编辑：您可能应该知道您的TextArea 不会显示您在样式表中定义的确切颜色。如果您检查 Modena 样式表，它是 JavaFX 的默认主题和样式（如何找到它，请参阅 here）。您会发现TextArea 内容的以下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;
}

如您所见。 TextArea 内容的背景颜色并不完全是您在样式表中定义的-fx-control-inner-background，而是从-fx-control-inner-background 派生的颜色到您想要的颜色的线性渐变。这对您来说可能并不明显，但很高兴知道。

设置TextArea背景的颜色，这样你的颜色就可以这样完成：

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