JavaFX：如何让ScrollPane内的FlowPane垂直自适应而非新增列

我将垂直方向的FlowPane嵌套在ScrollPane中，当前控件会自动换行，但期望当列总宽度超过ScrollPane宽度时，FlowPane垂直拉伸容纳控件，而非新增右侧不可见列，需满足以下两种场景：

• 调整窗口底部大小时，FlowPane底部控件上移，不向右侧扩展；
• 水平调整窗口，右侧列控件无法容纳时，FlowPane垂直拉伸而非新增不可见行。

修改后的FXML代码 #

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ScrollPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.text.Font?>

<AnchorPane prefHeight="424.0" prefWidth="457.0" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.demo.HelloController">
   <children>
      <AnchorPane layoutX="14.0" layoutY="14.0" prefHeight="399.0" prefWidth="430.0" style="-fx-border-color: #555555;" AnchorPane.bottomAnchor="14.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.0" AnchorPane.topAnchor="14.0">
         <children>
            <ScrollPane fitToWidth="true" focusTraversable="false" hbarPolicy="NEVER" layoutX="14.0" layoutY="13.0" maxWidth="1.7976931348623157E308" prefHeight="377.0" prefWidth="404.0" style="-fx-border-color: red; -fx-border-width: 2;" AnchorPane.bottomAnchor="7.0" AnchorPane.leftAnchor="13.0" AnchorPane.rightAnchor="12.0" AnchorPane.topAnchor="12.0">
               <content>
                  <FlowPane maxWidth="1.7976931348623157E308" orientation="VERTICAL" prefWidth="397.0" rowValignment="TOP" style="-fx-border-color: green; -fx-border-width: 2;" vgap="4.0" hgap="4.0">
                     <children>
                        <Button mnemonicParsing="false" prefHeight="121.0" prefWidth="140.0" text="1">
                           <font>
                              <Font name="System Bold" size="24.0" />
                           </font>
                        </Button>
                        <Button mnemonicParsing="false" prefHeight="121.0" prefWidth="140.0" text="2">
                           <font>
                              <Font name="System Bold" size="24.0" />
                           </font>
                        </Button>
                        <Button mnemonicParsing="false" prefHeight="121.0" prefWidth="140.0" text="3">
                           <font>
                              <Font name="System Bold" size="24.0" />
                           </font>
                        </Button>
                        <Button mnemonicParsing="false" prefHeight="121.0" prefWidth="140.0" text="4">
                           <font>
                              <Font name="System Bold" size="24.0" />
                           </font>
                        </Button>
                     </children>
                     <padding>
                        <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
                     </padding>
                  </FlowPane>
               </content>
            </ScrollPane>
         </children>
      </AnchorPane>
   </children>
</AnchorPane>

关键修改说明 #

1. 移除ScrollPane的fitToHeight="true"：该属性会强制FlowPane高度匹配ScrollPane，导致垂直拉伸逻辑失效；
2. 删除FlowPane的固定prefHeight：让FlowPane根据内容自动计算高度，实现垂直自适应；
3. 统一间距控制：将子控件的FlowPane.margin替换为FlowPane自身的padding+vgap/hgap，避免margin干扰布局计算；
4. 固定FlowPane宽度：保持FlowPane的maxWidth为最大值，使其始终占满ScrollPane宽度，迫使垂直FlowPane只能在单列内垂直堆叠控件，不会新增右侧列。

内容的提问来源于stack exchange，提问作者Vali Maties