一、为什么需要“简易数字累加器”？

在 OpenHarmony 的日常记录与快速计算场景中，用户常需对一系列数字进行动态求和：

• 收银场景：逐个录入商品价格，实时看到总额；
• 费用报销：累加交通、餐饮等各项支出；
• 学习计分：记录每次小测验得分，计算总分；
• 运动记录：累加每日步数或卡路里消耗。

传统计算器需反复按“+”和“=”，操作繁琐且易出错。一个专用累加器能显著提升效率：

• 输入即累加；
• 自动保留两位小数（符合货币规范）；
• 显示累加次数，便于核对条目数量。

更重要的是，此类功能完全基于确定性累加运算——新值 = 旧总和 + 输入值。无需联网、不读取位置、不申请存储权限，是展示“状态累积”模式的理想案例。

本文将构建一个极简页面：「简易数字累加器」。它包含：

• 一个数字输入框（支持小数）；
• 一个“累加”按钮；
• 两行结果显示区：“总和：¥XX.XX” 和 “已累加：N 次”。

所有逻辑基于 total += newValue，无浮点精度处理（依赖 toStringAsFixed(2) 格式化），确保简单可靠。

---

二、完整可运行代码：

// lib/main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '数字累加器',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true, colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal)),
      home: const NumberAccumulatorPage(),
    );
  }
}

class NumberAccumulatorPage extends StatefulWidget {
  const NumberAccumulatorPage({super.key});

  @override
  State<NumberAccumulatorPage> createState() => _NumberAccumulatorPageState();
}

class _NumberAccumulatorPageState extends State<NumberAccumulatorPage> {
  final TextEditingController _controller = TextEditingController();
  double _total = 0.0;
  int _count = 0;

  void _accumulate() {
    final input = _controller.text.trim();
    if (input.isEmpty) return;

    double? value = double.tryParse(input);
    if (value == null) {
      // 可选：提示无效输入，此处静默忽略
      return;
    }

    setState(() {
      _total += value;
      _count++;
      _controller.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('数字累加器')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _controller,
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              decoration: const InputDecoration(
                labelText: '输入数字',
                hintText: '例如：12.5',
                border: OutlineInputBorder(),
              ),
              onSubmitted: (_) => _accumulate(),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _accumulate,
              child: const Text('累加'),
            ),
            const SizedBox(height: 30),
            Text(
              '总和：¥${_total.toStringAsFixed(2)}',
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            Text(
              '已累加：$_count 次',
              style: const TextStyle(fontSize: 16, color: Colors.grey),
            ),
          ],
        ),
      ),
    );
  }
}

---

三、核心思想：状态累积与即时反馈

本页面的核心是两个状态变量：

• _total：当前累加总和（初始为 0.0）；
• _count：累加操作次数（初始为 0）。

当用户点击“累加”时，通过 setState 更新这两个状态，触发 build 方法重新执行。在 build 中，直接使用最新状态渲染 UI：

Text('总和：¥${_total.toStringAsFixed(2)}', ...),
Text('已累加：$_count 次', ...)

这种“事件 → 状态更新 → 视图重建”的模式，确保 UI 始终与数据一致，是 Flutter 响应式编程的精髓。累加器虽简单，却是理解状态管理的绝佳入口。

---

四、安全累加逻辑：

我们首先看累加核心方法：

void _accumulate() {
  final input = _controller.text.trim();
  if (input.isEmpty) return;

  double? value = double.tryParse(input);
  if (value == null) {
    return;
  }

  setState(() {
    _total += value;
    _count++;
    _controller.clear();
  });
}

这段代码实现了健壮的累加流程。

• 空值检查：
  • trim() 去除首尾空格；
  • 若为空，直接返回，避免无效操作；
• 数值解析：
  • double.tryParse(input) 尝试将字符串转为 double?；
  • 若失败（如 “abc”），返回 null，静默忽略；
• 状态更新：
  • setState 内完成三项操作：
    1. _total += value：累加到总和；
    2. _count++：增加次数；
    3. _controller.clear()：清空输入框，方便下一次输入；
• 错误处理：
  • 未弹出错误提示，因面向快速录入场景，静默忽略更流畅。

💡 此设计支持负数（如 -5.0），可用于抵扣或修正，增强实用性。

---

五、结果格式化与显示：

再看结果展示逻辑（位于 build 方法中）：

