事件发生后 JavaFx GUI 损坏

Question

我是 JavaFx 的新手，我刚刚使用 JavaFx 和 FXML 文件创建了一个 GUI。问题是，在我从我的控制器调用一个函数后，所有文本字段都中断了（见图片）

点击按钮后看起来像这样：

这是我的 FXML 文件和我的控制器文件：

<?import java.net.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<GridPane fx:controller="sample.Controller"
          xmlns:fx="http://javafx.com/fxml" alignment="TOP_LEFT" hgap="10" vgap="10">
    <padding>
        <Insets top="20" bottom="20" left="20" right="20" />
    </padding>
    <Text text="Welcome!"
          GridPane.columnIndex="0"
          GridPane.rowIndex="0"
          GridPane.columnSpan="2"
          />
    <Label text="Username: "
           GridPane.columnIndex="0"
           GridPane.rowIndex="1"
           />
    <TextField 
            GridPane.columnIndex="1"
            GridPane.rowIndex="1"
            />
    <Label text="Password: "
           GridPane.columnIndex="0"
           GridPane.rowIndex="2"
           />
    <PasswordField 
            GridPane.columnIndex="1"
            GridPane.rowIndex="2"
            />
    <Button text="Anmelden"
            GridPane.columnIndex="0"
            GridPane.rowIndex="3"
            GridPane.columnSpan="2"
            onAction="#loginButtonAction"
            />
    <Text fx:id="actionString" 
            GridPane.columnIndex="0"
            GridPane.rowIndex="4"
            />
</GridPane>

和我的控制器：

package sample;

import javafx.fxml.FXML;

import javafx.event.ActionEvent;
import javafx.scene.text.*;

public class Controller {

    @FXML private Text actionString;

    @FXML protected void loginButtonAction(ActionEvent event){
        actionString.setText("You have clicked the login button");

    }

}

您可能已经意识到，我正在使用 linux...所以这是 OS 问题还是代码问题？

Answer 1

文本 actionString 应在 GridPane 中占据 2 列。

<Text fx:id="actionString"
      GridPane.columnIndex="0" 
      GridPane.columnSpan="2" 
      GridPane.rowIndex="4" />

此外，如果你没有理由使用Text，我会建议你使用Label并将wrapText设置为true.如果label达到容器

的宽度，这将有助于自动将label格式化为new line

<Label fx:id="actionString"
       wrapText="true" 
       GridPane.columnIndex="0"
       GridPane.columnSpan="2"
       GridPane.rowIndex="4" />

事件发生后 JavaFx GUI 损坏

JavaFx GUI broken after event

java

javafx