1、在 Oracle 官网下载 JavaFX Scene Builder：https://www.oracle.com/java/technologies/javase/javafxscenebuilder-info.html

2、安装好后在 idea 设置中搜索 javafx，在 Path to SceneBuilder 中填写软件程序路径

3、idea 创建 JavaFx 项目

4、可以鼠标右键创建新布局 fxml

5、鼠标右键可以以 Scene Builder 打开布局文件，这里打开示例 sample.fxml

6、打开后可以拖动控件进行设计布局

7、这里我们加了个布局跟控件模拟登录，Hierarchy 中会显示当前所有布局情况，右侧 code 面板中 id 可以给控件命名方便代码调用，例如下图给用户名 id 命名为 usernameField，登录 id 设置为 loginButton，其他控件类似，并且登录按钮绑定事件方法 login。

8、点击左侧 Controller 选择 Controller 类给 fxml 绑定你要写代码的 Controller

8、点击 View->Show sample Controller Skeleton 可以生成示例代码

9、将生成的代码复制到 Cotroller.java 中，这里简单在事件中写了获取用户名密码以及重置输入框操作

package sample;

/**
 * Sample Skeleton for 'sample.fxml' Controller Class
 */

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;

public class Controller {
    @FXML // fx:id="usernameField"
    private TextField usernameField; // Value injected by FXMLLoader

    @FXML // fx:id="clearButton"
    private Button clearButton; // Value injected by FXMLLoader

    @FXML // fx:id="loginButton"
    private Button loginButton; // Value injected by FXMLLoader

    @FXML // fx:id="passwordField"
    private PasswordField passwordField; // Value injected by FXMLLoader

    @FXML
    void login(ActionEvent event) {System.out.println(" 账号 "+usernameField.getText());
        System.out.println(" 密码 "+passwordField.getText());
    }

    @FXML
    void clear(ActionEvent event) {usernameField.clear();
        passwordField.setText("");
        System.out.println(" 账号 "+usernameField.getText());
        System.out.println(" 密码 "+passwordField.getText());
    }

}

10、启动 Main 方法后发现怎么窗口这么小？原来是要设置窗口大小的，当然标题也可以设置，设置合适宽高