深入 JavaFX 布局与控件：利用 FXML 和 Scene Builder 设计复杂的用户界面，提升桌面应用的交互体验。

好的，各位观众老爷们，欢迎来到今天的 JavaFX 布局与控件专场！我是你们的老朋友，代码界的段子手，今天咱们不聊枯燥的代码，而是聊聊如何用 JavaFX 打造颜值与实力并存的桌面应用。

开场白：UI 设计，不只是好看而已

话说，咱们程序员的世界，那可是代码的世界，黑底白字，那是我们的浪漫。但是，用户可不这么想。他们要的是赏心悦目的界面，是丝滑流畅的操作，是能让他们心情愉悦的体验。所以，UI 设计，那是至关重要！

你可能会说，"我只会写代码，UI 设计那是设计师的事儿！" 兄弟，时代变了！现在流行全栈工程师，啥都要会一点。再说了，就算你不想成为 UI 设计大师，至少也要能看懂设计图，能把设计稿变成现实吧？不然，和设计师沟通的时候，岂不是鸡同鸭讲，场面一度十分尴尬？ 😅

第一幕：FXML，布局的秘密武器

FXML，全称是 Extensible Markup Language，可以理解为 JavaFX 版本的 XML。它就像盖房子的图纸，用 XML 的语法来描述 UI 界面的布局和控件。

• 为什么要用 FXML？

  • 代码分离： 将 UI 布局和业务逻辑分离，让代码更清晰、更易维护。想象一下，如果所有的 UI 代码都写在 Java 文件里，那得多混乱啊！就像把所有的衣服都塞进一个衣柜，找起来那叫一个费劲。
  • 可视化设计： 配合 Scene Builder，可以可视化地设计 UI 界面，拖拽控件，设置属性，简直不要太方便！告别手写代码的日子，拥抱可视化设计的新时代！
  • 团队协作： 设计师可以用 Scene Builder 设计界面，程序员负责编写业务逻辑，完美配合，效率翻倍！再也不用担心因为 UI 问题而争吵了。

• FXML 的基本结构

  一个 FXML 文件，通常包含以下几个部分：

  • XML 声明： 声明 XML 版本和编码方式。
  • 根元素： 通常是一个布局容器，比如 BorderPane、VBox、HBox 等。
  • 控件元素： 各种 UI 控件，比如 Button、Label、TextField 等。
  • 属性设置： 设置控件的属性，比如 text、prefWidth、style 等。
  • 事件处理： 定义控件的事件处理函数，比如 onAction。

  举个例子：

  <?xml version="1.0" encoding="UTF-8"?>
  
  <?import javafx.scene.layout.VBox?>
  <?import javafx.scene.control.Label?>
  <?import javafx.scene.control.Button?>
  
  <VBox alignment="CENTER" spacing="20" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.MyController">
      <Label text="Hello, FXML!" />
      <Button text="Click Me!" onAction="#handleButtonClick" />
  </VBox>

  这段代码定义了一个垂直布局 VBox，里面包含一个 Label 和一个 Button。onAction="#handleButtonClick" 表示点击按钮时，会调用 MyController 类中的 handleButtonClick 方法。

• FXML 的加载

  在 Java 代码中，我们需要使用 FXMLLoader 类来加载 FXML 文件，并将其转换为 Java 对象。

  FXMLLoader loader = new FXMLLoader(getClass().getResource("my_view.fxml"));
  Parent root = loader.load();
  MyController controller = loader.getController(); // 获取 Controller

  这段代码首先创建一个 FXMLLoader 对象，指定 FXML 文件的路径。然后，调用 load() 方法加载 FXML 文件，并返回一个 Parent 对象，这是 UI 界面的根节点。最后，调用 getController() 方法获取与 FXML 文件关联的 Controller 对象。

第二幕：Scene Builder，可视化设计的神器

Scene Builder 是一个可视化 UI 设计工具，可以让你像搭积木一样，拖拽控件，设置属性，快速构建 UI 界面。

• 安装 Scene Builder

  可以从 Gluon 官网下载 Scene Builder。安装完成后，需要在 IDE 中配置 Scene Builder 的路径。

• 使用 Scene Builder

  1. 新建 FXML 文件： 在 IDE 中新建一个 FXML 文件。
  2. 打开 Scene Builder： 右键点击 FXML 文件，选择 "Open with Scene Builder"。
  3. 拖拽控件： 在左侧的 "Library" 面板中，找到你需要的控件，拖拽到中间的设计区域。
  4. 设置属性： 在右侧的 "Properties" 面板中，设置控件的属性，比如 text、prefWidth、style 等。
  5. 绑定事件： 在右侧的 "Code" 面板中，设置控件的事件处理函数，比如 onAction。
  6. 保存 FXML 文件： 保存 FXML 文件，Scene Builder 会自动更新 FXML 代码。

