JavaFx新手入门之布局 - SplitPane分隔容器

JavaFx新手入门，首先应该从布局容器入手，常用的布局容器有StackPane, BorderPane, HBox, VBox等，本文介绍相对使用频率较少的SplitPane，分隔容器

怎么创建分隔的视图区域？

SplitPane的一级子Node就是SplitPane所分开的一个视图区域，例如下fxml代码：

<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<StackPane fx:controller="sample.Controller"
           xmlns:fx="http://javafx.com/fxml" alignment="center">

    <SplitPane fx:id="splitpane">
        <VBox fx:id="left" prefWidth="300" prefHeight="200" style="-fx-background-color: antiquewhite">
            <ImageView fx:id="image1" preserveRatio="true" pickOnBounds="true">
                <image>
                    <Image url="@/sample/test.jpg"/>
                </image>
            </ImageView>
        </VBox>
        <VBox fx:id="right" prefWidth="300" prefHeight="300" style="-fx-background-color: aquamarine">
            <ImageView fx:id="image2" preserveRatio="true" pickOnBounds="true">
                <image>
                    <Image url="@/sample/test.jpg"/>
                </image>
            </ImageView>
        </VBox>
    </SplitPane>
</StackPane>

SplitPane中有图片的话，怎么让ImageView随着视图区域的变化而变化？

答案是：监听SplitPane的divider的变化，动态去改变ImageView的大小

@Override
  public void initialize(URL location, ResourceBundle resources){
      splitpane.getDividers().get(0).positionProperty().addListener((observable, oldValue, newValue) -> {
          System.out.println(newValue);
          int w = 600;
          double w1 = w * newValue.doubleValue();
          double w2 = w - w1;
          image1.setFitWidth(w1);
          image2.setFitWidth(w2);
      });
  }