JavaFX：FXML如何使Buttons占據父容器的整個寬度

Question

我有以下代碼：

<VBox id="menu" styleClass="menu" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.app.menu.MenuController">

    <stylesheets>
        <URL value="@menu.css"/>
    </stylesheets>

        <Button text="Customers" onAction="#handleCustomers" />
        <Button text="Suppliers" onAction="#handleSuppliers" />
        <Separator/>
        <Button text="Families" onAction="#handleFamilies" />
        <Button text="Products" onAction="#handleProducts" />
        <Separator/>
</VBox>

這將生成一組堆疊的按鈕（根據需要），但它們不會占據容器的整個寬度。

如果我嘗試這樣做：

我有以下代碼：

<VBox id="menu" styleClass="menu" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.app.menu.MenuController">

    <stylesheets>
        <URL value="@menu.css"/>
    </stylesheets>


    <AnchorPane>
        <Button text="Customers" onAction="#handleCustomers" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"/>
        <Button text="Suppliers" onAction="#handleSuppliers" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"/>
        <Separator/>
        <Button text="Families" onAction="#handleFamilies" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"/>
        <Button text="Products" onAction="#handleProducts" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"/>
        <Separator/>
    </AnchorPane>

</VBox>

然后，我將按鈕水平調整大小，但不再堆疊。 我無法使用FXML在Java FX中實現此功能。

所需的輸出將是這樣的：

Answer 1

為按鈕的maxWidth屬性使用足夠大的值：

<VBox id="menu" styleClass="menu" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.example.app.menu.MenuController">

    <stylesheets>
        <URL value="@menu.css"/>
    </stylesheets>

        <Button text="Customers" maxWidth="1.7976931348623157E308" onAction="#handleCustomers" />
        <Button text="Suppliers" maxWidth="1.7976931348623157E308" onAction="#handleSuppliers" />
        <Separator/>
        <Button text="Families" maxWidth="1.7976931348623157E308" onAction="#handleFamilies" />
        <Button text="Products" maxWidth="1.7976931348623157E308" onAction="#handleProducts" />
        <Separator/>
</VBox>

這使Button可以增長到超過基於文本計算的大小。

Answer 2

由於我不了解您的樣式表，因此可以使用自定義樣式表。 此外，您可以手動設置首選的寬度和高度。 我在fxml代碼段下面提供了代碼。

<AnchorPane focusTraversable="true" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.161" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button layoutX="5.0" layoutY="14.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="593.0" text="Customer" />
      <Button layoutX="4.0" layoutY="51.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="593.0" text="Supplier" />
      <Button layoutX="4.0" layoutY="89.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="593.0" text="Families" />
   </children>
</AnchorPane>

您可以看到下面的圖像。

Answer 3

我相信它應該像那樣

<AnchorPane>
    <Node fx:id="node" prefWidth="${node.parent.width}"></Node>
</AnchorPane>

Answer 4

看到您有多個按鈕，如果我假設您希望它們都具有相同的大小，那么我將執行以下操作：

<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="200.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button1" />
      <Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button2" />
      <Button maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Button3" />
   </children>
</VBox>

這樣可以使按鈕始終填充其父級的寬度，這意味着按鈕將隨VBox動態縮放。 我所做的就是將“最大寬度”設置為MAX_VALUE，並確保“首選寬度”設置為USE_COMPUTED_SIZE。

我上面提供的FXML結果是：