JavaFX实战指南：从零开始构建复杂界面

# 1. JavaFX基础介绍

JavaFX是Oracle公司推出的一个用于构建富客户端应用程序的框架。它提供了丰富的图形和媒体包，能够创建绚丽的用户界面。本章节将向读者介绍JavaFX的基本概念，包括它的历史背景、主要特点和开发环境的搭建。

JavaFX的前身是Java的Swing库，但与Swing相比，JavaFX提供了更现代的图形API和更丰富的功能集。它支持CSS样式表，允许开发者通过标准的Web技术来设计UI。此外，JavaFX还引入了强大的动画框架，这使得创建动态交互界面变得简单直观。

为了开始使用JavaFX，开发者需要安装Java Development Kit (JDK) 并配置IDE（如IntelliJ IDEA或Eclipse）来支持JavaFX。同时，也可以利用Maven或Gradle这类构建工具来管理项目的依赖。本书后续章节将详细阐述JavaFX的核心组件和高级特性，为读者提供丰富的学习材料。

# 2. 深入理解JavaFX核心组件

### 2.1 JavaFX场景图（Scene Graph）基础

#### 2.1.1 场景图的结构与组成

场景图是JavaFX中用于构建图形用户界面的基础。它由多个节点（Node）组成，这些节点通过父子关系组织起来，形成了一个树状结构。在场景图中，每个节点都具有特定的属性和功能，如形状、颜色、位置和事件处理等。

在场景图中，顶级节点是`Scene`对象，它持有根节点`Group`或`Pane`。`Group`节点可以包含多个子节点，而`Pane`可以作为容器，用来组织子节点的布局。在这些节点的基础上，JavaFX提供了各种UI控件，如按钮（Button）、文本框（TextField）等，它们都是通过节点来实现的。

// 创建场景图的简单示例代码
Group root = new Group();
Scene scene = new Scene(root, 400, 300);
root.getChildren().add(new Circle(50));

在上述代码中，我们创建了一个根节点`Group`，然后在其上添加了一个圆形节点`Circle`。这个`Circle`节点随后被添加到场景图中，最终形成一个可以显示在屏幕上的场景。

#### 2.1.2 节点（Node）类型与属性

在JavaFX中，节点可以是基本的图形，如直线（Line）、矩形（Rectangle）、圆形（Circle）等，也可以是复杂的控件，比如按钮（Button）或者文本区域（TextArea）。每个节点都有自己的属性，如大小（width、height）、位置（x、y）、颜色（fill、stroke）、透明度（opacity）等。

// 设置节点属性的示例代码
Rectangle rectangle = new Rectangle(100, 100);
rectangle.setFill(Color.BLUE); // 设置填充颜色为蓝色
rectangle.setStroke(Color.BLACK); // 设置边框颜色为黑色
rectangle.setStrokeWidth(2); // 设置边框宽度为2

在该段代码中，我们创建了一个矩形节点，并设置了其填充颜色、边框颜色和边框宽度。这样的设置使得节点的视觉效果得以自定义，以适应不同的应用场景。

### 2.2 JavaFX布局管理器

#### 2.2.1 布局策略概述

布局管理器是JavaFX中用于自动排列节点的组件。它们能够根据父容器的大小和节点的需求动态地调整节点的位置和大小。常用的布局策略包括`HBox`、`VBox`、`GridPane`和`BorderPane`等。

`HBox`和`VBox`布局管理器分别将节点以水平（行）和垂直（列）的方式排列。`GridPane`提供了一个格状的布局结构，允许节点分布在多个行和列中。`BorderPane`将界面分为五个区域，分别位于顶部、底部、左边、右边和中间。

#### 2.2.2 常用布局类详解

**HBox布局：**
`HBox`布局将子节点水平排列。它可以设置子节点之间的间距。

// HBox布局示例
HBox hbox = new HBox(10); // 设置节点之间的间距为10
hbox.getChildren().addAll(new Button("OK"), new Button("Cancel"));

**VBox布局：**
与`HBox`相似，`VBox`布局则是将子节点垂直排列。

// VBox布局示例
VBox vbox = new VBox(10); // 设置节点之间的间距为10
vbox.getChildren().addAll(new Label("Name:"), new TextField());

**GridPane布局：**
`GridPane`布局将界面分成行和列的网格，每个节点可以指定放置在网格的特定位置。

// GridPane布局示例
GridPane grid = new GridPane();
grid.addRow(0, new Label("Name:"), new TextField());
grid.addRow(1, new Label("Age:"), new TextField());

**BorderPane布局：**
`BorderPane`将界面分为五个区域：顶部、底部、左、右和中间。

// BorderPane布局示例
BorderPane borderPane = new BorderPane();
borderPane.setTop(new Button("Menu"));
borderPane.setCenter(new TextArea());

#### 2.2.3 自定义布局的实现

