【JavaFX设计自由度】：CSS支持让UI更灵活

# 1. JavaFX概述和CSS基础

## 1.1 JavaFX简介

JavaFX 是一个用于构建丰富的互联网应用程序 (RIA) 的 SDK，它为开发者提供了强大的UI组件库和一个高度可定制的样式系统。自 Java 8 起，JavaFX 成为了 Java 标准版的一部分，适用于创建跨平台桌面和移动应用程序。通过使用JavaFX，开发者能够使用Java编程语言，结合CSS（层叠样式表），来设计和实现应用程序的用户界面。

## 1.2 CSS在用户界面中的作用

CSS 在JavaFX中的应用，使得UI的样式定义与内容的结构相分离，增强了程序的可维护性和可扩展性。通过定义不同的样式规则，开发者能够快速修改应用程序的外观，实现主题变换、元素样式的统一管理，以及动态的用户交互效果。

## 1.3 CSS基础语法

在JavaFX中使用的CSS基础语法遵循标准的CSS规则，例如：

.button {
    -fx-background-color: #409eff;
    -fx-text-fill: white;
    -fx-font-size: 14px;
}

这段代码为所有类名为`.button`的JavaFX控件设置了背景颜色、文字颜色以及字体大小。通过CSS，可以精细地控制UI组件的外观，从而使得应用程序具备更加吸引用户的界面。

# 2. CSS在JavaFX中的应用

### 2.1 CSS的基本语法和选择器

#### 2.1.1 CSS的基本语法结构

在JavaFX中，CSS 用于定义和控制用户界面的样式。CSS的基本语法结构由三个主要部分组成：选择器、属性和值。选择器用于指定哪些元素将应用样式规则，属性定义了需要改变的样式特征，而值则确定了属性的具体表现。

一个简单的CSS规则看起来如下：

selector {
  property: value;
}

例如，如果我们想要设置所有按钮的背景颜色为蓝色，我们可以写成：

.button {
  -fx-background-color: blue;
}

在这个例子中，`.button` 是选择器，`-fx-background-color` 是属性，而 `blue` 是值。在JavaFX中，CSS属性通常以 `-fx-` 开头，以区分常规的CSS属性。

#### 2.1.2 选择器的种类和使用方式

选择器在JavaFX CSS中可以非常灵活和强大。它们可以是元素类型、ID、类或属性选择器，并且支持伪类和伪元素。常用的选择器包括：

- 类型选择器：如 `Button` 选择所有类型为 `Button` 的节点。
- 类选择器：如 `.primaryButton` 选择所有具有 `primaryButton` 类的节点。
- ID选择器：如 `#okButton` 选择具有 `okButton` ID的节点。
- 属性选择器：如 `[text="OK"]` 选择文本属性为 "OK" 的节点。
- 伪类选择器：如 `:hover` 用于选择鼠标悬停在其上的节点。

使用组合选择器可以进一步精细控制应用的样式，例如：

.button:hover {
  -fx-background-color: green;
}

这里，`button:hover` 是一个伪类选择器组合，表示当鼠标悬停在按钮上时，按钮的背景颜色变为绿色。

### 2.2 JavaFX中的CSS类和伪类

#### 2.2.1 JavaFX CSS类的定义和使用

CSS类在JavaFX中用于封装一组样式属性，并且可以在多个节点之间复用。类的定义在样式表中进行，随后可以在JavaFX节点中通过 `setStyle` 方法或直接在 FXML 中引用。

定义一个CSS类的例子：

.my-class {
  -fx-background-color: lightgray;
  -fx-font-size: 14pt;
}

在JavaFX节点中应用这个类：

Button okButton = new Button("OK");
okButton.setStyle("-fx-class: my-class;");

或者在FXML文件中直接引用：

<Button text="OK" styleClass="my-class" />

通过这种方式，多个控件可以共享相同的视觉样式，而无需为每个控件单独设置样式。

#### 2.2.2 JavaFX伪类的定义和使用

伪类在JavaFX CSS中用于描述元素的特定状态，比如悬停、选中、禁用等。定义伪类允许开发者为这些状态提供不同的样式规则。

例如，定义一个按钮在悬停时的样式：

.button:hover {
  -fx-background-color: orange;
}

应用伪类的条件可以非常具体。例如，只在按钮的文本为 "Help" 且鼠标悬停时改变背景颜色：

.button[text="Help"]:hover {
  -fx-background-color: yellow;
}

伪类为用户界面提供了一种动态反馈的方式，改善用户体验。

### 2.3 CSS样式在JavaFX中的继承和优先级

#### 2.3.1 样式继承的概念和实现方式

