JavaFX登录界面Login与Create Account按钮失效问题排查

问题描述 #

使用JavaFX开发登录界面，包含「Login」和「Create Account」两个按钮，初始状态下可正常工作，但开发其他界面后，按钮点击突然失效。不过通过Enter键登录、Tab键创建账号仍能正常运行，说明业务逻辑无问题，故障点在按钮本身。

相关代码 #

login.fxml #

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

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

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.14-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="edu.virginia.sde.reviews.LoginController">
   <center>
      <VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0" BorderPane.alignment="CENTER">
         <children>
            <Label fx:id="errorLabel" textFill="RED" wrapText="true">
               <font>
                  <Font size="14.0" />
               </font>
               <padding>
                  <Insets left="25.0" right="25.0" />
               </padding>
            </Label>
            <Label alignment="CENTER" contentDisplay="RIGHT" text="Username">
               <font>
                  <Font size="22.0" />
               </font>
               <graphic>
                  <TextField fx:id="usernameField" onKeyPressed="#handleKeyPress" promptText="Enter your username...">
                     <font>
                        <Font size="14.0" />
                     </font>
                  </TextField>
               </graphic>
            </Label>
            <Label contentDisplay="RIGHT" text="Password">
               <font>
                  <Font size="22.0" />
               </font>
               <graphic>
                  <PasswordField fx:id="passwordField" onKeyPressed="#handleKeyPress" promptText="Enter your password...">
                     <font>
                        <Font size="14.0" />
                     </font>
                  </PasswordField>
               </graphic>
            </Label>
            <Label fx:id="resultLabel" text="Press ENTER to log in, or TAB to create an account.">
               <font>
                  <Font size="14.0" />
               </font>
               <VBox.margin>
                  <Insets top="10.0" />
               </VBox.margin>
            </Label>
            <Label fx:id="infoLabel" alignment="CENTER" text="Passwords must be at least 8 characters long." wrapText="true">
               <font>
                  <Font size="14.0" />
               </font>
               <VBox.margin>
                  <Insets top="5.0" />
               </VBox.margin>
            </Label>
            <Button alignment="CENTER" mnemonicParsing="false" onAction="#handleLogin" text="Login">
               <font>
                  <Font size="20.0" />
               </font>
               <VBox.margin>
                  <Insets top="10.0" />
               </VBox.margin>
            </Button>
            <Button mnemonicParsing="false" onAction="#handleAccountCreation" text="Create an Account">
               <font>
                  <Font size="20.0" />
               </font>
               <VBox.margin>
                  <Insets top="10.0" />
               </VBox.margin>
            </Button>
         </children>
         <BorderPane.margin>
            <Insets top="175.0" />
         </BorderPane.margin>
      </VBox>
   </center>
   <bottom>
      <AnchorPane prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
         <children>
            <Button alignment="CENTER" layoutX="504.0" layoutY="139.0" mnemonicParsing="false" onAction="#handleClose" text="Close" AnchorPane.bottomAnchor="14.599999999999994" AnchorPane.rightAnchor="14.399999999999977">
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
         </children>
      </AnchorPane>
   </bottom>
</BorderPane>

LoginController.java #

package edu.virginia.sde.reviews;

import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyCode;
import javafx.stage.Stage;

import java.io.IOException;
import java.sql.SQLException;

public class LoginController {
    @FXML
    private TextField usernameField;

    @FXML
    private TextField passwordField;

    @FXML
    private Label resultLabel;

    @FXML
    private Label infoLabel;

    @FXML
    private Label errorLabel;

    private CurrentUser currentUser = CurrentUser.getInstance();
    private Stage primaryStage;

    public void setPrimaryStage(Stage primaryStage) {
        this.primaryStage = primaryStage;
    }

    public void setCurrentUser(CurrentUser currentUser) {
        this.currentUser = currentUser;
    }

    @FXML
    public void handleLogin() {
        errorLabel.setText("");
        resultLabel.setText("Press ENTER to log in, or TAB to create an account.");
        infoLabel.setText("Passwords must be at least 8 characters long.");
        String username = usernameField.getText();
        String password = passwordField.getText();
        try {
            User user = DatabaseService.authenticateUser(username, password);
            if (user == null) {
                errorLabel.setText("Invalid username or password. If you don't have an account, re-enter your username and password and select \"Create Account\".");
            }
            else {
                currentUser.setUser(user);
                handleTransitionToCourseSearch();
            }
        } catch (SQLException e) {
            errorLabel.setText("Database error; please try again.");
        }
    }

