如何实现两个控制组之间的边距

Question

我有以下 fxml。在每个控制组之后，我想要一些 space。如何实现？

        <Label styleClass="field-view-label" text="%sections.right.section.model-editor.fieldName" />
        <TextField fx:id="fieldName" styleClass="field-view-text" />
        <Label styleClass="field-view-label" text="%sections.right.section.model-editor.fieldType" />
        <ComboBox fx:id="fieldDataType" styleClass="field-view-combobox" />
        <Label styleClass="field-view-label" text="Field Reference" />
        <ComboBox fx:id="fieldReference" styleClass="field-view-combobox" />
        <Label styleClass="field-view-label" text="%sections.right.section.model-editor.reference" />
        <TextField fx:id="fieldValue" styleClass="field-view-text" />

CSS

.field-header-label{
    -fx-pref-width: 460.0px;
}

.field-view-label {
    -fx-pref-width: 460.0px;
}

.field-view-combobox {
    -fx-pref-width: 460.0px;
}

.field-view-text {
    -fx-pref-width: 460.0px;
}

Answer 1

将每个 Label 和 TextField 包装在 VBox 中，并向 VBox 添加填充。类似于：

<VBox styleClass="control">
    <Label styleClass="field-view-label" text="%sections.right.section.model-editor.fieldName" />
    <TextField fx:id="fieldName" styleClass="field-view-text" />
</VBox>
<VBox styleClass="control">
    <Label styleClass="field-view-label" text="%sections.right.section.model-editor.fieldType" />
    <ComboBox fx:id="fieldDataType" styleClass="field-view-combobox" />
</VBox>
<VBox styleClass="control">
    <Label styleClass="field-view-label" text="Field Reference" />
    <ComboBox fx:id="fieldReference" styleClass="field-view-combobox" />
</VBox>
<VBox styleClass="control">
    <Label styleClass="field-view-label" text="%sections.right.section.model-editor.reference" />
    <TextField fx:id="fieldValue" styleClass="field-view-text" />
</VBox>

和

.control {
    -fx-padding: 0 0 0 10 ;
}

/* ... */

如何实现两个控制组之间的边距

How to achieve margin between two control group

javafx

javafx-8

javafx-2