JavaFX布局-FlowPane

• 以水平或垂直的方式排列其子节点
• 当空间不足的时候，自动换行以继续排列剩余的节点

常用属性

Alignment

对齐方式，设置内容居中，顶部居中等

flowPane.setAlignment(Pos.TOP_CENTER);
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);
}  

orientation

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

flowPane.setOrientation(Orientation.HORIZONTAL);

hgap

水平间距

flowPane.setHgap(10);

vgap

垂直间距

flowPane.setVgap(10);

padding

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

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

实现方式

Java实现

    public static FlowPane demo1() {
        // 创建FlowPane
        FlowPane flowPane = new FlowPane();

        // 对齐方式
        flowPane.setAlignment(Pos.TOP_CENTER);
        // 内边距
        flowPane.setPadding(new Insets(10, 10, 10, 10));
        // 水品排列
        flowPane.setOrientation(Orientation.HORIZONTAL);
        // 水平间距
        flowPane.setHgap(10);
        // 垂直间距
        flowPane.setVgap(10);
        // 首选换行长度
        flowPane.setPrefWrapLength(400);

        // 创建按钮
        for (int i = 0; i < 10; i++) {
            Button btn = new Button("Button " + (i + 1));
            // 将按钮添加到FlowPane
            flowPane.getChildren().addAll(btn);
        }

        return flowPane;
    }

fxml实现

<FlowPane xmlns="http://javafx.com/javafx/17.0.2-ea" xmlns:fx="http://javafx.com/fxml/1" orientation="VERTICAL"
          alignment="TOP_LEFT" prefWidth="600" prefHeight="400" vgap="10" hgap="10">
    <padding>
        <Insets left="10" top="5" right="10" bottom="5"/>
    </padding>
    <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"/>
</FlowPane>