JavaFX布局-TilePane

• 自动排列其子节点成网格状
• 根据容器的大小以及子节点的数量和大小自动计算最佳的排列方式
• 推荐子节点固定大小，参差不齐的子节点，效果很诡异

常用属性

alignment

对齐方式

tilePane.setAlignment(Pos.CENTER_RIGHT);
public enum Pos {
   /**
    * Represents positioning on the top vertically and on the left horizontally.
    */
   TOP_LEFT(TOP, LEFT),

   /**
    * Represents positioning on the top vertically and on the center horizontally.
    */
   TOP_CENTER(TOP, HPos.CENTER),

   /**
    * Represents positioning on the top vertically and on the right horizontally.
    */
   TOP_RIGHT(TOP, RIGHT),

   /**
    * Represents positioning on the center vertically and on the left horizontally.
    */
   CENTER_LEFT(VPos.CENTER, LEFT),

   /**
    * Represents positioning on the center both vertically and horizontally.
    */
   CENTER(VPos.CENTER, HPos.CENTER),

   /**
    * Represents positioning on the center vertically and on the right horizontally.
    */
   CENTER_RIGHT(VPos.CENTER, RIGHT),

   /**
    * Represents positioning on the bottom vertically and on the left horizontally.
    */
   BOTTOM_LEFT(BOTTOM, LEFT),

   /**
    * Represents positioning on the bottom vertically and on the center horizontally.
    */
   BOTTOM_CENTER(BOTTOM, HPos.CENTER),

   /**
    * Represents positioning on the bottom vertically and on the right horizontally.
    */
   BOTTOM_RIGHT(BOTTOM, RIGHT),

   /**
    * Represents positioning on the baseline vertically and on the left horizontally.
    */
   BASELINE_LEFT(BASELINE, LEFT),

   /**
    * Represents positioning on the baseline vertically and on the center horizontally.
    */
   BASELINE_CENTER(BASELINE, HPos.CENTER),

   /**
    * Represents positioning on the baseline vertically and on the right horizontally.
    */
   BASELINE_RIGHT(BASELINE, RIGHT);
}    

tileAlignment

子节点对齐方式

tilePane.setTileAlignment(Pos.CENTER);

orientation

排列方式，Orientation.VERTICAL、Orientation.HORIZONTAL

tilePane.setOrientation(Orientation.HORIZONTAL);

hgap

水平间距

tilePane.setHgap(10);

vgap

垂直间距

tilePane.setVgap(10);

padding

内边距，可以单独设置上、下、左、右的内边距

tilePane.setPadding(new Insets(10, 10, 10, 10));

实现方式

Java

    public static TilePane demo1() {
        // 创建TilePane
        TilePane tilePane = new TilePane();
        // 容器位置
        tilePane.setAlignment(Pos.BOTTOM_LEFT);
        // 子节点位置
        tilePane.setTileAlignment(Pos.CENTER);
        // 排列方向
        tilePane.setOrientation(Orientation.HORIZONTAL);
        // 水平间距
        tilePane.setHgap(10);
        // 垂直间距
        tilePane.setVgap(10);
        // 内边距
        tilePane.setPadding(new Insets(10, 10, 10, 10));

        // 圆形
        Circle circle = new Circle(50, Color.RED);
        tilePane.getChildren().addAll(circle);

        // 矩形
        Rectangle rectangle = new Rectangle(100, 80, Color.BLUE);
        tilePane.getChildren().addAll(rectangle);

        // 按钮
        for (int i = 0; i < 10; i++) {
            Button button = new Button("Button " + (i + 1));
            tilePane.getChildren().addAll(button);
        }

        return tilePane;
    }

fxml

<TilePane xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" prefHeight="400"
          prefWidth="600" alignment="BOTTOM_LEFT" tileAlignment="CENTER" vgap="10" hgap="10" orientation="HORIZONTAL">
    <padding>
        <Insets left="10" top="5" right="10" bottom="5"/>
    </padding>
    <children>
        <Circle fill="red" radius="50"/>
        <Rectangle fill="blue" height="80" width="100"/>
        <Button text="button 1"/>
        <Button text="button 2"/>
        <Button text="button 3"/>
        <Button text="button 4"/>
        <Button text="button 5"/>
        <Button text="button 6"/>
        <Button text="button 7"/>
        <Button text="button 8"/>
        <Button text="button 9"/>
        <Button text="button 10"/>
    </children>
</TilePane>