如何在FXML中添加CSS样式表

Question

我想将css文件链接到我的应用程序。 在我的fxml文件中，我使用：

  <stylesheets>
    <URL value="@../stylesheet1.css" />
  </stylesheets>

...当我在scenebuilder中打开fxml文件时，我可以看到样式预览。但是当我尝试运行应用程序时出现错误：

java.net.MalformedURLException：无协议：../ stylesheet1.css

所以我用这种方式测试了它：

<stylesheets>
    <String fx:value="stylesheet1.css" />
</stylesheets>

现在它是另一回事 - 应用程序启动并应用css，但我没有在scenebuilder中看到预览。错误消息：

“文件stylesheet1.css不存在。找不到资源stylesheet1.css。”

那么如何正确附加css文件呢？

---

好吧，虽然我的问题没有得到解答，但为什么它不能按照上述方式运行，我找到了一个适合我的解决方案。在我的FXML中，我只有一行

<?scenebuilder-stylesheet ../stylesheet1.css?>

所以Scenebuilder与那个css一起工作。 在我的主要课程中，我以编程方式设置样式表：

Scene scene = new Scene(root);
String css = this.getClass().getResource("../stylesheet1.css").toExternalForm(); 
scene.getStylesheets().add(css);

Answer 1

我找到了可用且有效的解决方案，以便在css中包含fxml文件 将stylesheets="@app/cssfilename.css"添加到fxml文件的父节点，就像堆栈窗格

一样

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="app.fxml.SettingsController" stylesheets="@app/cssfilepath.css">

......
.....
.....
</StackPane>

Answer 2

这是一个在开发环境，Scene Builder和打包的JAR中都有效的解决方案。

文件夹结构：

Main.java：

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {

            FXMLLoader loader = new FXMLLoader(Main.class.getResource("view/RootLayout.fxml"));
            AnchorPane rootLayout = (AnchorPane) loader.load();

            Scene scene = new Scene(rootLayout, 400, 400);
            scene.getStylesheets().add(getClass().getResource("css/application.css").toExternalForm());

            primaryStage.setScene(scene);
            primaryStage.show();

        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

RootLayout.fxml：

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.view.RootLayoutController">
   <children>
      <Pane layoutX="0.0" layoutY="0.0" prefHeight="200.0" prefWidth="200.0">
         <children>
            <Button fx:id="sunButton" layoutX="74.0" layoutY="88.0" mnemonicParsing="false" onAction="#handleSunButtonClick" styleClass="sun-button" stylesheets="@../css/toolbar.css" text="Button" />
         </children>
      </Pane>
   </children>
</AnchorPane>

RootLayoutController.java：

package application.view;

import javafx.fxml.FXML;
import javafx.scene.control.Button;

public class RootLayoutController {


    @FXML
    Button sunButton;

    @FXML
    public void handleSunButtonClick() {
        System.out.println( "Button clicked");
    }
}

toolbar.css：

.sun-button {
  -fx-graphic: url('./icons/sun.png');
}

application.css：

.root {
    -fx-background-color:lightgray;
}

sun.png：

这适用于开发环境和打包JAR（选择＆＃34;将所需的库提取到生成的JAR＆＃34;在Eclipse中）。

屏幕截图（只是一个带有通过css加载图标的按钮）

Answer 3

如果您不想以编程方式执行此操作，则可以通过分离代码和资源来执行此操作。我有这样的Maven项目结构，但这不是必需的。

src/main/java/${packageName}
    MainWindow.fxml
src/main/resources/${packageName}
    stylesheet1.css

现在您可以使用.fxml

中的样式表

stylesheets="@stylesheet1.css"

或者像你一样使用stylesheets标签。

SceneBuilder可能会有警告，但有效。

Answer 4

如果你使用SceneBuilder作为原始提问者，只需将css样式表添加到SceneBuilder即可。在“预览”下，选择与样式表相关的项目，子菜单将提供一个项目以添加css样式表。请注意，因为样式将显示在工作区和SceneBuilder预览中的控件上，但在应用程序运行时不会显示。您仍然必须选择每个控件并选择该控件下的样式表;控件将在运行应用程序时显示样式。

我会进一步建议，如果Nathan Tuggy没有比他幼稚的评论更加聪明，他应该回归他习惯性的自体细胞和电子游戏方案。