JavaFX:FXML如何使Buttons占据父容器的整个宽度

时间:2019-06-06 18:28:50

标签: java javafx fxml

我有以下代码:

<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>

这将生成一组堆叠的按钮(根据需要),但它们不会占据容器的整个宽度。

JavaFXButtons1

如果我尝试这样做:

我有以下代码:

<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中实现此功能。

JavaFX FXML 2

所需的输出为:

JavaFX FXML 3

4 个答案:

答案 0 :(得分:4)

为按钮的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的大小超出根据文本计算的大小。

答案 1 :(得分:1)

由于我不了解您的样式表,因此可以使用自定义样式表。此外,您可以手动设置首选的宽度和高度。我在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>

您可以看到下面的图像。 enter image description here

答案 2 :(得分:0)

我相信应该会这样

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

答案 3 :(得分:0)

看到您有多个按钮,如果我假设您希望它们的大小都相同,那么我将执行以下操作:

var text = "<h2>This is a test heading</h2>\n<p>Here is some text</p>\n<div>\n  <h3>Here is a another heading</h3>\n  <p>Some more paragraph text which shouldn't match</p>\n</div>";
var regex = /(<(h\d+)>[^<]*?)\s+([^\s<]*?<\/\2>)/gi;
var replaced = text.replace(regex, '$1&nbsp;$3');
console.log(replaced);

这将使按钮始终填充其父级的宽度,这意味着按钮将随VBox动态缩放。我所做的就是将“最大宽度”设置为MAX_VALUE,并确保“首选宽度”设置为USE_COMPUTED_SIZE。

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

enter image description here