Fx 网格布局
网格布局
将整个面板划分为若干个格子,每个格子的大小是一样的,每个格子中可以放置一个控件（布局）,类似于表格的方式。在网格布局 中放入控件的时候,还需要指定位置
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);
gridPane.add(name, 1, 0);
gridPane.add(l2, 0, 1);
gridPane.add(pwd, 1, 1);
gridPane.add(login, 0, 2);
网格布局默认是左上角的
代码可以调整
gridPane.setAlignment(Pos.CENTER);
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)
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();//构建单选按钮组
@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();
}
这样的单选框是无法实现单选功能的,只有当单选按钮在一组的时候才能完成单选功能
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.setValue("湖南省");
//被选中选项的下标
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();
}
完整代码
@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 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);
//生成场景并完成布局绑定,同时设定场景大小
Scene scene = new Scene(gridPane, 300, 200);
//主容器标题设置
primaryStage.setTitle("网格登录");
//给主容器绑定场景（让场景显示出来）
primaryStage.setScene(scene);
//不要忘了这一行,让主容器显示
primaryStage.show();
}
浙公网安备 33010602011771号