网格布局

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

我们可以给格子从上到下,从左到右依次编号,分别是：

GridPane gridPane = new GridPane();

javafx保存登录状态 javafx登录界面布局_javafx保存登录状态

代码讲解：设置位置

//新建文本标签：用户名 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);

网格布局中的网格是默认居左上的

可以通过代码调整其网格位置

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

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

设置两个按钮为一组

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

下拉框 ChoiceBox

下拉框的选项是一个 ObservableList ,所以我们是无法直接向其中添加文本作为下拉框选项,需要进行代码改造 1. 将文本内容放到List集合中 2. 将List集合转换成一个 ObservableList 3. 通过构造方法或者是 setItems 方法给下拉框设置选项

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

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

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

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

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

//定义下拉框内容集合
List<String> items = Arrays.asList("湖南省", "四川省", "湖北省");
//转换成下拉框需要的数据集合
ObservableList<String> items = FXCollections.observableList(list);
//通过构造方法设置选项
ChoiceBox choiceBox = new ChoiceBox(items);
ChoiceBox choiceBox = new ChoiceBox();
choiceBox.getItems().add("湖南省");
choiceBox.getItems().add("四川省");
choiceBox.getItems().add("湖北省");
ChoiceBox<String> choiceBox = new ChoiceBox<String>();
choiceBox.getItems().addAll("湖南省","四川省","湖北省");
choiceBox.setValue("湖南省");
//被选中选项的下标
int selectedIndex = choiceBox.getSelectionModel().getSelectedIndex();
//被选中的选项
String selectedItem = choiceBox.getSelectionModel().getSelectedItem();
完整代码
复选框的使用
对于复选框和单选框,都可以通过 setSelected(boolean) 来设置选中状态,通过 isSelected() 来获取选中状态
完整代码
//被选中选项的下标
int selectedIndex = choiceBox.getSelectionModel().getSelectedIndex();
//被选中的选项
String selectedItem = choiceBox.getSelectionModel().getSelectedItem();
String value = choiceBox.getValue();

复选框 CheckBox

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

CheckBox c1 = new CheckBox("打篮球");
CheckBox c2 = new CheckBox("打游戏");
CheckBox c3 = new CheckBox("打豆豆");

界面美化

//新建布局
GridPane gridPane = new GridPane();
//设置居中方式
gridPane.setAlignment(Pos.CENTER);
//调整间隙
gridPane.setHgap(10);
gridPane.setVgap(10);

取消按钮 点击事件

cancel.setOnAction(e->{
Platform.exit();//退出程序
});