在我的 fxml 中,我有 css 的 url(这个 fxml 通过 SceneBuilder 创建)
<AnchorPane>
...
<stylesheets>
<URL value="@../styles/test.css" />
</stylesheets>
</AnchorPane>
和test.css
包含
.root{
...
}
如果我在 SceneBuider 中进行预览,一切正常。但在运行时,这种风格并不适用。我将定义更改为
#AnchorPane{
...
}
这样在预览和运行时都可以正常运行。 .root 有什么问题?
最佳答案
为什么它不起作用
您没有将 css 应用到场景的根节点。您将它应用于 AnchorPane(<stylesheets>
元素是 <AnchorPane>
元素的子元素)。因此,如果您为仅应用于 AnchorPane 的样式表设置 .root css 选择器,则 .root css 选择器永远不会应用,因为(如您在评论中引用的文档所述),“.root 样式类应用于Scene 实例的根节点”。
为您的 Pane 设置根样式类
您可以通过在 AnchorPane 上设置一个 .root 类来使其工作,例如:<AnchorPane styleClass="root">
.尽管您可能想要使用不同的样式类名称(例如 <AnchorPane styleClass="custom-root">
并保留 .root 样式类以供场景使用(因为重写 .root 可能会产生意想不到的后果)。
为场景设置样式表
另一种处理方法是不在 FXML 中定义 css 样式表,而是使用代码将 css 样式表添加到场景中:
scene.getStylesheets().add("/com/example/javafx/app/mystyles.css"
)
因为使用 .root 表示您想更改整个场景的样式,所以我建议使用这种方法。
如果这样做,您仍然可以通过在 SceneBuilder 中选择菜单项 Preview | Scene Stylesheets | Add a Style Sheet...
来预览带有样式的场景。 .
关于css - JavaFX和css的误解,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26840328/