Question

我正在使用Popover，它用作Textfield的类似工具提示的帮助显示。它包含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;
}

这在我的主窗口中非常好用。包括所有标签和TextAreas。一切都有深蓝色背景，白色文字。对于Popover中的Label，它只将文本颜色更改为白色，但背景保持通常的浅灰色。

我尝试使用TextArea作为解决方法。这适用于风格。但它始终从文本领域窃取焦点。这使得无法输入内容。禁用TextArea可以正常工作，但会更改TextArea的样式。

我已经尝试过应用this other question中找到的样式了。我也尝试重新关注，但也没有用。

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

Answer 1

您的问题应该是Label不使用您在.root样式类中覆盖的任何颜色。根据{{3}}，您可以使用Label设置fx-background-color的背景样式。

将以下行添加到样式表应该可以解决问题：

.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的默认主题和样式（如何找到它JavaFX CSS reference guide）。您将找到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;
}

Controlsfx PopOver风格和焦点

1 个答案: