javafx教程

参考
https://jenkov.com/tutorials/javafx/hbox.html

布局

TitledPane 可折叠面板

可折叠面板，

  TitledPane titledPane = new TitledPane(
                "Advanced",标题
                advancedVBox，面板中的元素
        );
   titledPane.setExpanded( false );控制折叠开启

TilePane 平铺

    TilePane tilePane = new TilePane();
        tilePane.setPrefColumns(3);3列
        tilePane.setPrefRows(3);3行
        tilePane.setTileAlignment( Pos.CENTER );居中

        tilePane.getChildren().addAll(....）添加子元素
        tilePane.setPrefTileHeight(100);子元素固定高
        tilePane.setPrefTileWidth(100);子元素固定宽
 tilePane.setOnMouseClicked(事件

            (evt) -> tilePane
                        .getChildren()
                        .stream()
                        .filter( c ->
                            c.contains(
                              c.sceneToLocal(evt.getSceneX(), evt.getSceneY(), true)
                            )
                         )
                        .findFirst()
                        .ifPresent(
                                (c) -> {
                                    Boolean selected = (Boolean) c.getProperties().get("selected");
                                    if( selected == null || selected == Boolean.FALSE ) {
                                        c.setOpacity(0.3d);
                                        c.getProperties().put("selected", Boolean.TRUE);
                                    } else {
                                        c.setOpacity( 1.0d );
                                        c.getProperties().put("selected", Boolean.FALSE);
                                    }
                                }
                        )
        );

AnchorPane布局

控制子元素在父元素中的左右上下位置，具有拉伸以填充可用空间（特别是设置了左中上下位置中将拉伸）

AnchorPane ap = new AnchorPane();

        // 文字连接组件
        Hyperlink signoutLink = new Hyperlink("Sign Out");

        ap.getChildren().add( signoutLink );
		//
        AnchorPane.setTopAnchor( signoutLink, 10.0d );
        AnchorPane.setRightAnchor( signoutLink, 10.0d );
		AnchorPane.setBottomAnchor( signoutLink, 40.0d );
        AnchorPane.setLeftAnchor( signoutLink, 10.0d );

GridPane网格

可以理解成VUE中的表格，有行有列，可以合并单元格，可以设置单元格的距离、单元格元素拉伸填充空白。通过ColumnConstraints RowConstraints设置行列的宽高

 GridPane gp = new GridPane();
        gp.setPadding( new Insets(10) );内间距
        gp.setHgap( 4 );水平距离
        gp.setVgap( 8 );垂直距离
        VBox.setVgrow(gp, Priority.ALWAYS );列填充空白

        Label lblTitle = new Label("Support Ticket");

        Label lblEmail = new Label("Email");
        TextField tfEmail = new TextField();

        Label lblPriority = new Label("Priority");
        ObservableList<String> priorities =
            FXCollections.observableArrayList("Medium", "High", "Low");
        ComboBox<String> cbPriority = new ComboBox<>(priorities);

        Label lblProblem = new Label("Problem");
        TextField tfProblem = new TextField();

        Label lblDescription = new Label("Description");
        TextArea taDescription = new TextArea();
		向网格中加元素，第一个参数是元素组件第二个参数是行位置，第三个参数是列位置
        gp.add( lblTitle,       1, 1);  // empty item at 0,0
        gp.add( lblEmail,       0, 2); gp.add(tfEmail,        1, 2);
        gp.add( lblPriority,    0, 3); gp.add( cbPriority,    1, 3);
        gp.add( lblProblem,     0, 4); gp.add( tfProblem,     1, 4);
        gp.add( lblDescription, 0, 5); gp.add( taDescription, 1, 5);

        Separator sep = new Separator(); // hr线

VBOX（竖向排列）和HBOX（横向排列）

可以设置外边距、填充空白区、对齐方式

		VBox vbox = new VBox();

        HBox topControls = new HBox();
        VBox.setMargin( topControls, new Insets(10.0d) );//vbox中控制topControls外边距 
        topControls.setAlignment( Pos.BOTTOM_LEFT );//topControls设置对齐

        Button btnRefresh = new Button("Refresh");

        HBox topRightControls = new HBox();
        HBox.setHgrow(topRightControls, Priority.ALWAYS );//拉伸填充空白区
        topRightControls.setAlignment( Pos.BOTTOM_RIGHT );
        Hyperlink signOutLink = new Hyperlink("Sign Out");
        topRightControls.getChildren().add( signOutLink );

        topControls.getChildren().addAll( btnRefresh, topRightControls );

        TableView<Customer> tblCustomers = new TableView<>();
        tblCustomers.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
        VBox.setMargin( tblCustomers, new Insets(0.0d, 10.0d, 10.0d, 10.0d) );
        VBox.setVgrow( tblCustomers, Priority.ALWAYS );

        TableColumn<Customer, String> lastNameCol = new TableColumn<>("Last Name");
        lastNameCol.setCellValueFactory(new PropertyValueFactory<>("lastName"));

        TableColumn<Customer, String> firstNameCol = new TableColumn<>("First Name");
        firstNameCol.setCellValueFactory(new PropertyValueFactory<>("firstName"));

        tblCustomers.getColumns().addAll( lastNameCol, firstNameCol );

        Separator sep = new Separator();

        HBox bottomControls = new HBox();
        bottomControls.setAlignment(Pos.BOTTOM_RIGHT );
        VBox.setMargin( bottomControls, new Insets(10.0d) );

        Button btnClose = new Button("Close");

        bottomControls.getChildren().add( btnClose );

        vbox.getChildren().addAll(
                topControls,
                tblCustomers,
                sep,
                bottomControls
        );

StackPane

叠加布局

SplitPane分割布局

SplitPane是分割块，将两个或多个区域分割，并且可以通过鼠标选中边界移动来改变块的大小。
分割区域拖动大小受到区域子控件最大最小控制minWidth=“60.0”；若同时设置layoutY=“51.0” prefWidth="250.0"该分割区域就不能拖动大小
设置每个区域大小百分比，dividerPositions=“0.25, 0.75”(0号区域0.25；1号区域0.5；剩下区域0.25)，后面百分比在前一个之上累加，直到累加到1
可以水平分割
可以垂直分割
可以嵌套使用

import javafx.application.Application;
import javafx.geometry.Orientation;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class SplitPane_demo extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    public void start(Stage primaryStage) {

        SplitPane splitPane = new SplitPane();
//        splitPane.setOrientation(Orientation.HORIZONTAL);//  水平
        splitPane.setOrientation(Orientation.VERTICAL);
        VBox top  = new VBox(new Label("top"));
        VBox bottom = new VBox(new Label("bottom"));

        VBox left = new VBox(new Label("left"));
        VBox center = new VBox(new Label("center"));
        VBox right = new VBox(new Label("right"));
        SplitPane splitPane1 = new SplitPane();中间部分
        splitPane1.getItems().setAll(left,center,right);

        splitPane.getItems().addAll(top,splitPane1, bottom);
        
    }
}