    @FXML
    public void handleKeyPress() {
        usernameField.setOnKeyPressed(event -> {
            if (event.getCode() == KeyCode.ENTER) {
                handleLogin();
            }
            else if (event.getCode() == KeyCode.TAB) {
                handleAccountCreation();
            }
        });
        passwordField.setOnKeyPressed(event -> {
            if (event.getCode() == KeyCode.ENTER) {
                handleLogin();
            }
            else if (event.getCode() == KeyCode.TAB) {
                handleAccountCreation();
            }
        });
    }

    @FXML
    public void handleAccountCreation() {
        errorLabel.setText("");
        resultLabel.setText("Press ENTER to log in, or TAB to create an account.");
        infoLabel.setText("Passwords must be at least 8 characters long.");
        String username = usernameField.getText();
        String password = passwordField.getText();
        try {
            if (DatabaseService.isDuplicateUsername(username)) {
                errorLabel.setText("Username is already in use.");
            }
            else if (password.length() < 8) {
                errorLabel.setText("Password must be at least 8 characters.");
            }
            else {
                DatabaseService.createUser(username, password);
                infoLabel.setText("");
                resultLabel.setText("Account creation successful! Please log in.");
            }
        } catch (SQLException e) {
            errorLabel.setText("Database error; please try again.");
        }
    }

    @FXML
    public void handleClose() {
        currentUser.clearUser();
        Stage stage = (Stage) resultLabel.getScene().getWindow();
        stage.close();
    }

    public void handleTransitionToCourseSearch() {
        try {
            var fxmlLoader = new FXMLLoader(CourseSearchController.class.getResource("course-search.fxml"));
            var newScene = new Scene(fxmlLoader.load());
            var controller = (CourseSearchController) fxmlLoader.getController();
            controller.setPrimaryStage(primaryStage);
            controller.setCurrentUser(currentUser);
            controller.updateTable();
            primaryStage.setScene(newScene);
            primaryStage.show();
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
    }
}

应用主类文件 #

package edu.virginia.sde.reviews;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class CourseReviewsApplication extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        DatabaseService.initializeDatabase();
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("login.fxml"));
        Scene scene = new Scene(fxmlLoader.load());
        var controller = (LoginController) fxmlLoader.getController();
        controller.setPrimaryStage(stage);
        stage.setTitle("Course Reviews");
        stage.setScene(scene);
        stage.show();
    }
}

问题原因与解决方案 #

核心问题 #

按钮点击失效的根本原因是上层Label节点遮挡了按钮，导致按钮无法接收鼠标点击事件。你将TextField放在了Label的graphic属性中，且Label未设置合理的高度限制，使得Label的可点击区域延伸到了下方按钮的位置，抢占了鼠标事件。

修复步骤 #

1. 重构布局，避免组件遮挡
   不要将TextField作为Label的graphic，改用HBox来横向排列Label和TextField，确保每个组件的布局区域独立，不会互相干扰。修改后的Username和Password部分FXML代码如下：

   <!-- 替换原Username Label部分 -->
   <HBox alignment="CENTER_LEFT" spacing="10.0" prefWidth="400.0">
       <Label text="Username">
           <font>
               <Font size="22.0" />
           </font>
       </Label>
       <TextField fx:id="usernameField" promptText="Enter your username..." prefWidth="250.0">
           <font>
               <Font size="14.0" />
           </font>
       </TextField>
   </HBox>
   
   <!-- 替换原Password Label部分 -->
   <HBox alignment="CENTER_LEFT" spacing="10.0" prefWidth="400.0">
       <Label text="Password">
           <font>
               <Font size="22.0" />
           </font>
       </Label>
       <PasswordField fx:id="passwordField" promptText="Enter your password..." prefWidth="250.0">
           <font>
               <Font size="14.0" />
           </font>
       </PasswordField>
   </HBox>
   

2. 优化键盘事件绑定
   原handleKeyPress方法会在每次按键时重复绑定事件，存在冗余。可以改为在控制器初始化时一次性绑定事件：

   @FXML
   public void initialize() {
       usernameField.setOnKeyPressed(event -> {
           if (event.getCode() == KeyCode.ENTER) {
               handleLogin();
           } else if (event.getCode() == KeyCode.TAB) {
               handleAccountCreation();
           }
       });
       passwordField.setOnKeyPressed(event -> {
           if (event.getCode() == KeyCode.ENTER) {
               handleLogin();
           } else if (event.getCode() == KeyCode.TAB) {
               handleAccountCreation();
           }
       });
   }
   

   同时删除FXML中TextField和PasswordField的onKeyPressed="#handleKeyPress"属性。

完成以上修改后，按钮即可恢复正常点击功能。

内容的提问来源于stack exchange，提问作者The Real Kenny G