Lesson14 HBox 和 VBox

HBox → 水平布局

    Button b1 = new Button("button1");
    Button b2 = new Button("button2");
    Button b3 = new Button("button3");

    AnchorPane ap = new AnchorPane();
    ap.setStyle("-fx-background-color: #AEEEEE");
    HBox box = new HBox();
    box.setPrefWidth(400);
    box.setPrefHeight(400);
    box.getChildren().addAll(b1,b2,b3);
    box.setStyle("-fx-background-color: #E066FF");
    ap.getChildren().add(box);

HBox 类添加的按钮都是水平排列的,如下图

hbox_button

设置所有子组件的内边距,设置所有子组件的间距

    box.setPadding(new Insets(10));//设置所有子组件内边距为10px
    box.setSpacing(10);//设置所有子组件的间距(空间)

HBox

设置单个子组件b1的外边距

    box.setMargin(b1,new Insets(10));//设置单个子组件b1的外边距

HBox

设置所有/某个组件的对齐方式

    box.setAlignment(Pos.BOTTOM_CENTER);//设置所有组件的对齐方式,底居中
    box.setAlignment(b,Pos.BOTTOM_CENTER);//设置某个组件的对齐方式,底居中

VBox → 垂直布局

VBox 类添加的按钮都是垂直排列的,如下图
AnchorPane ap = new AnchorPane();
ap.setStyle("-fx-background-color: #AEEEEE");
VBox box = new VBox();

    Button b1 = new Button("button1");
    Button b2 = new Button("button2");
    Button b3 = new Button("button3");

    box.setPrefWidth(400);
    box.setPrefHeight(400);
    box.getChildren().addAll(b1,b2,b3);
    box.setStyle("-fx-background-color: #E066FF");
    ap.getChildren().add(box);

vbox_button