网格布局:
1、概念:
网格(Grid)布局在前端的实际应用中非常广泛。其作用是将网页划分成一个个网格,且这些网格可以随意组合,具有很强的便利性。
2、属性:
grid-rows | 同时设置行和列 |
grid-template-columns | 设置列 |
grid-template-rows | 设置行 |
GridPane gridPane = new GridPane();
//新建文本标签:用户名
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);
网格布局中的网格是默认居左上的
可以通过代码调整其网格位置
Pos 类中定义了一些居中方式
gridPane.add(name, 1, 0);
gridPane.add(l2, 0, 1);
gridPane.add(pwd, 1, 1);
gridPane.add(login, 0, 2);
//设置居中方式
gridPane.setAlignment(Pos.CENTER);
//网格布局中的网格是默认居左上的