我得到了一个SegmentedButton,其中包含3个“仅字形” ToggleButtons,如下所示:

<SegmentedButton maxWidth="Infinity" prefWidth="Infinity">
    <buttons>
        <fx:define>
            <ToggleGroup fx:id="albumViewToggleGroup"/>
        </fx:define>
        <ToggleButton maxWidth="Infinity" fx:id="tagCloudToggle" mnemonicParsing="false" selected="true" toggleGroup="$albumViewToggleGroup">
            <graphic>
                <Glyph fontFamily="FontAwesome" icon="TAGS"></Glyph>
            </graphic>
        </ToggleButton>
        <ToggleButton maxWidth="Infinity" fx:id="gridFlowToggle" mnemonicParsing="false" toggleGroup="$albumViewToggleGroup" >
            <graphic>
                <Glyph fontFamily="FontAwesome" icon="TH"></Glyph>
            </graphic>
        </ToggleButton>
        <ToggleButton maxWidth="Infinity" fx:id="coverFlowToggle" mnemonicParsing="false" toggleGroup="$albumViewToggleGroup">
            <graphic>
                <Glyph fontFamily="FontAwesome" icon="ELLIPSIS_H"></Glyph>
            </graphic>
            <VBox.margin>
                <Insets top="10.0"/>
            </VBox.margin>
        </ToggleButton>
    </buttons>
</SegmentedButton>

SegmenedtButton占用了整个宽度(用红线表示),但ToggleButtons却没有。我通过设置背景色对此进行了检查。

我希望对ToggleButtons进行拉伸,以使其分别为SegmentedButton宽度的1/3。我怎样才能做到这一点?

最佳答案

根据documentatiom,可以在fxml绑定中使用数学运算符。

因此可以使用类似这样的东西:

<SegmentedButton fx:id="segButton" maxWidth="1.7976931348623157E308" >
    <buttons>
        <ToggleButton fx:id="option1" maxWidth="1.7976931348623157E308" prefWidth="${segButton.width / 4}" text="K3" />
        <ToggleButton fx:id="option1" maxWidth="1.7976931348623157E308" prefWidth="${segButton.width / 4}" text="K2" />
        <ToggleButton fx:id="option1" maxWidth="1.7976931348623157E308" prefWidth="${segButton.width / 4}" text="K1" />
        <ToggleButton fx:id="option1" maxWidth="1.7976931348623157E308" prefWidth="${segButton.width / 4}" text="K1,1" />
    </buttons>
</SegmentedButton>

可能不再需要,但希望对最终使用此功能的任何人有用。

07-27 22:15