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(10);

gridPane.setVgap(10);

//新建文本标签：用户名

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);

//生成场景并完成布局绑定,同时设定场景大小

Scene scene = new Scene(gridPane, 300, 200);

//主容器标题设置

primaryStage.setTitle("网格登录");

//给主容器绑定场景（让场景显示出来）

primaryStage.setScene(scene);

//不要忘了这一行,让主容器显示

primaryStage.show(); }

注册页面案例制作

 分析控件

用户名 输入框 TextField

用户密码 密码框 PasswordField

用户性别 单选框 RadioButton

用户地址 下拉框 ChoiceBox

用户爱好 复选框 CheckBox

注册,取消 按钮 Button

控件讲解

单选框的使用 构建单选框

RadioButton men = new RadioButton("男");

RadioButton miss = new RadioButton("女");

这样的单选框是无法实现单选功能的,只有当单选按钮在一组的时候才能完成单选功能

ToggleGroup group = new ToggleGroup();//构建单选按钮组

RadioButton men = new RadioButton("男");

RadioButton miss = new RadioButton("女");

ToggleGroup group = new ToggleGroup();

//实现单选功能

men.setToggleGroup(group);

miss.setToggleGroup(group);

完整代码

@Override

public void start(Stage primaryStage) throws Exception {

FlowPane flowPane = new FlowPane();

ToggleGroup group = new ToggleGroup();

RadioButton men = new RadioButton("男");

RadioButton miss = new RadioButton("女");

men.setToggleGroup(group);

miss.setToggleGroup(group);

flowPane.getChildren().addAll(men, miss);

Scene scene = new Scene(flowPane, 300, 100);

primaryStage.setScene(scene); primaryStage.show(); }

下拉框的使用

ChoiceBox choiceBox = new ChoiceBox();

 下拉框的选项是一个 ObservableList ,所以我们是无法直接向其中添加文本作为下拉框选项,需要进行代码改造：

1. 将文本内容放到List集合中 2. 将List集合转换成一个 ObservableList 3. 通过构造方法或者是 setItems 方法给下拉框设置选项

//定义下拉框内容集合

List items = Arrays.asList("湖南省", "四川省", "湖北省");

//转换成下拉框需要的数据集合

ObservableList items = FXCollections.observableList(list);

//通过构造方法设置选项

ChoiceBox choiceBox = new ChoiceBox(items);

 因为 ObservableList 也是一个List集合,我们也可以直接调用 add 方法为其添加选项

ChoiceBox choiceBox = new ChoiceBox();

choiceBox.getItems().add("湖南省");

choiceBox.getItems().add("四川省");

choiceBox.getItems().add("湖北省");

重点：我们还可以给下拉框对象设置泛型，从而可以实现超简易写法

ChoiceBox choiceBox = new ChoiceBox();

请注意， getItems() 方法得到的是一个 ObservableList ， List 方法它也都能使用

choiceBox.getItems().addAll("湖南省","四川省","湖北省");

 运行之后可以观察到下拉框中默认是没有选中值的,可以通过方法设置其下拉框默认选中

 也可容易通过方法来获得下拉框中被选中的选项与选项下标

//被选中选项的下标

int selectedIndex = choiceBox.getSelectionModel().getSelectedIndex();

//被选中的选项

String selectedItem = choiceBox.getSelectionModel().getSelectedItem();

还可以通过 getValue() 来获得下拉框选中的值

String value = choiceBox.getValue();

 完整代码

@Override

public void start(Stage primaryStage) throws Exception {

FlowPane flowPane = new FlowPane();

ChoiceBox choiceBox = new ChoiceBox();

choiceBox.getItems().addAll("湖南省","四川省","湖北省");

choiceBox.setValue("湖南省"); flowPane.getChildren().add(choiceBox);

Scene scene = new Scene(flowPane, 300, 100);

primaryStage.setScene(scene);

primaryStage.show(); }

CheckBox checkBox = new CheckBox("打篮球");

对于复选框和单选框,都可以通过 setSelected(boolean) 来设置选中状态,通过 isSelected() 来获取选中状态

