事件发生后JavaFx GUI坏了

Question

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

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

这是我的FXML文件和我的Controller文件：

<?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 ......所以它是操作系统问题还是代码问题？

Answer 1

文本actionString应该在GridPane中占用2列。

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

此外，如果您没有理由使用Text，我建议您使用Label并将wrapText设置为 true 。如果label达到容器的宽度，这将有助于new line自动格式化

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