JavaFX图形化界面(二) 面板类

HBox面板

• 水平布局：内容都是自动水平摆放的

---

• HBox类常用方法：
  hbox.setPadding(new Insets(10,10,10,10)); //填充
  hbox.setSpacing(10);//间距
  hbox.setAlignment(Pos.CENTER); // 设置HBox中子节点的对齐方式为居中
  hbox.getChildren().addAll(button1, button2); // 向HBox中添加两个按钮

public void start(Stage stage) throws Exception{
	HBox hbox = new HBox();
	Button b1 = new Button("按钮1");
	Button b2 = new Button("按钮2");
	Button b3 = new Button("按钮3");
	hbox.getChildren().addAll(b1,b2,b3);
	Scene scene = new Scene(hbox,600,400);
	stage.setScene(scene);
	stage.show();
}

如下图所示：

VBox面板

• 垂直布局:内容都是自动垂直摆放的

BorderPane面板

• UI控件只能放在顶部，底部，左侧，右侧，和中心区域

---

• **BorderPane类常用方法:
  borderPane.setTop(topLabel); // 设置顶部节点为一个标签
  borderPane.setLeft(leftLabel); // 设置左侧节点为一个标签
  borderPane.setRight(rightLabel); // 设置右侧节点为一个标签
  borderPane.setCenter(centerLabel); // 设置中心节点为一个标签
  borderPane.setBottom(bottomLabel); // 设置底部节点为一个标签

 public void start(Stage stage){
        BorderPane borderPane = new BorderPane();
        Button mid = new Button("中间");
        Button top = new Button("顶部");
        Button left = new Button("左侧");
        Button right = new Button("右侧");
        Button bottom = new Button("底部");
        borderPane.setCenter(mid);
        borderPane.setTop(top);
        borderPane.setLeft(left);
        borderPane.setRight(right);
        borderPane.setBottom(bottom);

        Scene scene = new Scene(borderPane,400,300);
        stage.setScene(scene);
        stage.show();
    }

FlowPane面板

• 流式布局是一种自动调整元素位置的布局方式，当容器的宽度不足以容纳所有元素时，元素会自动换行。

public void start(Stage stage){
        FlowPane root = new FlowPane();

        root.setHgap(10);
        root.setVgap(20);
        root.setPadding(new Insets(15,15,15,15));

        // Button 1
        Button button1= new Button("Button1");
        root.getChildren().add(button1);


        // Button 2
        Button button2 = new Button("Button2");
        button2.setPrefSize(100, 100);
        root.getChildren().add(button2);

        // TextField
        TextField textField = new TextField("Text Field");
        textField.setPrefWidth(110);// 设置按钮的首选宽度为110像素


        root.getChildren().add(textField);

        // CheckBox
        CheckBox checkBox = new CheckBox("Check Box");

        root.getChildren().add(checkBox);

        // RadioButton
        RadioButton radioButton = new RadioButton("Radio Button");
        root.getChildren().add(radioButton);

        Scene scene = new Scene(root, 550, 250);

        stage.setTitle("FlowPane Layout Demo");
        stage.setScene(scene);
        stage.show();
 }

GridPane面板

• 网格布局：按行、列进行控件的排列

---

• GridPane类常用方法：
  gridPane.setHgap(10); // 设置网格布局容器中列之间的水平间距为10像素
  gridPane.setVgap(10); // 设置网格布局容器中行之间的垂直间距为10像素
  gridPane.add(button, 1, 0, 2, 1); // 向网格布局容器中添加一个按钮，位于第1列第0行，这个按钮占据了2列，1行

 public void start(Stage stage) throws Exception {
        var rootPane = new GridPane();
        rootPane.setPadding(new Insets(10,10,10,10));
        rootPane.setVgap(5);
        rootPane.setHgap(5);
        final var label1 = new Label("用户名");
        final var name = new TextField();
        name.setPromptText("请输入用户名");
        rootPane.add(label1,0,0);
        rootPane.add(name,1,0);
        Label label2 = new Label("口令");
        var password = new PasswordField();
        password.setPromptText("请输入口令");
        rootPane.add(label2,0,1);
        rootPane.add(password,1,1);
        final var submit = new Button("确定");
        final var reset = new Button("重置");

        rootPane.add(submit,0,2);
        rootPane.add(reset,1,2);
        final  var label = new Label();
        rootPane.add(label,0,3,2,1);
        submit.setOnAction((ActionEvent e)->{
            if((name.getText()!=null&&!name.getText().isEmpty())){
                label.setText(name.getText()+" "+password.getText()+","+"欢迎登录!");
            }else{
                label.setText("用户名不能为空!");
            }
        });
        reset.setOnAction((ActionEvent e)->{
            name.clear();
            password.clear();
            label.setText(null);
        });
        password.setOnAction((ActionEvent e)->{
            if(!password.getText().equals("aaa")){
                label.setText("口令不正确！");
                label.setTextFill(Color.rgb(210,39,30));
            }else{
                label.setText("口令通过");
                label.setTextFill(Color.rgb(21,117,84));
            }
            password.clear();
        });
        rootPane.setGridLinesVisible(true);
        var scene = new Scene(rootPane,300,130);
        stage.setScene(scene);
        stage.setTitle("登录窗口");
        stage.show();

    }
    public static  void main(String[] args){
        Application.launch(args);
    }