CheckBox c1 = new CheckBox("打篮球");

CheckBox c2 = new CheckBox("打游戏");

CheckBox c3 = new CheckBox("打豆豆");

完整代码

 @Override

public void start(Stage primaryStage) throws Exception {

FlowPane flowPane = new FlowPane();

CheckBox c1 = new CheckBox("打篮球");

CheckBox c2 = new CheckBox("打游戏");

CheckBox c3 = new CheckBox("打豆豆");

flowPane.getChildren().addAll(c1, c2, c3);

Scene scene = new Scene(flowPane, 300, 100);

primaryStage.setScene(scene);

primaryStage.show(); }

页面制作

//设置窗口标题
        stage.setTitle("网络登入");
        //设置窗口不可拉升
        stage.setResizable(false);

布局设置

//新建布局

GridPane gridPane = new GridPane();

//设置居中方式

gridPane.setAlignment(Pos.CENTER);

//调整间隙

gridPane.setHgap(10); gridPane.setVgap(10);

文本控件设置

文本标签

Label l1 = new Label("用户名");

Label l2 = new Label("用户密码");

Label l3 = new Label("用户性别");

Label l4 = new Label("用户地址");

Label l5 = new Label("用户爱好");

输入框控件设置

TextField f1 = new TextField();//用户名

PasswordField f2 = new PasswordField();//用户密码

单选框设置 

ToggleGroup group = new ToggleGroup();//按钮组

RadioButton men = new RadioButton("男");

RadioButton miss = new RadioButton("女");

men.setToggleGroup(group);//添加到按钮组,实现单选

miss.setToggleGroup(group);//添加到按钮组,实现单选

men.setSelected(true);//设置默认选中男,防止用户不选的情况

因为按钮的个数不一致,导致使用网格布局的时候会出现计算位置比较麻烦的情况,我们可以这么做：将多个控件放到一个布局中, 再把布局对象当成组件放到对应的网格中

这里我们可以采用流式布局,也可以采用 HBox 布局：在这个布局中,控件都显示为一行

HBox h1 = new HBox(); h1.getChildren().addAll(men, miss);

下拉框设置

//构建选项集合

List list = Arrays.asList("湖南省", "四川省", "湖北省");

//生成并设置下拉框选项

ChoiceBox choiceBox = new ChoiceBox(items);

//这里替换成数据库的集合便可以完成数据库值的显示

choiceBox.addAll(list);

//设置下拉框默认值

choiceBox.setValue(list.get(0));

复选框设置

CheckBox c1 = new CheckBox("打篮球");

CheckBox c2 = new CheckBox("打游戏");

CheckBox c3 = new CheckBox("打豆豆");

可以选择和单选框一样的做法

HBox h2 = new HBox();

h2.getChildren().addAll(c1, c2, c3);

按钮设置

Button register = new Button("注册");

Button cancel = new Button("取消");

控件与网格绑定

//用户名

gridPane.add(l1, 0, 0); gridPane.add(f1, 1, 0);

//用户密码

gridPane.add(l2, 0, 1); gridPane.add(f2, 1, 1);

//用户性别

gridPane.add(l3, 0, 2); gridPane.add(h1, 1, 2);

//用户地址

gridPane.add(l4, 0, 3); gridPane.add(choiceBox, 1, 3);

//用户爱好

gridPane.add(l5, 0, 4); gridPane.add(h2, 1, 4);

//按钮

gridPane.add(register, 0, 5);

gridPane.add(cancel, 1, 5);

 输出后

 一定要注意上面的单选框和复选框是放的 HBox 布局对象,这两个布局对象中已经放了相应的控件了

完整代码

 按钮事件制作

取消按钮

cancel.setOnAction(e->{

Platform.exit();//退出程序

});

注册按钮

需要在这里获取到对应的值,然后带入数据库执行插入操作,对于绝大部门控件,都可以通过 getText() 获得其中的文本内容,下拉 框则需要使用 getValue() 方法,而对于单选框与多选框,则需要对选中状态进行判断