java-fx 网格布局

目录

网格布局

 位置原理讲解

注册页面案例制作

控件讲解

下拉框的使用

复选框的使用

页面制作

 按钮事件制作

---

 网格布局

将整个面板划分为若干个格子,每个格子的大小是一样的,每个格子中可以放置一个控件（布局）,类似于表格的方式。在网格布局 中放入控件的时候,还需要指定位置。

GridPane gridPane = new GridPane();

我们将要排出这个布局,也就是登陆页面的优化版本

 位置原理讲解

以网格布局的思维来拆分该布局,可以分出一个 2*3 的网格

 我们可以给格子从上到下,从左到右依次编号,分别是：

 得出结论： 位置 a,b 其中 a 向右移动需要变大,向下移动则 b 需要变大 且 a,b 都从 0 开始增长

代码 

/新建文本标签：用户名 Label l1 = new Label("用户名");

//新建输入框 TextField name = new TextField("请输入用户名");

//新建文本标签：用户密码 Label l2 = new Label("用户密码");

//新建密码框 PasswordField pwd = new PasswordField();

//登录按钮的创建 Button login = new Button("登录");

//指定位置：按照之前的位置图进行对比并完成位置推理

gridPane.add(l1, 0, 0);

gridPane.add(name, 1, 0);

gridPane.add(l2, 0, 1);

gridPane.add(pwd, 1, 1);

gridPane.add(login, 0, 2);

 网格布局中的网格是默认居左上的

 可以通过代码调整其网格位置

//设置居中方式

gridPane.setAlignment(Pos.CENTER);

Pos 类中定义了一些居中方式

居中运行后

 

 可以观察到每个控件之间挨得太近了,可以使用代码将距离调整开

 gridPane.setHgap(10);//两个格子之间的水平距离

gridPane.setVgap(10);//两个各自之间的垂直距离

 @Override

public void start(Stage primaryStage) throws IOException {

//新建布局

GridPane gridPane = new GridPane();

//设置居中方式

gridPane.setAlignment(Pos.CENTER);

//调整间隙

gridPane.setHgap(