JavaFX

最新推荐文章于 2025-04-22 16:08:50 发布

无名友

最新推荐文章于 2025-04-22 16:08:50 发布

阅读量871

点赞数 18

文章标签：电脑 java 开发语言

本文链接：https://blog.youkuaiyun.com/2403_89893216/article/details/146988383

版权

JavaFX 概述

JavaFX 是 Java 的下一代 GUI 框架，用于构建富客户端应用程序。它取代了 Swing，提供了更现代化的 UI 组件和丰富的图形功能。

主要特点

基于场景图(Scene Graph)的渲染模型
支持硬件加速
内置丰富的 UI 控件
支持 CSS 样式化
提供 FXML 用于界面设计与代码分离
支持动画和特效
跨平台运行

JavaFX 核心架构

基于场景图（Scene Graph）的渲染：所有可视化元素（控件、形状、布局等）均继承自 Node，通过树形结构组织，支持高效的事件传递和样式管理。

属性绑定与响应式设计：内置 Observable属性和数据绑定机制，支持 UI 与数据的自动同步，简化动态交互开发。

1. 基本结构

Application -> Stage -> Scene -> Node

2. 核心类

Application: JavaFX 应用的入口类
Stage: 窗口(顶级容器)
Scene: 场景(包含所有 UI 组件)
Node: 所有 UI 组件的基类(控件、形状、布局等)

JavaFX 应用开发基础

继承Application类：JavaFX 应用通过继承 javafx.application.Application并重写start()方法启动，主舞台（Stage）作为根窗口承载场景（Scene）和节点（Node）。

场景图布局：使用内置布局容器（如vBox,BorderPane）或自定义节点构建界面，通过Scene设置到Stage并调用show()显示窗口。

1. 基本应用结构

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        // 创建根节点(布局或容器)
        Pane root = new VBox();
        
        // 创建场景并设置根节点
        Scene scene = new Scene(root, 400, 300);
        
        // 设置舞台(窗口)属性
        primaryStage.setTitle("JavaFX 应用");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

2. 常用布局

BorderPane: 上、下、左、右、中五个区域
HBox: 水平排列子节点
VBox: 垂直排列子节点
GridPane: 网格布局
FlowPane: 流式布局(自动换行)
StackPane: 堆叠布局(子节点重叠)

JavaFX 控件

内置丰富UI组件：JavaFX 提供多样化控件如Button、TextField、TableView等，涵盖基础输入、数据展示和交互元素，满足常见界面需求。

样式与行为可定制：所有控件支持 CSS 美化，并可通过属性绑定（如textProperty）和事件监听（如setOnAction）动态控制外观与逻辑。

容器与控件协同：控件需嵌入布局容器（如HBox、GridPane）实现灵活排版，结合场景图（Scene Graph）层级管理，构建结构化界面。

1. 基本控件

Label: 标签
Button: 按钮
TextField: 单行文本输入
TextArea: 多行文本输入
CheckBox: 复选框
RadioButton: 单选按钮
ComboBox: 下拉框
ListView: 列表视图
TableView: 表格视图

2. 控件使用示例

Button btn = new Button("点击我");
btn.setOnAction(event -> {
    System.out.println("按钮被点击了!");
});

TextField textField = new TextField();
textField.setPromptText("请输入内容");

CheckBox checkBox = new CheckBox("同意协议");

事件处理

事件驱动模型：JavaFX 采用事件驱动机制，通过EventHandler接口处理用户交互（如点击、键盘输入等），使用setOnXXX()方法绑定事件与逻辑。

事件类型丰富：支持多种事件类型（ActionEvent、MouseEvent、KeyEvent等），可通过事件对象获取详细信息（如坐标、按键值），实现精准交互控制。

Lambda 简化代码：推荐使用 Lambda 表达式或方法引用（如button.setOnAction(e -> {...})）替代匿名类，使事件处理代码更简洁易读。

1. 事件类型

