You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter计算器按钮点击仅显示0,数字无法正常显示问题排查

Flutter计算器无法显示点击数字的修复方案

问题根源

你的代码存在两个核心问题:

  • 按钮的onPressed事件没有调用你定义好的buttonPressed处理函数,反而在单独更新未被界面使用的_currentValue变量,导致显示用的_output始终保持初始值"0"。
  • 数字按钮的逻辑有瑕疵:初始点击数字时会拼接成"01""02"这类不符合常规的格式。

修复后的完整代码

import 'package:flutter/material.dart';

void main() => runApp(CalculatorApp());

//main app widget
class CalculatorApp extends StatelessWidget {
  const CalculatorApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Calculator',
      theme: ThemeData(primarySwatch: Colors.pink),
      home: Calculator(),
    );
  }
}

class Calculator extends StatefulWidget {
  const Calculator({Key? key}) : super(key: key);
  @override
  _CalculatorState createState() => _CalculatorState();
}

//It should store the value of whatever button the user presses
class _CalculatorState extends State<Calculator> {
  String _output = "0";
  String _operand = "";
  int _num1 = 0;
  int _num2 = 0;

  void buttonPressed(String buttonText) {
    if (buttonText == "CLEAR") {
      setState(() {
        _output = "0";
        _operand = "";
        _num1 = 0;
        _num2 = 0;
      });
    } else if (buttonText == "+" ||
        buttonText == "-" ||
        buttonText == "*" ||
        buttonText == "/") {
      setState(() {
        _num1 = int.parse(_output);
        _operand = buttonText;
        _output = "0";
      });
    } else if (buttonText == "=") {
      setState(() {
        _num2 = int.parse(_output);
        if (_operand == "+") {
          _output = (_num1 + _num2).toString();
        }
        if (_operand == "-") {
          _output = (_num1 - _num2).toString();
        }
        if (_operand == "*") {
          _output = (_num1 * _num2).toString();
        }
        if (_operand == "/") {
          _output = (_num1 ~/ _num2).toString();
        }
        _operand = "";
        _num1 = 0;
        _num2 = 0;
      });
    } else {
      setState(() {
        // 修复数字拼接逻辑:初始为0时直接替换,否则拼接
        _output = _output == "0" ? buttonText : _output + buttonText;
      });
    }
  }

  Widget buildButton(String buttonText, Color buttonColor, Color textColor) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(4.0),
        child: ElevatedButton(
          // 修复:调用正确的处理函数
          onPressed: () => buttonPressed(buttonText),
          style: ElevatedButton.styleFrom(
            backgroundColor: buttonColor,
            foregroundColor: textColor,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(20.0),
            ),
          ),
          child: Text(
            buttonText,
            style: TextStyle(
              fontSize: 24.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Calculator'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.centerRight,
            padding: EdgeInsets.symmetric(vertical: 24.0, horizontal: 12.0),
            child: Text(
              _output,
              style: TextStyle(
                fontSize: 48.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Expanded(
            child: Divider(),
          ),
          //building buttons
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  buildButton("7", Colors.grey, Colors.white),
                  buildButton("8", Colors.grey, Colors.white),
                  buildButton("9", Colors.grey, Colors.white),
                  buildButton("/", Colors.blue, Colors.white),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("4", Colors.grey, Colors.white),
                  buildButton("5", Colors.grey, Colors.white),
                  buildButton("6", Colors.grey, Colors.white),
                  buildButton("*", Colors.blue, Colors.white),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("1", Colors.grey, Colors.white),
                  buildButton("2", Colors.grey, Colors.white),
                  buildButton("3", Colors.grey, Colors.white),
                  buildButton("-", Colors.blue, Colors.white),
                ],
              ),
              Row(
                children: <Widget>[
                  buildButton("0", Colors.grey, Colors.white),
                  buildButton("CLEAR", Colors.red, Colors.white),
                  buildButton("=", Colors.blue, Colors.white),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
} 

关键修改点

  • 删除了无用的_currentValue变量,减少代码冗余。
  • 将buildButton里的onPressed改为调用buttonPressed(buttonText),让按钮点击事件触发正确的逻辑更新_output。
  • 优化数字按钮的逻辑:当_output为"0"时,直接替换为当前数字,避免出现"01"这类不符合用户习惯的显示。

内容的提问来源于stack exchange,提问作者Cherry

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.22 17:13:13