网格布局
GridPane通常用于布局：表单布局
GridPane可以在行，列或单元格级别指定约束。
例如，我们可以设置包含输入文本字段的第二列，以在窗口调整大小时调整大小。

使用Java FX创建表格的时候，这个布局非常方便。

包javafx.scene.layout名为GridPane这个类提供了 11 个属性，它们是 -

  • alignment- 此属性可以设置位置，使用方式setAlignment()方法设置此属性的值。

放置在顶部，底部，左侧，右侧和中心区域中的节点的默认对齐方式如下：

  1.   - 顶部: Pos.TOP_LEFT
  2.   - 底部: Pos.BOTTOM_LEFT
  3.   - 左侧: Pos.TOP_LEFT
  4.   - 右侧: Pos.TOP_RIGHT
  5.   - 中心: Pos.CENTER
  • hgap- 此属性的类型为double，表示列之间的水平差距。
  • vgap- 属性的类型为double，它表示行之间的垂直间距。
  • gridLinesVisible- 此属性是布尔类型，显示表格线
  1. import javafx.application.Application;
  2. import javafx.geometry.HPos;
  3. import javafx.geometry.Insets;
  4. import javafx.scene.Scene;
  5. import javafx.scene.control.Button;
  6. import javafx.scene.control.Label;
  7. import javafx.scene.control.TextField;
  8. import javafx.scene.layout.BorderPane;
  9. import javafx.scene.layout.ColumnConstraints;
  10. import javafx.scene.layout.GridPane;
  11. import javafx.scene.layout.Priority;
  12. import javafx.scene.paint.Color;
  13. import javafx.stage.Stage;
  15. public class Main extends Application {
  16.     public static void main(String[] args) {
  17.         Application.launch(args);
  18.     }
  20.     @Override
  21.     public void start(Stage primaryStage) {
  22.         BorderPane root = new BorderPane();
  23.         Scene scene = new Scene(root, 380, 300, Color.WHITE);
  25.         GridPane gridpane = new GridPane();
  26.         //表格实线
  27.         gridpane.setGridLinesVisible(true);
  28.         gridpane.setPadding(new Insets(5));
  29.         //水平间距
  30.         gridpane.setHgap(5);
  31.         //垂直间距
  32.         gridpane.setVgap(50);
  33.         ColumnConstraints column1 = new ColumnConstraints(100);
  34.         ColumnConstraints column2 = new ColumnConstraints(50, 150, 300);
  35.         column2.setHgrow(Priority.ALWAYS);
  36.         gridpane.getColumnConstraints().addAll(column1, column2);
  38.         Label fNameLbl = new Label("First Name");
  39.         TextField fNameFld = new TextField();
  40.         Label lNameLbl = new Label("Last Name");
  41.         TextField lNameFld = new TextField();
  43.         Button saveButt = new Button("Save");
  45.         // First name label
  46.         GridPane.setHalignment(fNameLbl, HPos.RIGHT);
  47.         gridpane.add(fNameLbl, 0, 0);
  49.         // Last name label
  50.         GridPane.setHalignment(lNameLbl, HPos.RIGHT);
  51.         gridpane.add(lNameLbl, 0, 1);
  53.         // First name field
  54.         GridPane.setHalignment(fNameFld, HPos.LEFT);
  55.         gridpane.add(fNameFld, 1, 0);
  57.         // Last name field
  58.         GridPane.setHalignment(lNameFld, HPos.LEFT);
  59.         gridpane.add(lNameFld, 1, 1);
  61.         // Save button
  62.         GridPane.setHalignment(saveButt, HPos.RIGHT);
  63.         gridpane.add(saveButt, 1, 2);
  65.         root.setCenter(gridpane);
  66.         primaryStage.setScene(scene);
  67.         primaryStage.show();
  68.     }
  69. }

image.png

示例

以下代码演示使用GridPane布局的简单表单应用程序。它有以下布局。

  1. +------------------------+
  2. | [label ] [   field   ] |
  3. | [label ] [   field   ] |
  4. |             [ button ] |
  5. +------------------------+

