JavaFX.进阶操作

网格布局

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

中放入控件的时候 , 还需要指定位置。

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

位置原理讲解

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

GridPane gridPane = new GridPane (); 我们可以给格子从上到下 , 从左到右依次编号 , 分别是：

得出结论：

位置 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 类中定义了一些居中方式

public enum Pos {

TOP_LEFT 左上

TOP_CENTER 居上

TOP_RIGHT 右上

CENTER_LEFT 居左

CENTER 居中

CENTER_RIGHT 居右

BOTTOM_LEFT 左下

BOTTOM_CENTER 居下

BOTTOM_RIGHT 右下

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

完整代码

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 ); 注册页面案例制作

分析布局

分析控件

用户名 输入框 TextField

用户密码 密码框 PasswordField

用户性别 单选框 RadioButton

用户地址 下拉框 ChoiceBox

用户爱好 复选框 CheckBox

注册 , 取消 按钮 Button

控件讲解

单选框的使用

构建单选框

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

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

}

RadioButton men = new RadioButton ( " 🚹 " );

RadioButton miss = new RadioButton ( " 🚺 " );

ToggleGroup group = new ToggleGroup();// 构建单选按钮组 设置两个按钮为一组

完整代码

下拉框的使用

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

1. 将文本内容放到 List 集合中

2. 将 List 集合转换成一个 ObservableList

3. 通过构造方法或者是 setItems 方法给下拉框设置选项

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 (); // 定义下拉框内容集合

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

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

ObservableList < String > 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<String> choiceBox = new ChoiceBox<String>();

请同学们注意， getItems() 方法得到的是一个 ObservableList ，我们讲解过的 List 方法它也都能使用

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

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

choiceBox . setValue ( " 湖南省 " );

也可容易通过方法来获得下拉框中被选中的选项与选项下标 还可以通过 getValue() 来获得下拉框选中的值

完整代码

复选框的使用

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

完整代码

// 被选中选项的下标

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

// 被选中的选项

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

String value = choiceBox . getValue ();

@Override

public void start ( Stage primaryStage ) throws Exception {

FlowPane flowPane = new FlowPane ();

ChoiceBox < String > choiceBox = new ChoiceBox < String > ();

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 ( " 打篮球 " );

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

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

CheckBox c3 = new CheckBox ( " 打豆豆 " ); 页面制作

布局设置

文本控件设置

输入框控件设置

单选框设置

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

再把布局对象当成组件放到对应的网格中

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

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

}

// 新建布局

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 h1 = new HBox ();

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

// 构建选项集合

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

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

ChoiceBox < String > choiceBox = new ChoiceBox < String > ( 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 布局对象 , 这两个布局对象中已经放了相应的控件了

完整代码

@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 ( " 用户名 " );

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 h1 = new HBox ();

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

// 构建选项集合

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

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

ChoiceBox < String > choiceBox = new ChoiceBox < String > ( items );

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

choiceBox . addAll ( list );

// 设置下拉框默认值

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

// 复选框

CheckBox c1 = new CheckBox ( " 打篮球 " ); 按钮事件制作

取消按钮

注册按钮

需要在这里获取到对应的值 , 然后带入数据库执行插入操作 , 对于绝大部门控件 , 都可以通过 getText() 获得其中的文本内容 , 下拉

框则需要使用 getValue() 方法 , 而对于单选框与多选框 , 则需要对选中状态进行判断

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

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

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

// 主容器标题设置

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

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

primaryStage . setScene ( scene );

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

primaryStage . show ();

}

cancel . setOnAction ( e -> {

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

}); // 获得用户名

String username = f1 . getText ();

// 获得密码

String password = f2 . getText ();

// 获得性别 men 男单选框 miss 女单选框

String gender = " 男 " ; // 默认是选中了男 , 可以查看上面的代码

if ( miss . isSelected ()){

gender = " 女 " ;

}

// 通过拼接的方式获得所有的爱好 每个爱好以 , 隔开

StringJoiner joiner = new StringJoiner ( "," );

// 对于复选框而言 , 如果该复选框被选中 , 则记录该值

if ( c1 . isSelected ()){

joiner . add ( c1 . getText ());

}

if ( c2 . isSelected ()){

joiner . add ( c1 . getText ());

}

if ( c3 . isSelected ()){

joiner . add ( c1 . getText ());

}

String hobby = joiner . toString ();

可以使用正常的拼接 , 但是后面会多一个逗号 , 所以推荐使用 StringJoiner 该类会帮我们加上自定义的分隔符

// 下拉框选中的值

String address = choiceBox . getValue (). toString ();

这里拿到的如果是 Object, 我们需要的地址是 String, 所以请记得调用 toString() 方法

下面就可以去数据库访问了 ( ● ' ◡ ' ● )