目标 :
网格布局面板的使用
Dao 层交互
舞台与场景切换
其他控件的使用
网格布局
将整个面板划分为若干个格子 , 每个格子的大小是一样的 , 每个格子中可以放置一个控件（布局） , 类似于表格的方式。在网格布局
中放入控件的时候 , 还需要指定位置。
我们将要排出这个布局 , 也就是登陆页面的优化版本
位置原理讲解
以网格布局的思维来拆分该布局 , 可以分出一个 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() 方法本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