• Scene Builder 的常用功能

  • 拖拽控件： 这是最基本的功能，可以让你快速添加控件。
  • 属性设置： 可以设置控件的各种属性，比如颜色、字体、大小等。
  • 布局设置： 可以设置控件的布局方式，比如 VBox、HBox、BorderPane 等。
  • 事件绑定： 可以将控件的事件与 Controller 中的方法绑定。
  • 预览： 可以预览 UI 界面的效果。
  • CSS 编辑： 可以使用 CSS 来美化 UI 界面。

第三幕：JavaFX 布局，UI 的骨架

布局是 UI 界面的骨架，它决定了控件的排列方式和大小。JavaFX 提供了多种布局容器，每种布局容器都有不同的特点和适用场景。

• 常用的布局容器

  布局容器	描述	适用场景
  VBox	垂直布局，将控件垂直排列。就像一摞书，从上到下依次排列。	适合垂直方向排列的控件，比如菜单、表单等。
  HBox	水平布局，将控件水平排列。就像一排士兵，从左到右依次排列。	适合水平方向排列的控件，比如工具栏、导航栏等。
  BorderPane	边界布局，将界面划分为上、下、左、右、中五个区域。就像一个相框，可以把照片放在中间，上下左右可以放一些装饰品。	适合复杂的界面布局，比如主界面、编辑器等。
  GridPane	网格布局，将界面划分为网格，可以指定控件在哪个单元格中显示。就像一张表格，可以把数据放在不同的单元格中。	适合表单、数据展示等场景。
  StackPane	堆叠布局，将控件堆叠在一起，后面的控件会覆盖前面的控件。就像一摞盘子，最上面的盘子会遮挡住下面的盘子。	适合需要重叠显示的控件，比如对话框、遮罩层等。
  FlowPane	流式布局，将控件按照流式排列，当一行放不下时，会自动换行。就像水流一样，遇到障碍会绕过去。	适合需要自动换行的控件，比如标签云、图片展示等。
  AnchorPane	锚点布局，可以指定控件与父容器的四个边的距离。就像用绳子把控件固定在父容器上。	适合需要精确控制控件位置的场景。

• 布局的属性

  每种布局容器都有一些常用的属性，可以用来控制控件的排列方式和大小。

  • alignment： 设置控件在布局容器中的对齐方式。
  • spacing： 设置控件之间的间距。
  • padding： 设置布局容器的内边距。
  • prefWidth、prefHeight： 设置控件的首选宽度和高度。
  • maxWidth、maxHeight： 设置控件的最大宽度和高度。
  • minWidth、minHeight： 设置控件的最小宽度和高度。
  • Hgrow、Vgrow： 设置控件在水平和垂直方向上的增长策略。

• 布局的嵌套

  可以将不同的布局容器嵌套在一起，构建复杂的 UI 界面。就像用不同的积木搭建房子，可以搭建出各种各样的形状。

  例如，可以使用 BorderPane 作为根布局，将界面划分为上、下、左、右、中五个区域。然后在中间区域使用 VBox 垂直排列一些控件，再在 VBox 中使用 HBox 水平排列一些控件。

第四幕：JavaFX 控件，UI 的砖瓦

控件是 UI 界面的砖瓦，它们是用户与应用程序交互的基本元素。JavaFX 提供了丰富的控件库，可以满足各种 UI 设计需求。

• 常用的控件

  控件	描述	适用场景
  Label	标签，用于显示文本。就像衣服上的标签，可以告诉你衣服的品牌和成分。	用于显示静态文本，比如标题、提示信息等。
  Button	按钮，用于触发事件。就像电灯开关，按下可以打开或关闭电灯。	用于触发用户的操作，比如提交表单、打开对话框等。
  TextField	文本框，用于输入单行文本。就像一个便签，可以让你写一些简短的文字。	用于输入单行文本，比如用户名、密码等。
  TextArea	文本域，用于输入多行文本。就像一个笔记本，可以让你写一些长篇大论。	用于输入多行文本，比如评论、描述等。
  CheckBox	复选框，用于选择多个选项。就像一个多选题，可以选择多个答案。	用于选择多个选项，比如兴趣爱好、订阅服务等。
  RadioButton	单选按钮，用于选择一个选项。就像一个单选题，只能选择一个答案。	用于选择一个选项，比如性别、支付方式等。
  ComboBox	下拉框，用于选择一个选项。就像一个菜单，可以让你选择不同的菜品。	用于选择一个选项，比如国家、城市等。
  ListView	列表视图，用于显示列表数据。就像一个书架，可以让你看到所有的书籍。	用于显示列表数据，比如文件列表、用户列表等。
  TableView	表格视图，用于显示表格数据。就像一张 Excel 表格，可以让你看到所有的数据。	用于显示表格数据，比如学生成绩、商品信息等。
  ImageView	图像视图，用于显示图像。就像一面镜子，可以让你看到自己的样子。	用于显示图像，比如头像、logo 等。
  Slider	滑块，用于选择一个数值。就像一个音量调节器，可以让你调节音量的大小。	用于选择一个数值，比如音量、亮度等。
  ProgressBar	进度条，用于显示任务的进度。就像一个跑步机，可以让你看到自己跑了多远。	用于显示任务的进度，比如文件上传、下载等。
  DatePicker	日期选择器，用于选择一个日期。就像一个日历，可以让你选择不同的日期。	用于选择一个日期，比如生日、预约时间等。

