JavaFX API具有将UI控件显示到场景图上的布局类。
HBox布局类将JavaFX子节点放在水平行中。 新的子节点附加到右侧的末尾。默认情况下，HBox布局尊重子节点的首选宽度和高度。
当父节点不可调整大小时，例如Group节点，HBox的行高度设置为子节点的最大首选高度。
默认情况下，每个子节点与左上(Pos.TOP_LEFT)位置对齐。
我们可以通过编程方式改变HBox的布局约束，例如边框，填充，边距，间距和对齐。
当处理不可缩放的子节点(如Shape节点)时，父节点会考虑Shape的矩形边界(ParentInBounds)的宽度和高度。
当处理诸如TextField控件之类可调整大小的节点时，父节点计算TextField水平增长的可用空间。
要在HBox中水平增长UI控件，请使用静态HBox.setHgrow()方法。

边框，填充，边距，间距和对齐

image.png
边框
边框样式：
1. border-style边框样式(hidden隐藏、none无边框、dotted电线、dashed虚线、soild实线、double两个边框、groove3D沟槽边框、ridge3D脊边框、inset3D嵌入边框、outset3D突出边框):可以单独设置一边的样式。
border-top-style、border-bottom-style、border-right-style、border-left-style。

缩写：
① border-style: 上 右 下 左;
②border-style: 上 左右 下;
③border-style: 上下 左右;
④border-style: 上下左右;

  1. border-width边框宽度(5px、medium):可以单独设置一边的宽度。
    border-top-width上边框、border-bottom-width下边框、border-right-width有边框、border-left-width左边框。

  2. border-color边框颜色: 可以单独设置一边的颜色。
    border-top-color、border-bottom-color、border-right-color、border-left-color

缩写：
①border: 5px solid red;
②border-top:5px solid red ;
③border-bottom:5px solid red ;
④border-right:5px solid red ;
⑤border-left:5px solid red ;

轮廓
轮廓样式：轮廓是在边框外面的一层，其用法同边框。

outline-style
outline-color
outline-width
缩写：outline:green dotted thick ;

边距
边距：（百分数、em、px）
margin-top
margin-bottom
margin-right
margin-left
缩写：margin: 上 右 下 左;

填充
填充：（百分数、em、px）
padding-top
padding-bottom
padding-left
padding-right
缩写：padding: 上 右 下 左;

尺寸
尺寸：（百分数、em、px）
包括height、width
height、max-height、min-height
width、max-width、min-width

HBox：每个子节点之间的水平间距

  1. package com.javafx03;
  3. import javafx.application.Application;
  4. import javafx.geometry.Insets;
  5. import javafx.scene.Group;
  6. import javafx.scene.Scene;
  7. import javafx.scene.control.Button;
  8. import javafx.scene.layout.HBox;
  9. import javafx.scene.shape.Rectangle;
  10. import javafx.stage.Stage;
  12. public class JavaFx05 extends Application {
  14.     @Override
  15.     public void start(Stage stage) throws Exception {
  16.         //每个子节点之间的水平间距25
  17.         HBox hbox = new HBox(25);
  18.         Scene scene = new Scene(hbox, 300, 250);
  20.         Button b1 = new Button("按钮1");
  21.         Button b2 = new Button("按钮2");
  22.         Button b3 = new Button("按钮3");
  24.         hbox.getChildren().addAll(b1,b2,b3);
  26.         stage.setScene(scene);
  27.         stage.show();
  28.     }
  31.     public static void main(String[] args) {
  32.         launch(args);
  33.     }
  35. }

水平增长

以下代码将TextField控件设置为在调整父HBox的宽度时水平增长：

  1. TextField  myTextField = new TextField();
  2. HBox.setHgrow(myTextField,  Priority.ALWAYS);

