Flutter计算器使用setState与tryParse无法更新屏幕问题排查

核心错误分析 #

• 全局变量无法触发UI刷新：firstInput和outputNumber是全局变量，BuildColumn的State不会监听全局变量变化，即便NumPadBuild修改了这些值，显示区域也不会重新构建。
• List的join()导致解析失败：firstInput是List<double>类型，调用join()后会生成类似"7.0"的带小数点字符串，int.tryParse无法解析这类字符串，会返回null，最终显示内容异常。
• setState作用范围错误：NumPadBuild内调用的setState仅会刷新自身UI，不会影响父组件BuildColumn的显示区域。

修复方案 #

1. 将状态移至父组件，通过回调传递交互 #

把输入状态和显示逻辑放到_BuildColumnState中，给NumPadBuild传入回调函数，按钮点击时通知父组件更新状态并刷新UI。

2. 改用字符串存储输入内容 #

直接用String存储输入的数字字符，避免double类型转字符串带来的解析问题，拼接和显示更直接。

修复后的代码示例 #

build_column.dart #

import 'package:flutter/material.dart';
import '../../responsive_layout.dart';
import 'num_pad.dart';

class BuildColumn extends StatefulWidget {
  const BuildColumn({
    Key? key,
  }) : super(key: key);

  @override
  State<BuildColumn> createState() => _BuildColumnState();
}

class _BuildColumnState extends State<BuildColumn> {
  String inputString = "";
  int? outputNumber = 0;

  void onNumberPressed(String number) {
    setState(() {
      inputString += number;
      outputNumber = int.tryParse(inputString);
    });
  }

  void onClearPressed() {
    setState(() {
      inputString = "";
      outputNumber = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        width: SizeConfig.screenWidth,
        height: SizeConfig.screenHeight / 3,
        decoration: const BoxDecoration(color: Colors.white),
        child: Align(
          alignment: Alignment.topRight,
          child: Padding(
            padding: EdgeInsets.all(15.0),
            child: Text(
              "$outputNumber",
              style: TextStyle(fontSize: 28),
            ),
          ),
        ),
      ),
      Align(
        alignment: Alignment.bottomRight,
        child: Container(
          width: SizeConfig.screenWidth * 0.85,
          decoration: const BoxDecoration(
            color: Colors.white,
            border: Border(top: BorderSide(width: 2, color: Colors.grey)),
          ),
        ),
      ),
      Expanded(
        child: Padding(
          padding: EdgeInsets.only(top: SizeConfig.blockSizeHorizontal * 5),
          child: Container(
            color: Colors.white,
            child: NumPadBuild(
              onNumberPressed: onNumberPressed,
              onClearPressed: onClearPressed,
            ),
          ),
        ),
      )
    ]);
  }
}

num_pad.dart #

import 'package:flutter/material.dart';

class NumPadBuild extends StatelessWidget {
  final Function(String) onNumberPressed;
  final VoidCallback onClearPressed;

  const NumPadBuild({
    Key? key,
    required this.onNumberPressed,
    required this.onClearPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(mainAxisAlignment: MainAxisAlignment.center, children: [
      Expanded(
        child: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
          numPadButton("C", const Color.fromARGB(136, 0, 0, 0),
              const Color.fromARGB(255, 39, 36, 36), onClearPressed),
          numPadButton("7", const Color.fromARGB(136, 0, 0, 0),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed("7")),
          numPadButton("4", const Color.fromARGB(136, 0, 0, 0),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed("4")),
          numPadButton("1", const Color.fromARGB(136, 0, 0, 0),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed("1")),
          numPadButton("0", const Color.fromARGB(136, 0, 0, 0),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed("0")),
        ]),
      ),
      Expanded(
        child: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
          numPadButton("±", const Color.fromARGB(137, 34, 33, 33),
              const Color.fromARGB(255, 39, 36, 36), () {}),
          numPadButton("8", const Color.fromARGB(136, 0, 0, 0),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed("8")),
          numPadButton("5", const Color.fromARGB(136, 0, 0, 0),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed("5")),
          numPadButton("2", const Color.fromARGB(136, 0, 0, 0),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed("2")),
          numPadButton("√", const Color.fromARGB(136, 0, 0, 0),
              const Color.fromARGB(255, 88, 85, 85), () {}),
        ]),
      ),
      Expanded(
        child: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
          numPadButton("%", const Color.fromARGB(137, 34, 33, 33),
              const Color.fromARGB(255, 39, 36, 36), () {}),
          numPadButton("9", const Color.fromARGB(137, 34, 33, 33),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed("9")),
          numPadButton("6", const Color.fromARGB(137, 34, 33, 33),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed("6")),
          numPadButton("3", const Color.fromARGB(137, 34, 33, 33),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed("3")),
          numPadButton(",", const Color.fromARGB(136, 0, 0, 0),
              const Color.fromARGB(255, 88, 85, 85), () => onNumberPressed(".")),
        ]),
      ),
      Expanded(
        child: Column(mainAxisAlignment: MainAxisAlignment.end, children: [
          numPadButton("÷", const Color.fromARGB(137, 34, 33, 33),
              const Color.fromARGB(255, 235, 141, 1), () {}),
          numPadButton("x", const Color.fromARGB(137, 34, 33, 33),
              const Color.fromARGB(255, 235, 141, 1), () {}),
          numPadButton("-", const Color.fromARGB(137, 34, 33, 33),
              const Color.fromARGB(255, 235, 141, 1), () {}),
          numPadButton("+", const Color.fromARGB(137, 34, 33, 33),
              const Color.fromARGB(255, 235, 141, 1), () {}),
          numPadButton("=", const Color.fromARGB(137, 34, 33, 33),
              const Color.fromARGB(255, 235, 141, 1), () {}),
        ]),
      ),
    ]);
  }

  Container numPadButton(String buttonName, Color buttonColorBorder,
      Color buttonColor, VoidCallback onPressed) {
    return Container(
        decoration: BoxDecoration(
            color: buttonColor,
            border: Border.all(color: buttonColorBorder.withOpacity(0.5))),
        child: Center(
          child: TextButton(
            onPressed: onPressed,
            child: Text(
              buttonName,
              style: const TextStyle(color: Colors.white, fontSize: 25),
            ),
          ),
        ));
  }
}

额外说明 #

• 将NumPadBuild改为StatelessWidget，因为它无需维护自身状态，所有逻辑交由父组件处理。
• 非数字按钮（如±、√、运算符等）的回调暂时留空，可根据后续需求补充对应逻辑。
• 用字符串直接拼接数字字符，避免了double类型转字符串的小数点问题，int.tryParse能正常解析纯数字字符串。

内容的提问来源于stack exchange，提问作者laniakea