JavaFX中的CSS样式可以被继承。这意味着某些样式属性可以传递给子节点，除非被明确覆盖。这可以帮助减少冗余样式定义，使得样式表更加简洁。

比如，为一个窗口定义背景色，并希望所有子节点也继承这个背景色：

.window {
  -fx-background-color: white;
}

所有子节点，除非另有定义，都将继承窗口的背景色。

#### 2.3.2 样式优先级的规则和应用

当多个样式规则应用于同一个节点时，CSS具有一个优先级规则来决定哪些样式将被使用。JavaFX遵循标准的CSS优先级规则：

1. 内联样式 (Inline style) > 内部样式表 (Internal style sheet) > 外部样式表 (External style sheet)
2. 具体选择器优先于通用选择器
3. 伪类和伪元素具有比普通类更高的优先级
4. 后声明的样式覆盖先前声明的样式

优先级是通过比较选择器的权重来决定的，权重由选择器的类型决定：

- 内联样式（直接在JavaFX节点上设置）：权重最高，值为1000
- ID选择器：权重为100
- 类选择器和伪类：权重为10
- 类型选择器（元素类型）和伪元素：权重为1

当出现样式冲突时，拥有最高权重的选择器决定最终的样式。例如，如果一个按钮同时被 `.button` 和 `#myButton` 选择器选中，ID选择器的样式将优先被应用，因为它的权重更高。

### 总结

在本章节中，我们了解了CSS在JavaFX中的基本语法和选择器的应用，以及如何定义和使用JavaFX中的CSS类和伪类。此外，还探讨了样式继承和优先级规则，这对于掌握JavaFX CSS至关重要。通过这些基础知识，我们能够更好地定制和优化JavaFX应用程序的用户界面。

# 3. JavaFX CSS应用实践

## 3.1 基本UI组件的样式定制

### 3.1.1 控件样式的定制方法

在JavaFX中，控件样式的定制是创建美观用户界面的基础。CSS允许开发者定义广泛的设计元素，如颜色、字体、背景、边框等。要定制控件样式，首先要理解控件的类层次结构，这是因为每个控件都可能继承自一个或多个父类，它们可能已经具有一些默认的样式。

以下是一个简单的代码示例，演示如何为一个`Button`控件定制样式：

Button button = new Button("Click me");
button.setStyle("-fx-background-color: #4CAF50; -fx-text-fill: white;");

在上述代码中，我们设置了按钮的背景颜色和文本颜色。CSS属性使用标准的`-fx-`前缀，这是JavaFX中用于所有样式的特定前缀。通过这种方式，我们可以为JavaFX应用程序中的任何控件应用样式。

### 3.1.2 窗口样式的定制方法

窗口样式定制通常涉及到场景图的根元素，即Stage。对窗口样式的定制包括改变窗口的大小、标题、背景颜色等。这可以通过设置`Scene`对象的样式来完成。

Stage stage = new Stage();
stage.setTitle("JavaFX CSS Example");
stage.setScene(new Scene(new BorderPane(), 300, 200));

// 设置窗口背景色
stage.getScene().getRoot().setStyle("-fx-background-color: #778899;");

在这个例子中，我们为一个简单的窗口设置了标题，并改变了其背景颜色。需要注意的是，窗口背景通常应用到`Scene`的根元素上，而不是`Stage`本身。

## 3.2 复杂UI布局的样式定制

### 3.2.1 使用CSS布局的概念和方法

JavaFX提供了丰富的布局容器，如`BorderPane`, `HBox`, `VBox`等，它们可以用来构建复杂的用户界面。使用CSS布局可以让我们对这些容器进行细致的样式定制。布局的定制可能包括调整间距、大小、对齐方式等。

下面是如何使用CSS来调整`HBox`中元素的间距和对齐方式的一个例子：

HBox hbox = new HBox(10); // 设置控件间的水平间隔为10
hbox.setAlignment(Pos.CENTER);
hbox.getChildren().addAll(new Button("Button 1"), new Button("Button 2"));

// 设置HBox的样式
hbox.setStyle("-fx-background-color: #E0E0E0; -fx-alignment: center; -fx-spacing: 20;");

通过上述代码，我们创建了一个具有10像素间距和居中对齐的水平布局。我们还为`HBox`设置了背景颜色和控件之间的额外间距。

### 3.2.2 实现复杂的界面布局案例

为了更好地展示如何应用复杂的样式定制，我们可以设计一个具体的应用场景。假设我们要设计一个登录界面，包含用户名和密码输入框、登录按钮以及忘记密码的链接。这个布局可以使用`GridPane`来实现，以便于更好地控制每个元素的位置。

GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);

// 添加标签和文本输入框
grid.add(new Label("Username:"), 0, 0);
TextField