关联 JavaFX 和 FXML 和 CSS 文件介绍

2022-11-30 10:55:35

注：.java文件中也可以直接引入CSS文件，但这不在下面内容当中，或者直接看结尾。

在IDEA的同一个包 test 下有四个文件分别是：
Main.java
fxmlHandler.java
log.fxml
log_UI.css
（包名：test）
现在要将这四个文件关联起来。

在Main.java里面需要引入FXML文件log.fxml：
通过在public void start 方法里的语句：AnchorPane root = FXMLLoader.load(getClass().getResource(“log.fxml”));
FXMLLoader.load()返回一个根结点，可以通过强制转换(或者不加强制转换)传递给根结点：

@Override
public void start(Stage primaryStage) throws Exception {
    // 加载fxml文件
    AnchorPane root = FXMLLoader.load(getClass().getResource("log.fxml"));

	// ...其它代码...
    Scene scene = new Scene(root);
    primaryStage.setScene(scene);
    primaryStage.getIcons().add(new Image("log.png")); //设置窗口左上角图标
    primaryStage.show();
}

然后在 log.fxml 文件里通过给根结点添加属性让其能被CSS文件修饰，还要关联fxmlHandler.java文件实现对动作的响应控制：
有两种方法引入CSS文件，但我只有一种方法关联fxmlHandler.java文件（即：使用fx:controller来指定），实测都不报错（相对文件路径要写对）
第一种：
stylesheets="@login_UI.css"

<!-- 根结点是 AnchorPane
stylesheets 用来引入css文件
fx:controller 用来指定javafx控制类的文件
-->

<?import java.net.URL?>
<AnchorPane stylesheets="@login_UI.css" fx:controller="test.fxmlHandler"
            maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0"
            prefWidth="721.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
   
	<!-- ...其它代码 -->

</AnchorPane>

第二种：
单独的 <stylesheets> … … </stylesheets>

<?import java.net.URL?>
<AnchorPane fx:controller="test.fxmlHandler"
			maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0"
            prefWidth="721.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
   <!-- 引入css文件 -->
   <stylesheets>
      <URL value="@login_UI.css"/>
   </stylesheets>
   
	<!-- ...其它代码 -->

</AnchorPane>

至此，这四个文件就是一个整体了。
或许也可以把两个.java文件合二为一，但分开更加减低耦合。

可以在独立的fxmlHandler.java里处理事件。我的IDE直接帮我在里面创建了FXML中的组件：

.java文件还可直接添加CSS文件修饰，通过诸如下列代码：
Parent root = fxmlLoader.load();
Scene scene = new Scene(root);
root.getStylesheets().add(getClass().getResource(“style.css”).toExternalForm());

其他参考：
1.FXML + CSS 开发登陆界面 https://blog.csdn.net/LiHaoYang11/article/details/71106755
2.JavaFX入门（五）：使用CSS样式美化你的UI控件 https://blog.csdn.net/theonegis/article/details/50189443
3.JavaFX中引用CSS文件出错的解决方法 https://blog.csdn.net/weixin_43898956/article/details/102912443?utm_medium=distribute.pc_relevant.none-task-blog-utm_term-10&spm=1001.2101.3001.4242
4.JavaFX - 不多数不啰嗦，开始肯定要来个HelloWorld https://www.cnblogs.com/oscar1987121/p/9019644.html
5.JavaFX之FXController详解 https://blog.csdn.net/wingfourever/article/details/41349855

【注：转载请注明出处！https://blog.csdn.net/qq_43750882/article/details/110563981】

码农公寓

相关文章