Text('总和：¥${_total.toStringAsFixed(2)}', style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
Text('已累加：$_count 次', style: const TextStyle(fontSize: 16, color: Colors.grey)),

这里展示了清晰的信息分层。

• 总和格式化：
  • toStringAsFixed(2) 保留两位小数，符合财务习惯；
  • 前缀 “¥” 明确货币单位；
  • 加粗字体突出关键结果；
• 次数弱化：
  • 使用灰色 (Colors.grey) 降低视觉权重；
  • 作为辅助信息，不干扰主结果；
• 布局间距：
  • SizedBox 控制元素间距，避免拥挤；
  • 垂直居中 (MainAxisAlignment.center) 聚焦内容。

📌 值得注意的是，未使用 NumberFormat（需 intl 包），因会引入第三方依赖。

---

六、输入与交互优化：

最后看输入组件配置：

TextField(
  controller: _controller,
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  decoration: const InputDecoration(
    labelText: '输入数字',
    hintText: '例如：12.5',
    border: OutlineInputBorder(),
  ),
  onSubmitted: (_) => _accumulate(),
),
ElevatedButton(onPressed: _accumulate, child: const Text('累加')),

此配置体现高效输入体验：

• 键盘优化：
  • TextInputType.numberWithOptions(decimal: true) 弹出带小数点的数字键盘；
  • 方便输入 125.50 或 -3.2；
• 标签与提示：
  • labelText 明确功能；
  • hintText 提供示例，降低学习成本；
• 双提交方式：
  • “累加”按钮用于点击；
  • onSubmitted 支持回车键提交，提升效率；
• 边框明确：
  • OutlineInputBorder 清晰界定输入区域。

💡 此设计不清空无效输入——仅当累加成功时才清空，方便用户修改错误。

---

七、为何这个累加器适合 OpenHarmony 场景？

1. 高频实用

• 收银、报销、记账等场景几乎每日发生；
• 比通用计算器更专注、更高效。

2. 隐私与安全

• 所有数据仅存于内存 (_total, _count)；
• 关闭应用即清空，无隐私泄露风险；
• 不申请任何权限，符合 OpenHarmony 安全模型。

3. 多设备适配

• 在手机上：快速录入，即时结果；
• 在平板上：大字体便于多人围观；
• 在智慧屏上：作为家庭共享记账白板。

4. 教学价值

• 演示 StatefulWidget 管理累积状态；
• 展示 double.tryParse 与安全数值处理；
• 体现“事件驱动”交互模型。

---

八、工程注意事项

1. 浮点精度说明

• _total += value 可能积累浮点误差（如 0.1 + 0.2 ≠ 0.3）；
• 但 toStringAsFixed(2) 在显示层掩盖了该问题；
• 若需高精度，应使用整数（分）存储，但会增加复杂度，本文未采用。

2. 输入边界处理

• 支持负数：可用于修正或抵扣；
• 极大数值：Dart double 可处理，但现实场景罕见；
• 空/无效输入：静默忽略，不中断流程。

3. 可访问性

• 屏幕阅读器可朗读“总和：¥123.45”；
• 按钮有明确标签；
• 颜色非唯一信息载体（文字已说明含义）。

---

九、扩展与限制

可安全扩展的方向：

• 重置按钮：清零总和与次数；
• 历史记录：显示最近 5 次累加值（但需列表状态，增加复杂度）；
• 平均值显示：_total / _count（当 _count > 0）。

当前限制（有意为之）：

• 不保存历史（关闭即清空）；
• 不支持批量导入；
• 不提供分享功能。

这些限制确保核心功能聚焦、简单、无认知负担。

---

十、结语：用累加，量化点滴

本文的页面仅 68 行代码，却完整实现了一个实用、可靠、直观的数字累加器。它没有云同步，没有 AI 分析，只有清晰的状态、即时的反馈、负责任的计算。

在 OpenHarmony 构建的智慧生活生态中，我们应始终铭记：技术的价值，不在于多智能，而在于多有用。

这个小小的累加器，正是对这一理念的践行——它不替你花钱，但帮你花得明白；不替你记事，但帮你记得清楚。

🌐 欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net/

在这里，您将获得：

• OpenHarmony 生活类应用设计规范；
• Flutter 累积状态与实时计算模板；
• 无依赖实用工具开发指南。

用简单，服务日常。

---