Flutter：如何将TextField输入值存储为int类型用于数值计算

TextField组件默认获取到的输入内容是String类型，无法直接参与数值运算，通过显式类型转换+输入兜底处理，就能拿到可直接参与加减乘除等运算的int类型值，具体实现如下：

• 前置优化配置
  首先从输入环节减少非法内容，降低转换失败概率：给TextField设置数字键盘，加上仅允许输入数字的输入限制，避免用户输入字母、特殊符号等非整数内容。
  参考配置代码：

  TextField(
    // 弹出数字软键盘
    keyboardType: TextInputType.number,
    // 拦截非数字输入，只允许0-9的整数输入
    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  )
  

• 实时输入转换（onChanged回调场景）
  如果需要输入过程中实时拿到int值做动态计算，直接在onChanged回调中做安全转换即可，不要直接用int.parse()，这个方法遇到非法格式会直接抛异常崩溃，优先用int.tryParse()做安全转换，失败返回null方便做兜底。
  参考代码：

  // 定义变量存储转换后的int值，给默认值0避免空问题
  int inputValue = 0;
  
  TextField(
    keyboardType: TextInputType.number,
    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
    onChanged: (val) {
      // 输入为空时给默认值，非空时尝试转换
      inputValue = val.isNotEmpty ? (int.tryParse(val) ?? 0) : 0;
      // 拿到inputValue后可以直接参与运算，比如实时计算总价、换算单位等逻辑
    },
  )
  

• 主动取值转换（点击按钮触发计算场景）
  如果是点击计算、提交按钮时才需要拿值做运算，配合TextEditingController取值即可：
  参考代码：

  // 在State类中初始化控制器
  final TextEditingController numEditController = TextEditingController();
  
  // 绑定到TextField
  TextField(
    controller: numEditController,
    keyboardType: TextInputType.number,
    inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  )
  
  // 按钮点击触发的计算逻辑
  void handleCalculate() {
    // 拿到输入内容去掉首尾空白
    String inputStr = numEditController.text.trim();
    // 安全转换为int，转换失败默认取0
    int calNum = int.tryParse(inputStr) ?? 0;
    // 直接参与数值运算即可
    int calculateResult = calNum * 3 + 15 - calNum ~/ 2;
  }
  

注意：如果业务场景需要支持输入小数参与运算，把转换方法换成double.tryParse()即可，整体逻辑和转int完全一致。如果没有加数字输入限制，转换前最好先对字符串做清洗，去掉空格、特殊符号后再做转换，避免转换失败。

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