为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕后森 2023-01-05 17:05:13

我有以下代码:


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

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

http://img4.sycdn.imooc.com/63b692dc00017bd102430257.jpg

如果我试试这个:


我有以下代码:


<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 中实现这一点。

http://img1.sycdn.imooc.com/63b692e90001cc2d03070192.jpg

所需的输出将是这样的:

http://img2.sycdn.imooc.com/63b692f30001b18403300274.jpg


查看完整描述

4 回答

?
跃然一笑

TA贡献1566条经验 获得超6个赞

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>

这允许Buttons 增长到超过基于文本计算的大小。


查看完整回答
反对 回复 2023-01-05
?
回首忆惘然

TA贡献1622条经验 获得超10个赞

由于我不知道您的样式表,您可以使用自定义样式表来实现。此外,您可以手动设置首选的宽度和高度。我在下面提供了 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>

你可以看到下面的图片。

//img2.sycdn.imooc.com/63b69304000111f605970176.jpg

查看完整回答
反对 回复 2023-01-05
?
萧十郎

TA贡献1562条经验 获得超11个赞

看到你有几个按钮,如果我假设你希望它们都具有相同的大小,那么我会做类似的事情:


<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 结果是:

//img3.sycdn.imooc.com/63b6931000017bf806070211.jpg

查看完整回答
反对 回复 2023-01-05
?
慕尼黑5688855

TA贡献1607条经验 获得超2个赞

我相信它应该是那样的


<AnchorPane>

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

</AnchorPane>


查看完整回答
反对 回复 2023-01-05

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信