鼠标事件: MouseEvent
键盘事件: KeyEvent
动作事件: ActionEvent
窗口事件: WindowEvent

2. 事件处理方式

// 1. 使用Lambda表达式
button.setOnAction(event -> {
    System.out.println("按钮被点击");
});

// 2. 使用方法引用
button.setOnAction(this::handleButtonClick);

// 3. 实现EventHandler接口
button.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent event) {
        System.out.println("按钮被点击");
    }
});

FXML 与 Scene Builder

FXML实现界面与逻辑分离：通过XML文件定义UI布局结构，配合控制器类处理业务逻辑，实现MVC架构的清晰分工。

Scene Builder可视化拖拽设计：图形化工具快速构建界面，自动生成FXML代码，支持属性编辑和样式预览，大幅提升开发效率。

双向数据绑定与依赖注入：FXML支持@FXML注解自动注入组件引用，结合属性绑定机制简化数据与UI的同步更新。

1. FXML 基础

FXML 是基于 XML 的标记语言，用于定义 JavaFX 用户界面。

<!-- 示例FXML文件 -->
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox xmlns="http://javafx.com/javafx/8.0.171" 
      xmlns:fx="http://javafx.com/fxml/1"
      fx:controller="com.example.MyController">
    <Label text="欢迎使用JavaFX"/>
    <Button text="点击我" onAction="#handleButtonClick"/>
</VBox>

2. 控制器类

public class MyController {
    @FXML
    private void handleButtonClick(ActionEvent event) {
        System.out.println("按钮被点击");
    }
}

3. 加载 FXML

FXMLLoader loader = new FXMLLoader(getClass().getResource("ui.fxml"));
Parent root = loader.load();
Scene scene = new Scene(root);
primaryStage.setScene(scene);

动画与特效

内置动画API：JavaFX 提供Transition类（如FadeTransition、TranslateTransition）和Timeline实现平滑动画效果，支持关键帧插值控制。

预置视觉特效：通过Effect类（如 DropShadow、Blur）快速添加投影、模糊等特效，直接绑定到节点属性实现动态视觉效果。

1. 基本动画

// 平移动画
TranslateTransition tt = new TranslateTransition(Duration.seconds(2), rectangle);
tt.setFromX(0);
tt.setToX(100);
tt.play();

// 渐变动画
FadeTransition ft = new FadeTransition(Duration.seconds(3), label);
ft.setFromValue(1.0);
ft.setToValue(0.0);
ft.play();

2. 特效

// 阴影效果
DropShadow shadow = new DropShadow();
shadow.setColor(Color.GRAY);
shadow.setRadius(5);
button.setEffect(shadow);

// 模糊效果
GaussianBlur blur = new GaussianBlur();
blur.setRadius(5);
imageView.setEffect(blur);

数据绑定

响应式数据同步：JavaFX 通过Property属性体系（如StringProperty、IntegerProperty）实现数据与UI的自动双向绑定，修改数据即时刷新界面。

灵活绑定表达式：支持使用Bindings工具类创建复杂绑定逻辑（如算术运算、条件判断），或通过bind()方法建立简单单向绑定。

集合动态监听：ObservableList和ObservableMap等集合类型支持监听器，可实时响应数据增删变化并自动更新 ListView、TableView 等控件内容。

1. 属性绑定

// 简单绑定
label.textProperty().bind(textField.textProperty());

// 双向绑定
textField1.textProperty().bindBidirectional(textField2.textProperty());

// 转换绑定
label.textProperty().bind(Bindings.concat("欢迎: ", textField.textProperty()));

2. 集合绑定

ObservableList<String> items = FXCollections.observableArrayList();
listView.setItems(items);

// 添加监听器
items.addListener((ListChangeListener<String>) change -> {
    while (change.next()) {
        if (change.wasAdded()) {
            System.out.println("添加了: " + change.getAddedSubList());
        }
    }
});