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>

Затем размер кнопок изменяется по горизонтали, но они больше не складываются. Я не могу реализовать это в Java FX с помощью FXML.

Желаемый результат будет таким:

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 s превышать размер, рассчитанный на основе текста.

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

Поскольку у вас есть несколько кнопок, если бы я предполагал, что вы хотите, чтобы они были одинакового размера, я бы сделал что-то вроде:

<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, который я предоставил выше, приводит к:

Answer 4

Я верю, что так должно быть

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