请阅读下面的完整源代码。 

  1. import javafx.application.Application;
  2. import javafx.scene.Scene;
  3. import javafx.scene.control.TextField;
  4. import javafx.scene.layout.HBox;
  5. import javafx.scene.layout.Priority;
  6. import javafx.scene.paint.Color;
  7. import javafx.stage.Stage;
  9. public class Main extends Application {
  10.     @Override
  11.     public void start(Stage stage) {
  12.         TextField myTextField = new TextField();
  13.         HBox hbox = new HBox();
  14.         hbox.getChildren().add(myTextField);
  15.         //设置之后父节点增长 也跟着增长
  16.         HBox.setHgrow(myTextField, Priority.ALWAYS);
  18.         Scene scene = new Scene(hbox, 320, 112, Color.rgb(0, 0, 0, 0));
  19.         stage.setScene(scene);
  20.         stage.show();
  21.     }
  23.     public static void main(String[] args) {
  24.         launch(args);
  25.     }
  26. }

image.png

Insets 设置偏移量

以下代码向HBox添加了四个矩形，设置了HBox约束，并演示了HBox布局控件的许多间距属性。矩形节点不可调整大小。

  1. import javafx.application.Application;
  2. import javafx.geometry.Insets;
  3. import javafx.scene.Group;
  4. import javafx.scene.Scene;
  5. import javafx.scene.layout.HBox;
  6. import javafx.scene.shape.Rectangle;
  7. import javafx.stage.Stage;
  9. public class Main extends Application {
  10.     @Override
  11.     public void start(Stage stage) {
  12.         Group root = new Group();
  13.         Scene scene = new Scene(root, 300, 250);
  14.         //HBox内部控件之间的间隔
  15.         HBox hbox = new HBox(5);
  16.         //new Insets(1):距离边框上下左右距离
  17.         hbox.setPadding(new Insets(1));
  18.         Rectangle r1 = new Rectangle(10, 10);
  19.         Rectangle r2 = new Rectangle(20, 100);
  20.         Rectangle r3 = new Rectangle(50, 20);
  21.         Rectangle r4 = new Rectangle(20, 50);
  22.         //构造一个具有四个不同偏移量的新 Insets 实例。 
  23.         // @param top 上偏移 
  24.         // @param right 右偏移 
  25.         // @param bottom 下偏移 
  26.         // @param left 左偏移
  27.         HBox.setMargin(r1, new Insets(2, 2, 2, 2));
  29.         hbox.getChildren().addAll(r1, r2, r3, r4);
  30.         root.getChildren().add(hbox);
  32.         stage.setScene(scene);
  33.         stage.show();
  34.     }
  36.     public static void main(String[] args) {
  37.         launch(args);
  38.     }
  39. }

在HBox中增长

  1. import javafx.application.Application;
  2. import javafx.scene.Group;
  3. import javafx.scene.Scene;
  4. import javafx.scene.control.Button;
  5. import javafx.scene.layout.HBox;
  6. import javafx.scene.layout.Priority;
  7. import javafx.scene.paint.Color;
  8. import javafx.stage.Stage;
  10. public class Main extends Application {
  11.     public static void main(String[] args) {
  12.         Application.launch(args);
  13.     }
  15.     @Override
  16.     public void start(Stage primaryStage) {
  17.         primaryStage.setTitle("");
  18.         Group root = new Group();
  19.         Scene scene = new Scene(root, 300, 250, Color.WHITE);
  21.         HBox hbox = new HBox();
  22.         Button button1 = new Button("Add               ");
  23.         Button button2 = new Button("Remove   ");
  24.         HBox.setHgrow(button1, Priority.ALWAYS);
  25.         HBox.setHgrow(button2, Priority.ALWAYS);
  26.         button1.setMaxWidth(Double.MAX_VALUE);
  27.         button2.setMaxWidth(Double.MAX_VALUE);
  28.         hbox.getChildren().addAll(button1, button2);
  30.         root.getChildren().add(hbox);
  31.         primaryStage.setScene(scene);
  32.         primaryStage.show();
  33.     }
  34. }

image.png

