在 HBox FXML 中的元素之间添加不均匀的间距

Question

我想在组合框和文本字段之间添加间距。我向 Box 添加了间距，但是由于 HBox 中有 4 个节点，因此它向所有节点添加了间距，这不是我想要的。我希望 TextField 位于窗口的右侧。我正在考虑添加一个大宽度的不可见分隔符，但是我读到可以使用区域，但我不确定如何在 FXML 中使用它们。

这是我当前拥有的代码，但不确定如何向其中添加区域。

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<?import javafx.scene.text.TextFlow?>
<BorderPane prefHeight = "200.0" prefWidth = "300.0" xmlns = 
    <top>
        <HBox alignment = "CENTER_LEFT" prefWidth = "300.0" spacing = "5">
            <padding>
                <Insets topRightBottomLeft="50" />
            </padding>
            <Label>Sort by: </Label>
            <ComboBox fx:id = "sortOrder" promptText = "Select" />

        </HBox>
    </top>
</BorderPane>

Answer 1

不要硬编码首选尺寸。

要使文本字段位于 的右边缘，请在和之间HBox添加一个空格。将区域的参数设置为，因此任何额外的空间都会分配给它：RegionComboBoxTextFieldhgrowALWAYS

<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<?import javafx.scene.text.TextFlow?>
<BorderPane  xmlns = "http://javafx.com/javafx/16" xmlns:fx = "http://javafx.com/fxml/1" >
    <top>
        <HBox alignment = "CENTER_LEFT"  spacing = "5">
            <padding>
                <Insets topRightBottomLeft="20" />
            </padding>
            <Label>Sort by: </Label>
            <ComboBox fx:id = "sortOrder" promptText = "Select" />
            <Label>Search by host name: </Label>
            <Region HBox.hgrow="ALWAYS" />
            <TextField fx:id = "hostName" />
        </HBox>
    </top>
</BorderPane>

拉伸窗口后：

如果需要，您可以进一步控制行为；例如，要让文本字段增长，请将其设置maxWidth为Infinity并设置maxWidth的Region。其他解决方案也是可能的；例如，将标签和组合框放在 a 中HBox，然后将HBox和 包裹TextField在 a 中BorderPane，其中HBox位于左侧， 位于TextField右侧。