除了JavaFX内置的布局管理器，开发者还可以创建自定义的布局类。为了实现自定义布局，需要继承`Pane`类并重写`layoutChildren()`方法，该方法是自定义布局的核心，其中包含子节点布局逻辑。

public class CustomLayout extends Pane {
    @Override
    protected void layoutChildren() {
        // 自定义节点布局逻辑
    }
}

实现自定义布局时，需要考虑节点的大小、位置以及可能的约束条件。务必确保自定义布局能够适应不同大小的窗口，以及动态变化的内容。

### 2.3 JavaFX的事件处理模型

#### 2.3.1 事件传递机制

在JavaFX中，事件是异步传递的。当事件发生时（比如鼠标点击或键盘输入），事件对象会被创建，并沿着场景图向上或向下传递。这个传递过程被称为事件冒泡（bubbling）或捕获（capturing）。

事件冒泡是指从最深的节点开始传递，逐级向上，直到达到场景图的根。而事件捕获则是从根节点开始，逐级向下传递，直到目标节点。在JavaFX中，开发者可以使用事件处理器来拦截并响应这些事件。

#### 2.3.2 事件处理器的使用

事件处理器是一个方法，它定义了当特定类型的事件发生时要执行的操作。在JavaFX中，可以通过`setOnAction()`方法为控件添加事件处理器，如按钮的点击事件。

// 添加事件处理器的示例代码
Button button = new Button("Click Me");
button.setOnAction(event -> {
    System.out.println("Button clicked!");
});

在该段代码中，为按钮添加了一个简单的点击事件处理器。当按钮被点击时，将输出一条消息到控制台。

#### 2.3.3 事件过滤器的应用

事件过滤器允许开发者在事件到达目标节点之前进行拦截处理。这通常用于实现全局事件监听，如窗口关闭、键盘快捷键等。在JavaFX中，可以使用`addEventFilter()`方法添加事件过滤器。

// 添加事件过滤器的示例代码
scene.addEventFilter(MouseEvent.MOUSE_PRESSED, event -> {
    if (event.getButton() == MouseButton.PRIMARY) {
        System.out.println("Primary mouse button pressed");
    }
});

在这段代码中，为整个场景添加了一个鼠标按压事件过滤器。当检测到鼠标左键被按下时，会输出一条消息到控制台。

通过这一章节的学习，读者应能对JavaFX的核心组件有更深刻的理解，并能够根据实际需求选择和使用合适的组件进行界面开发。在下一章节中，我们将进一步探讨JavaFX的样式与动画效果，让应用界面变得更加丰富和动态。

# 3. JavaFX样式与动画效果

## 3.1 CSS在JavaFX中的应用

### 3.1.1 CSS语法基础

CSS（层叠样式表）是用于描述HTML或XML文档样式的标准技术，同样适用于JavaFX。JavaFX应用中的CSS允许开发者以声明的方式设置样式，与直接编程相比，这种方法更加直观和灵活。JavaFX中的CSS语法基于标准CSS3，并做了一些扩展以适应图形用户界面的需求。

在JavaFX中使用CSS，首先需要了解选择器、属性和值。选择器用于确定应用样式的节点类型，属性定义了节点的样式属性，而值则是属性的具体设定。

/* CSS 语法基础示例 */
.root {
    -fx-background-color: #f0f0f0;
}

.button {
    -fx-padding: 10px;
    -fx-background-color: #3399ff;
    -fx-text-fill: white;
}

在上述示例中，`.root` 选择器设置场景中所有节点的背景颜色，而 `.button` 选择器则指定所有按钮的内边距、背景颜色和文本颜色。

### 3.1.2 JavaFX特定的CSS属性

JavaFX引入了特有的CSS属性，用以支持丰富的UI效果。这些属性通常以 `-fx-` 为前缀，以区分标准CSS属性。例如，可以使用 `-fx-background-color` 来定义节点的背景色，`-fx-effect` 用于添加特殊效果如阴影、模糊等。

/* JavaFX 特定属性使用示例 */
.label {
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.5), 10, 0.5, 2, 2);
}

在上述示例中，`.label` 选择器通过 `-fx-effect` 属性为标签添加了高斯模糊的阴影效果。JavaFX的CSS属性非常丰富，可以定义各种视觉效果，如边框、字体、颜色渐变、旋转、缩放等。

## 3.2 JavaFX动画与变换技术

### 3.2.1 关键帧动画（Timeline）

JavaFX的动画功能非常强大，关键帧动画（Timeline）是其中的基础组件，它通过定义一系列的关键帧来控制节点属性的变化。开发者可以指定在特定时间点节点的特定属性值，JavaFX会自动计算并应用这些变化，从而创建动画效果。

// JavaFX 关键帧动画代码示例
Timeline timeline = new Timeline(
    new KeyFrame(Duration.seconds(0),
        new KeyValue(rectangle.translateXProperty(), 0)),
    new KeyFrame(Duration.seconds(2),
        new KeyV