• 控件的属性

  每个控件都有一些常用的属性，可以用来控制控件的外观和行为。

  • text： 设置控件的文本内容。
  • style： 设置控件的样式。
  • prefWidth、prefHeight： 设置控件的首选宽度和高度。
  • maxWidth、maxHeight： 设置控件的最大宽度和高度。
  • minWidth、minHeight： 设置控件的最小宽度和高度。
  • visible： 设置控件是否可见。
  • disable： 设置控件是否禁用。
  • onAction： 设置控件的事件处理函数。

• 控件的事件

  每个控件都有一些事件，可以用来响应用户的操作。

  • ActionEvent： 当用户点击按钮、选择菜单项等时触发。
  • KeyEvent： 当用户按下或释放键盘按键时触发。
  • MouseEvent： 当用户移动鼠标、点击鼠标等时触发。
  • FocusEvent： 当控件获得或失去焦点时触发。
  • ChangeEvent： 当控件的值发生改变时触发。

第五幕：CSS，UI 的化妆师

CSS (Cascading Style Sheets) 是 UI 界面的化妆师，它可以让你轻松地改变控件的外观，比如颜色、字体、大小、边框等。

• CSS 的基本语法

  CSS 由选择器和声明块组成。

  • 选择器： 用于选择要应用样式的元素。
  • 声明块： 包含一个或多个声明，每个声明由属性和值组成。

  例如：

  .button {
      -fx-background-color: #4CAF50; /* 设置背景颜色 */
      -fx-text-fill: white; /* 设置文本颜色 */
      -fx-font-size: 16px; /* 设置字体大小 */
  }

  这段代码定义了一个名为 .button 的选择器，它会选择所有 class 属性为 "button" 的元素。声明块中包含三个声明，分别设置了背景颜色、文本颜色和字体大小。

• CSS 的应用方式

  • 内联样式： 直接在 FXML 文件中使用 style 属性设置样式。

    <Button text="Click Me!" style="-fx-background-color: #4CAF50; -fx-text-fill: white;" />

  • 内部样式表： 在 FXML 文件中使用 <style> 标签定义样式。

    <VBox xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
        <style>
            .button {
                -fx-background-color: #4CAF50;
                -fx-text-fill: white;
            }
        </style>
        <Button text="Click Me!" styleClass="button" />
    </VBox>

  • 外部样式表： 在单独的 CSS 文件中定义样式，然后在 FXML 文件中引用该文件。

    <VBox xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
        <stylesheets>
            <URL value="@style.css" />
        </stylesheets>
        <Button text="Click Me!" styleClass="button" />
    </VBox>

• 常用的 CSS 属性

  属性	描述
  -fx-background-color	设置背景颜色。
  -fx-text-fill	设置文本颜色。
  -fx-font-size	设置字体大小。
  -fx-font-family	设置字体类型。
  -fx-font-weight	设置字体粗细。
  -fx-border-color	设置边框颜色。
  -fx-border-width	设置边框宽度。
  -fx-border-radius	设置边框圆角。
  -fx-padding	设置内边距。
  -fx-margin	设置外边距。
  -fx-alignment	设置对齐方式。
  -fx-effect	设置特效，比如阴影、模糊等。

总结：打造精美 UI，从入门到入坑

今天咱们聊了 JavaFX 的布局和控件，从 FXML 到 Scene Builder，从布局容器到控件，再到 CSS，希望大家对 JavaFX 的 UI 设计有了一个初步的了解。

记住，UI 设计不是一蹴而就的，需要不断的学习和实践。多看一些优秀的 UI 设计作品，多尝试不同的布局和控件，多学习 CSS 的用法，相信你也能打造出精美的 UI 界面。

最后，送给大家一句话：代码虐我千百遍，我待代码如初恋！ 虽然写代码很辛苦，但是当你看到自己的作品被用户喜欢的时候，你会觉得一切都是值得的。 💖

希望这篇文章能帮助大家入门 JavaFX 的 UI 设计，祝大家早日成为 UI 设计大师！ 咱们下期再见！ 👋