Javafx：使用 FlowPane 的响应式设计

Question

我正在尝试使用 JavaFX FlowPlane 创建响应式布局。 在 FlowPane 中，我放置了另外两个带有文本的窗格。 每个窗格的 minWidth 为 200px。 prefWidth 为 500 像素，maxWidth 为 750 像素。

我想 FlowPane 可以使用提供的宽度值自动调整其中的窗格大小，这样当我调整窗口大小时，FlowPane 中的空间将以最佳方式利用。

相反，FlowPane 似乎只查看 prefWidth 属性，而忽略了 minWidth 和 maxWidth。 见下图：

有没有办法让蓝色的 StackPane 留在第一行，紧挨着红色的 StackPane，随着窗口宽度的减小而缩小，并且只有在其宽度小于其 minWidth 属性时才跳到第二行？

编辑：添加 FXML

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

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>


<FlowPane 
    cacheShape="false" 
    centerShape="false" 
    minWidth="500.0" 
    nodeOrientation="LEFT_TO_RIGHT" 
    prefHeight="150.0" 
    prefWidth="1000.0" 
    prefWrapLength="250.0" 
    rowValignment="TOP" 
    scaleShape="false" 
    style="-fx-background-color: white;" 
    xmlns="http://javafx.com/javafx/8.0.171" 
    xmlns:fx="http://javafx.com/fxml/1"
>
   <children>
      <StackPane 
        centerShape="false" 
        maxWidth="750.0" 
        minWidth="200.0"
        prefWidth="500.0" 
        scaleShape="false" 
        style="-fx-background-color: #ddaaaa;
        ">
         <children>
            <Label 
                alignment="TOP_LEFT" 
                text="I am a red StackPane. If you shrink this window, the blue panel will be below me! Min-width=200px, Pref-width=500px, Max-width=750px." 
                textOverrun="CENTER_WORD_ELLIPSIS" 
                wrapText="true"
            >
               <font>
                  <Font size="14.0" />
               </font>
            </Label>
         </children>
      </StackPane>
      <StackPane 
        alignment="TOP_LEFT" 
        cacheShape="false" 
        centerShape="false" 
        maxWidth="750.0" 
        minWidth="200.0" 
        prefWidth="500.0" 
        scaleShape="false"
      >
         <children>
            <Label 
                alignment="TOP_LEFT" 
                cacheShape="false" 
                centerShape="false" 
                scaleShape="false" 
                style="-fx-background-color: #dadaff;" 
                text="My min width is set to 200px; I should be able to handle some shrinking, but I don't ;( Min-width=200px, Pref-width=500px, Max-width=750px." 
                textOverrun="CENTER_WORD_ELLIPSIS" 
                wrapText="true" 
                StackPane.alignment="TOP_LEFT"
            >
               <font>
                  <Font size="14.0" />
               </font>
            </Label>
         </children>
      </StackPane>
   </children>
</FlowPane>