JavaFX：FXML如何使按钮占据父容器的整个宽度

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

我觉得应该是这样的

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

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

为按钮的 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 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 并确保将 Pref 宽度设置为 USE_COMPUTED_SIZE.

我在上面提供的 FXML 结果为：

JavaFX：FXML如何使按钮占据父容器的整个宽度

JavaFX: FXML how to make Buttons take the whole width of parent container

java

javafx

fxml