image.png
完整的代码实现如下所示 - 

  1. import javafx.application.Application;
  2. import javafx.geometry.HPos;
  3. import javafx.geometry.Insets;
  4. import javafx.scene.Scene;
  5. import javafx.scene.control.Button;
  6. import javafx.scene.control.Label;
  7. import javafx.scene.control.TextField;
  8. import javafx.scene.layout.BorderPane;
  9. import javafx.scene.layout.ColumnConstraints;
  10. import javafx.scene.layout.GridPane;
  11. import javafx.scene.layout.Priority;
  12. import javafx.scene.paint.Color;
  13. import javafx.stage.Stage;
  15. public class Main extends Application {
  16.     public static void main(String[] args) {
  17.         Application.launch(args);
  18.     }
  20.     @Override
  21.     public void start(Stage primaryStage) {
  22.         BorderPane root = new BorderPane();
  23.         Scene scene = new Scene(root, 380, 150, Color.WHITE);
  25.         GridPane gridpane = new GridPane();
  26.         gridpane.setPadding(new Insets(5));
  27.         gridpane.setHgap(5);
  28.         gridpane.setVgap(5);
  29.         ColumnConstraints column1 = new ColumnConstraints(100);
  30.         ColumnConstraints column2 = new ColumnConstraints(50, 150, 300);
  31.         column2.setHgrow(Priority.ALWAYS);
  32.         gridpane.getColumnConstraints().addAll(column1, column2);
  34.         Label fNameLbl = new Label("First Name");
  35.         TextField fNameFld = new TextField();
  36.         Label lNameLbl = new Label("Last Name");
  37.         TextField lNameFld = new TextField();
  39.         Button saveButt = new Button("Save");
  41.         // First name label
  42.         GridPane.setHalignment(fNameLbl, HPos.RIGHT);
  43.         gridpane.add(fNameLbl, 0, 0);
  45.         // Last name label
  46.         GridPane.setHalignment(lNameLbl, HPos.RIGHT);
  47.         gridpane.add(lNameLbl, 0, 1);
  49.         // First name field
  50.         GridPane.setHalignment(fNameFld, HPos.LEFT);
  51.         gridpane.add(fNameFld, 1, 0);
  53.         // Last name field
  54.         GridPane.setHalignment(lNameFld, HPos.LEFT);
  55.         gridpane.add(lNameFld, 1, 1);
  57.         // Save button
  58.         GridPane.setHalignment(saveButt, HPos.RIGHT);
  59.         gridpane.add(saveButt, 1, 2);
  61.         root.setCenter(gridpane);
  62.         primaryStage.setScene(scene);
  63.         primaryStage.show();
  64.     }
  65. }

image.png

示例-登录

以下是一个实现登录窗口的代码 -

  2. import javafx.application.Application;
  3. import javafx.event.ActionEvent;
  4. import javafx.event.EventHandler;
  5. import javafx.geometry.Insets;
  6. import javafx.geometry.Pos;
  7. import javafx.scene.Scene;
  8. import javafx.scene.control.Button;
  9. import javafx.scene.control.Label;
  10. import javafx.scene.control.PasswordField;
  11. import javafx.scene.control.TextField;
  12. import javafx.scene.layout.GridPane;
  13. import javafx.scene.layout.HBox;
  14. import javafx.scene.paint.Color;
  15. import javafx.scene.text.Font;
  16. import javafx.scene.text.FontWeight;
  17. import javafx.scene.text.Text;
  18. import javafx.stage.Stage;
  20. public class Main extends Application {
  22.     public static void main(String[] args) {
  23.         launch(args);
  24.     }
  26.     @Override
  27.     public void start(Stage stage) {
  28.         //舞台名称
  29.         stage.setTitle("JavaFX Welcome");
  30.         GridPane grid = new GridPane();
  31.         //GridPane内容居中
  32.         grid.setAlignment(Pos.CENTER);
  33.         //水平间距
  34.         grid.setHgap(10);
  35.         //垂直间距
  36.         grid.setVgap(10);
  37.         //填充:距离上下左右外框
  38.         grid.setPadding(new Insets(25, 25, 25, 25));
  40.         Text scenetitle = new Text("Welcome");
  41.         scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));
  42.         //0行
  43.         //0列
  44.         //占用2列
  45.         //占用1行
  46.         grid.add(scenetitle, 0, 0, 2, 1);
  48.         Label userName = new Label("User Name:");
  49.         grid.add(userName, 0, 1);
  51.         TextField userTextField = new TextField();
  52.         grid.add(userTextField, 1, 1);
  54.         Label pw = new Label("Password:");
  55.         grid.add(pw, 0, 2);
  57.         PasswordField pwBox = new PasswordField();
  58.         grid.add(pwBox, 1, 2);
  60.         Button btn = new Button("Sign in");
  61.         //登录按钮放到水平布局HBox中方便控制左右
  62.         HBox hbBtn = new HBox(10);
  63.         hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
  64.         hbBtn.getChildren().add(btn);
  65.         grid.add(hbBtn, 1, 4);
  67.         final Text actiontarget = new Text();
  68.         grid.add(actiontarget, 1, 6);
  70.         btn.setOnAction(new EventHandler<ActionEvent>() {
  72.             @Override
  73.             public void handle(ActionEvent e) {
  74.                 actiontarget.setFill(Color.FIREBRICK);
  75.                 actiontarget.setText("Sign in button pressed");
  76.             }
  77.         });
  79.         Scene scene = new Scene(grid, 300, 275);
  80.         stage.setScene(scene);
  81.         stage.show();
  82.     }
  83. }

image.png