设置HBox宽度

  1. import javafx.application.Application;
  2. import javafx.scene.Group;
  3. import javafx.scene.Scene;
  4. import javafx.scene.control.Button;
  5. import javafx.scene.layout.HBox;
  6. import javafx.scene.layout.Priority;
  7. import javafx.scene.paint.Color;
  8. import javafx.stage.Stage;
  10. public class Main extends Application {
  11.     public static void main(String[] args) {
  12.         Application.launch(args);
  13.     }
  15.     @Override
  16.     public void start(Stage primaryStage) {
  17.         primaryStage.setTitle("");
  18.         Group root = new Group();
  19.         Scene scene = new Scene(root, 300, 250, Color.WHITE);
  21.         HBox hbox = new HBox();
  22.         Button button1 = new Button("Add               ");
  23.         Button button2 = new Button("Remove   ");
  24.         HBox.setHgrow(button1, Priority.ALWAYS);
  25.         HBox.setHgrow(button2, Priority.ALWAYS);
  26.         button1.setMaxWidth(Double.MAX_VALUE);
  27.         button2.setMaxWidth(Double.MAX_VALUE);
  28.         hbox.getChildren().addAll(button1, button2);
  30.         hbox.setPrefWidth(400);
  32.         root.getChildren().add(hbox);
  33.         primaryStage.setScene(scene);
  34.         primaryStage.show();
  35.     }
  36. }

image.png

在HBox的控件之间设置空格(空间)

  1. import javafx.application.Application;
  2. import javafx.scene.Group;
  3. import javafx.scene.Scene;
  4. import javafx.scene.control.Button;
  5. import javafx.scene.layout.HBox;
  6. import javafx.scene.layout.Priority;
  7. import javafx.scene.paint.Color;
  8. import javafx.stage.Stage;
  10. public class Main extends Application {
  11.     public static void main(String[] args) {
  12.         Application.launch(args);
  13.     }
  15.     @Override
  16.     public void start(Stage primaryStage) {
  17.         primaryStage.setTitle("");
  18.         Group root = new Group();
  19.         Scene scene = new Scene(root, 300, 250, Color.WHITE);
  21.         //设置内部元素之间的空格
  22.         HBox hbox = new HBox(8);// space
  23.         Button button1 = new Button("Add               ");
  24.         Button button2 = new Button("Remove   ");
  25.         HBox.setHgrow(button1, Priority.ALWAYS);
  26.         HBox.setHgrow(button2, Priority.ALWAYS);
  27.         button1.setMaxWidth(Double.MAX_VALUE);
  28.         button2.setMaxWidth(Double.MAX_VALUE);
  29.         hbox.getChildren().addAll(button1, button2);
  31.         hbox.setPrefWidth(400);
  33.         root.getChildren().add(hbox);
  34.         primaryStage.setScene(scene);
  35.         primaryStage.show();
  36.     }
  37. }

HBox设置填充和间距

  1. import javafx.application.Application;
  2. import javafx.geometry.Insets;
  3. import javafx.scene.Scene;
  4. import javafx.scene.control.Button;
  5. import javafx.scene.layout.HBox;
  6. import javafx.stage.Stage;
  8. public class Main extends Application {
  9.     public static void main(String[] args) {
  10.         Application.launch(args);
  11.     }
  13.     @Override
  14.     public void start(Stage primaryStage) {
  15.         primaryStage.setTitle("HBox Test");
  17.         // HBox
  18.         HBox hb = new HBox();
  19.         //填充
  21.         hb.setPadding(new Insets(150, 12, 15, 12));
  22.         hb.setSpacing(10);
  24.         // Buttons
  25.         Button btn1 = new Button();
  26.         btn1.setText("Button1");
  27.         hb.getChildren().add(btn1);
  29.         Button btn2 = new Button();
  30.         btn2.setText("Button2");
  31.         hb.getChildren().add(btn2);
  33.         Button btn3 = new Button();
  34.         btn3.setText("Button3");
  35.         hb.getChildren().add(btn3);
  37.         Button btn4 = new Button();
  38.         btn4.setText("Button4");
  39.         hb.getChildren().add(btn4);
  41.         // Adding HBox to the scene
  42.         Scene scene = new Scene(hb);
  43.         primaryStage.setScene(scene);
  44.         primaryStage.show();
  45.     }
  46. }

image.png