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
相关产品推荐
相关产品推荐

