21

在 HTML 中，我们习惯于以编程方式设置样式表，例如

<link rel="stylesheet" ... >

但是我为 JavaFX 找到的设置样式表的示例需要以编程方式设置样式表，例如

scene.getStylesheets().add("/resources/shell.css");

是否可以像在 HTML 中那样在 FXML 中设置样式表？

4

3 回答 3

21

您可以使用以下方法在父节点上设置样式表：

parent.getStylesheets().add("/resources/shell.css");

因为 FXML 中可用的元素和属性派生自公共 JavaFX Java API，所以您还可以使用 FXML 样式表元素（或可互换的属性）将样式表分配给父节点。由于所有容器都扩展了 Parent，因此您可以在 FXML 中引用的任何容器上设置一个或多个自定义样式表：

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
<?import java.net.URL?>
   ....
<?scenebuilder-stylesheet fruitcombo.css?>

<AnchorPane prefHeight="205.0" prefWidth="168.0"
   styleClass="layout"
   fx:controller="fruit.FruitComboController"
   xmlns:fx="http://javafx.com/fxml">
   <children>
      ....
   </children>
   <stylesheets>
      <URL value="@fruitcombo.css" />
   </stylesheets>
</AnchorPane>

有关从 fxml 文件引用 css 文件的完整可执行示例，请参阅此示例中的 fxml 文件。

上面的代码中有几个不错的特性：

样式表 URL 中奇怪的@前缀并不是绝对需要的，但可以用来利用 JavaFX 的location resolution。“位置解析运算符（由属性值的“@”前缀表示）用于指定应将属性值视为相对于当前文件的位置，而不是简单的字符串。”

以下行在运行时不是必需的，但如果您使用该工具， SceneBuilder 工具会在设计时使用以下行来定位所需的 css 样式表：

<?scenebuilder-stylesheet fruitcombo.css?>

关于评论的更新

警告：它是 FXML 1.0，它在 2.0 中不起作用，javafx.fxml.LoadException：URL 不是有效类型。

我认为这个评论有点不正确。据我所知，目前没有 FXML 2.0 这样的东西。

评论者收到 LoadException 的原因是因为这篇文章中的指示性片段没有将java.net.URL类导入 FXML 文档。我更新了片段以包含java.net.URL导入并添加更多省略号....以阐明片段的意图。省略号的意思是“一系列点，通常表示故意省略文本中的单词、句子或整个部分而不改变其原始含义”。

为了最好地理解这个答案，建议编译并运行链接的示例代码。

警告不要在 FXMLLoader 中使用 InputStream 加载函数

我强烈建议使用位置构造一个新的FXMLLoader，而不是使用FXMLLoader.load(InputStream)函数。使用静态 load() 函数时，由于 FXML 文件没有基本位置，因此无法解析相对位置引用。

即，不要这样做：

 InputStream input = this.getClass().getResourceAsStream("layout.fxml");
 FXMLLoader loader = new FXMLLoader.load(input);
 Parent content = loader.load();

而是这样做：

 String url = this.getClass().getResource("layout.fxml").toExternalForm();
 FXMLLoader loader = new FXMLLoader(url);
 Parent content = loader.load();
于 2013-02-04T23:06:01.113 回答
14

是的，请参见本教程的示例 4-8 ，通过将以下属性应用于节点：

stylesheets="fxmlexample/Login.css"

例如

<GridPane stylesheets="fxmlexample/Login.css">
于 2013-02-04T22:49:21.650 回答
0

如果您打算将 fxml 与 JavaFX 一起使用，则需要一些时间来下载和使用 SceneBuilder。一旦你这样做了，css 样式表的使用就变得简单了。当然，使用 NetBeans，因为在 SceneBuilder 运行时，在 NetBeans dxml 样板应用程序中打开预构建的 dxml 文件会导致它自动打开以在 SceneBuilder 中进行编辑。一旦你删除了所有的 StackPlane、按钮和标签并放入你真正想要的控件和容器，只需将样式表直接添加到 SceneBuilder。在主菜单的预览下，有一个 CSS 样式表的菜单选择。选择它会弹出一个子菜单，可以让您加载样式表文件。

加载文件后，控件将根据样式表中的规则显示为皮肤，除非您在 SceneBuilder 的属性部分中选择每个控件并声明该样式表应用于该控件，否则它们不会显示该皮肤。然后样式将在应用程序运行时显示。

于 2017-08-05T05:41:23.520 回答