如何在JavaFX中清晰地对齐对象

我必须做一些基本的JavaFX工作，但我有一个问题，我无法处理。首先，我的目标布局是：

我所做的是创建两个网格窗格，并尝试将它们彼此对齐。一开始，看起来还不错。但当我写下剩下的部分时，它开始变得非常糟糕，我开始无法对齐任何东西。制作底部按钮菜单非常简单。但不管我做了什么，我都无法对齐文本字段和标签。这是我的密码`

addButton=新按钮（“添加”）；
firstButton=新按钮（“第一”）；
nextButton=新按钮（“下一步”）；
previousButton=新按钮（“上一个”）；
lastButton=新按钮（“最后一个”）；
updateByIdButton=新建按钮（“按Id更新”）；
searchByIdButton=新按钮（“按Id搜索”）；
cleanButton=新按钮（“Clean textFields”）；
GridPane root=新的GridPane（）；
HBox bottomMenu=新的HBox（）；
bottomMenu.getChildren（）.addAll（addButton、firstButton、nextButton、previousButton、lastButton、updatebydbutton、searchByIdButton、cleanButton）；
底部菜单。设置间距（10）；
BorderPane border=新的BorderPane（）；
设置填充（新的插入（10,10,10,20））；
border.setBottom（底部菜单）；
GridPane标签=新建GridPane（）；
border.setCenter（根）；
标签。设置间隙（8）；
标签。setHgap（5）；
标签.设置填充（新插图（10,10,10,80））；
Label idLabel=新标签（“ID:”）；
setConstraints（idLabel，0，4）；
标签名称标签=新标签（“名称：”）；
setConstraints（名称标签，0,6）；
标签街道标签=新标签（“街道：”）；
setConstraints（街标，0，10）；
Label cityLabel=新标签（“城市：”）；
setConstraints（cityLabel，0,13）；
Label searchUpdateLabel=新标签（“搜索/更新ID:”）；
setConstraints（searchUpdateLabel，19,3）；
标签性别标签=新标签（“性别：”）；
设置约束（genderLabel，20,6）；
标签zipLabel=新标签（“拉链”）；
setConstraints（zipLabel，25,6）；
labels.getChildren（）.addAll（idLabel、nameLabel、streetLabel、cityLabel、searchUpdateLabel、genderLabel、zipLabel）；
labels.getColumnConstraints（）.add（新的ColumnConstraints（50））；
labels.getColumnConstraints（）.add（新的ColumnConstraints（400））；
root.getChildren（）.add（标签）；
GridPane字段=新建GridPane（）；
设置填充（新的插入（10,10,10,80））；
字段。setVgap（10）；
TextField idField=新的TextField（）；
idField.setDisable（true）；
idField.setMaxWidth（50）；
设置约束（idField，1,3）；
TextField nameField=新的TextField（）；
setConstraints（nameField，1,5）；
TextField streetField=新建TextField（）；
设置约束（streetField，1,6）；
TextField cityField=新TextField（）；
设置约束（cityField，1,7）；
TextField zipField=新的TextField（）；
设置约束（zipField，16,6）；
TextField genderField=新TextField（）；
设置约束（genderField，21,6）；
TextField searchUpdateField=新建TextField（）；
setConstraints（searchUpdateField，21,3）；
fields.getChildren（）.addAll（idField、nameField、streetField、cityField、zipField、genderField、searchUpdateField）；
fields.getColumnConstraints（）.add（新的ColumnConstraints（50））；
fields.getColumnConstraints（）.add（新的ColumnConstraints（400））；
root.getChildren（）.add（字段）；

此外，当我尝试使用

GridPane.setConstraints（）

或添加新列来对齐这些内容时，我的输出似乎也是这样

---

看起来您将网格窗格视为一维对象，而实际上它是二维的。目标中的所有元素都不像网格那样排列，但只需一个网格窗格就可以获得非常接近目标的内容，并且必须使用跨越多个列的某些元素进行设置：

public class GridPaneSample extends GridPane {

public GridPaneSample() {
    add(new Label("ID"), 0, 0);
    Label searchIdLabel = new Label("Search/Update ID");
    TextField searchIdField = new TextField();
    TextField nameField = new TextField("Merve");
    TextField streetField = new TextField("Adnan Menderes");
    TextField cityField = new TextField("Ayden");
    add(searchIdLabel, 2, 0);
    add(new Label("Name"), 0, 1);
    add(new Label("Street"), 0, 2);
    add(new Label("City"), 0, 3);
    add(new Label("Gender"), 3, 3);
    add(new Label("Zip"), 5, 3);
    add(new TextField("1"), 1, 0);
    add(searchIdField, 3, 0);
    add(nameField, 1, 1);
    add(streetField, 1, 2);
    add(cityField, 1, 3);
    add(new TextField("F"), 4, 3);
    add(new TextField("1234"), 6, 3);
    setColumnSpan(searchIdLabel, 2);
    setColumnSpan(searchIdField, 4);
    setColumnSpan(nameField, 6);
    setColumnSpan(streetField, 6);
    setColumnSpan(cityField, 2);
    setVgap(4);
    setHgap(4);
    ColumnConstraints col50 = new ColumnConstraints(50);
    getColumnConstraints()
            .addAll(col50, new ColumnConstraints(70), new ColumnConstraints(100), col50, new ColumnConstraints(30),
                    new ColumnConstraints(20), col50);
    setPadding(new Insets(10, 0, 0, 60));
}
}

它变得有点难看，不太适合GridPane的使用情况。使用VBox，然后将每一行放入HBox可能更容易。您可以将第一个文本字段“列”对齐，方法是将每行的第一个标签放在自己的HBox中，并将该HBox的最小宽度设置为每行相同。像这样：

public class BoxesSample extends VBox {

public BoxesSample() {
    HBox row1 = new HBox(6, fixedSpaceLabel("ID"), sizedTextField("1", 60), new Label("Search/Update ID"),
                         sizedTextField("", 154));
    HBox row2 = new HBox(6, fixedSpaceLabel("Name"), sizedTextField("Merve", 320));
    HBox row3 = new HBox(6, fixedSpaceLabel("Street"), sizedTextField("Adnan Menderes", 320));
    HBox row4 = new HBox(6, fixedSpaceLabel("City"), sizedTextField("Aydin", 160), new Label("Gender"),
                         sizedTextField("F", 20), new Label("Zip"), sizedTextField("1234", 60));
    getChildren().addAll(row1, row2, row3, row4);
    setPadding(new Insets(10, 0, 0, 60));
    setSpacing(4);
}

private HBox fixedSpaceLabel(String labelText) {
    HBox results = new HBox(new Label(labelText));
    results.setMinWidth(50);
    results.setAlignment(Pos.CENTER_LEFT);
    return results;
}

private TextField sizedTextField(String initialValue, double width) {
    TextField results = new TextField(initialValue);
    results.setMinWidth(width);
    results.setMaxWidth(width);
    return results;
}
}

---

这是

FXML

。也许你可以把它翻译成纯代码。它分解为一个

VBox

作为根。

VBox

有一个

GridPane

和一个用于儿童的

HBox

FXML

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

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>


<VBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="168.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <GridPane hgap="4.0" maxHeight="-Infinity" maxWidth="-Infinity" prefWidth="400.0">
        <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" />
            <ColumnConstraints hgrow="SOMETIMES" />
            <ColumnConstraints hgrow="SOMETIMES" />
          <ColumnConstraints hgrow="SOMETIMES" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="-Infinity" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity" />
          <ColumnConstraints hgrow="SOMETIMES" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="-Infinity" />
            <ColumnConstraints hgrow="SOMETIMES" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        </columnConstraints>
        <rowConstraints>
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <Label text="ID" />
            <TextField GridPane.columnIndex="1" />
            <TextField GridPane.columnIndex="5" GridPane.columnSpan="2147483647" />
            <Label text="Search/Updated ID" GridPane.columnIndex="4" />
            <Label text="Name" GridPane.rowIndex="1" />
            <Label text="Street" GridPane.rowIndex="2" />
            <Label text="City" GridPane.rowIndex="3" />
            <TextField maxWidth="1.7976931348623157E308" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="1" />
            <TextField GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="2" />
            <TextField GridPane.columnIndex="1" GridPane.columnSpan="4" GridPane.rowIndex="3" />
            <Label text="Gender" GridPane.columnIndex="5" GridPane.rowIndex="3" />
            <Label text="Zip" GridPane.columnIndex="7" GridPane.rowIndex="3" />
            <TextField GridPane.columnIndex="6" GridPane.rowIndex="3" />
            <TextField GridPane.columnIndex="8" GridPane.columnSpan="2147483647" GridPane.rowIndex="3" />
         </children>
         <VBox.margin>
            <Insets />
         </VBox.margin>
         <padding>
            <Insets bottom="20.0" />
         </padding>
      </GridPane>
      <HBox maxWidth="-Infinity" spacing="3.0">
         <children>
            <Button mnemonicParsing="false" text="Add" />
            <Button mnemonicParsing="false" text="First" />
            <Button mnemonicParsing="false" text="Next" />
            <Button mnemonicParsing="false" text="Previous" />
            <Button mnemonicParsing="false" text="Last" />
            <Button mnemonicParsing="false" text="UpdateByID" />
            <Button mnemonicParsing="false" text="SerachByID" />
            <Button mnemonicParsing="false" text="Cean textFields" />
         </children>
      </HBox>
   </children>
</VBox>

---

使用

SceneBuilder

和

FXML

。这将节省大量时间。

add（Node-child，int-columnIndex，int-rowIndex，int-colspan，int-rowspan）

将成为您的朋友。看；标签和字段都应该使用一个网格窗格。

GridPane

是适合这种情况的节点。