FXML - 单击按钮时文本字段向右移动

Question

我正在尝试制作一个有关管理餐厅预订的程序，但我有一个持久的故障，到目前为止我还无法修复。

看看这些代码：

Customer.fxml

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

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

<GridPane xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10" prefWidth="300" prefHeight="300">
    <padding>
        <Insets top="25" right="25" bottom="10" left="25"/>
    </padding>

    <Label GridPane.rowIndex="0" GridPane.columnIndex="0" text="Name"/>
    <Label GridPane.rowIndex="1" GridPane.columnIndex="0" text="ID"/>
    <Label GridPane.rowIndex="2" GridPane.columnIndex="0" text="Phone Number"/>
    <Label GridPane.rowIndex="3" GridPane.columnIndex="0" text="Bringing..."/>

    <TextField GridPane.rowIndex="0" GridPane.columnIndex="1" fx:id="name"/>
    <TextField GridPane.rowIndex="1" GridPane.columnIndex="1" fx:id="id"/>
    <TextField GridPane.rowIndex="2" GridPane.columnIndex="1" fx:id="phonenumber"/>
    <TextField GridPane.rowIndex="3" GridPane.columnIndex="1" fx:id="bringing"/>

    <Button GridPane.rowIndex="4" GridPane.columnIndex="0" text="Assign Table" fx:id="notedetails"/>
    <HBox GridPane.rowIndex="4" GridPane.columnIndex="1" alignment="BASELINE_RIGHT">
        <Button text="Back" fx:id="back"/>
    </HBox>
    <Text GridPane.rowIndex="5" GridPane.columnIndex="0" fx:id="noted"/>
</GridPane>

CustomerController.java

@FXMLController(value = "/fxml/customer.fxml", title = "Customer Details")
public class CustomerController {
    @FXML
    private TextField name;

    @FXML
    private TextField id;

    @FXML
    private TextField phonenumber;

    @FXML
    private TextField bringing;

    @FXML
    @ActionTrigger("notedetails")
    private Button notedetails;

    @FXML
    @BackAction
    private Button back;

    @FXML
    private Text noted;

    @Inject
    private Restaurant restaurant;

    @ActionMethod("notedetails")
    public void notedetails() {
        noted.setText("Your details have been noted!");
        String customerName = name.getText();
        String customerID = id.getText();
        String customerPhoneNumber = phonenumber.getText();
        int customerBringing = Integer.parseInt(bringing.getText());
        Customer customer = new Customer(customerName, customerID, customerPhoneNumber, customerBringing);
        restaurant.addCustomer(customer);
    }
}

当我运行 Main 类时，我去了客户窗口，填写详细信息后，文本字段向右移动！我检查了我的代码，为了仔细检查，我把问题告诉了我的老师，但他没有发现代码有什么问题。

我很惊讶这里没有其他人问过这个问题，所以这可能是我做过的事情。请帮我看看我是否遗漏了代码中的某些内容，或者找到修复它的方法。

Answer 1

我认为下面的部分代码在此处干扰了已定义后退按钮的对齐方式。 :-

HBox GridPane.rowIndex="4" GridPane.columnIndex="1" alignment="BASELINE_RIGHT">
        <Button text="Back" fx:id="back"

编译器也可能为文本字段分配相同的对齐方式。

建议，将对齐分配给标签的每一行。下面只是一个例子：-

<TextField alignment="BASELINE_RIGHT" GridPane.rowIndex="0" GridPane.columnIndex="1" fx:id="name"/>
<TextField alignment="BASELINE_RIGHT" GridPane.rowIndex="1" GridPane.columnIndex="1" fx:id="id"/>
<TextField alignment="BASELINE_RIGHT"GridPane.rowIndex="2" GridPane.columnIndex="1" fx:id="phonenumber"/>
<TextField alignment="BASELINE_RIGHT"GridPane.rowIndex="3" GridPane.columnIndex="1"fx:id="bringing"/>