创建一个JavaFX简单计算器的指南

在开发一个JavaFX简单计算器之前，首先要对整体流程有个清晰的认识。本篇文章将涵盖设计思路、核心代码及其注释，让你能够顺利完成任务。

1. 流程概述

以下是实现JavaFX简单计算器的主要步骤：

步骤 描述
1 创建JavaFX项目并设置基础环境
2 设计计算器GUI界面
3 实现计算逻辑
4 连接用户输入与计算逻辑
5 运行和测试计算器

2. 具体步骤

步骤1：创建JavaFX项目

在IDE（比如 IntelliJ IDEA 或 Eclipse）中，创建一个新的JavaFX项目，并确保JavaFX库已经添加到项目中。

步骤2：设计计算器GUI界面

在主类中创建界面, 代码如下：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class Calculator extends Application {

    private TextField display;

    @Override
    public void start(Stage primaryStage) {
        display = new TextField();
        
        // 创建按钮
        Button[] numberButtons = new Button[10];
        for (int i = 0; i < 10; i++) {
            numberButtons[i] = new Button(String.valueOf(i));
        }
        
        Button addButton = new Button("+");
        Button equalsButton = new Button("=");

        // 创建布局
        GridPane grid = new GridPane();
        grid.add(display, 0, 0, 3, 1); // 将显示框放在网格布局顶部

        // 添加按钮
        int count = 0;
        for (int i = 1; i < 4; i++) {
            for (int j = 0; j < 3; j++) {
                grid.add(numberButtons[count], j, i);
                count++;
            }
        }
        grid.add(addButton, 0, 4);
        grid.add(equalsButton, 1, 4);

        Scene scene = new Scene(grid, 300, 275);
        primaryStage.setTitle("Simple Calculator");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

代码注释：

  • TextField display: 显示计算结果的文本框。
  • Button array: 创建数字按钮（0-9）。
  • GridPane: 用于布局按钮。
步骤3：实现计算逻辑

在主类中添加计算逻辑，为每个按钮添加事件处理：

import javafx.event.ActionEvent;
import javafx.event.EventHandler;

public class Calculator extends Application {

    // existing code...

    private String operator;
    private double num1, num2;

    // 事件处理
    private void handleButtonAction(Button button) {
        button.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                String text = button.getText();
                // 处理数字和运算符
                if ("=".equals(text)) {
                    num2 = Double.valueOf(display.getText()); // 获取第二个数
                    switch (operator) {
                        case "+":
                            display.setText(String.valueOf(num1 + num2)); // 显示结果
                            break;
                    }
                } else {
                    if ("+".equals(text)) {
                        operator = text;
                        num1 = Double.valueOf(display.getText()); // 获取第一个数
                        display.clear();
                    } else {
                        display.appendText(text); // 处理数字
                    }
                }
            }
        });
    }
}

代码注释：

  • num1, num2: 存储操作数。
  • handleButtonAction: 处理按钮的点击事件。
步骤4：连接用户输入与计算逻辑

为每一个按钮调用 handleButtonAction 方法来连接事件处理.

for (Button numberButton : numberButtons) {
    handleButtonAction(numberButton);
}
handleButtonAction(addButton);
handleButtonAction(equalsButton);
步骤5：运行和测试计算器

确保你的IDE运行JavaFX应用程序。运行后，你应该能看到你的计算器界面并进行简单的加法操作。

状态图

以下是简单计算器的状态图，展示其不同状态变化：

stateDiagram
    [*] --> Idle
    Idle --> InputtingNumber
    InputtingNumber --> InputtingOperator
    InputtingOperator --> InputtingNumber
    InputtingNumber --> ResultDisplayed
    ResultDisplayed --> Idle

序列图

以下是用户操作计算器的序列图，展示了按钮点击的流向：

sequenceDiagram
    participant User
    participant Calculator
    User->>Calculator: Click number
    Calculator->>Calculator: Display number
    User->>Calculator: Click operator
    Calculator->>Calculator: Process operator
    User->>Calculator: Click equals
    Calculator-->>User: Show result

结尾

希望通过以上的步骤和代码，你能够顺利实现一个基本的JavaFX计算器。理解JavaFX的基本结构和事件处理机制是学习更多高级功能的基础，加油，未来的开发者！