【flutter for open harmony】第三方库Flutter 鸿蒙版 BMI计算器 实战指南（适配 1.0.0）✨

Flutter 三方库 cached_network_image 的鸿蒙化适配与实战指南
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net

本文详细介绍如何在Flutter鸿蒙应用中实现BMI身体质量指数计算器，支持身高体重输入和健康状态评估。

一、前言

BMI（Body Mass Index）身体质量指数是衡量人体胖瘦程度以及是否健康的一个常用指标。在Flutter鸿蒙开发中，我们可以利用纯Dart实现一个功能完善的BMI计算器，帮助用户了解自己的身体状况。

本文将介绍如何实现：

• 身高体重输入
• BMI指数计算
• 健康状态评估
• 参考范围展示

二、效果展示

2.1 功能特性

功能	描述
身高输入	支持厘米单位输入
体重输入	支持千克单位输入
BMI计算	自动计算身体质量指数
状态评估	偏瘦/正常/偏胖/肥胖四级评估
参考范围	显示BMI健康参考范围

三、核心实现

3.1 BMI计算公式

void _calculateBMI() {
  final height = double.tryParse(_heightController.text);
  final weight = double.tryParse(_weightController.text);

  if (height == null || weight == null || height <= 0 || weight <= 0) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('请输入有效的身高和体重')),
    );
    return;
  }

  final heightInMeters = height / 100;
  final bmi = weight / (heightInMeters * heightInMeters);

  setState(() {
    _bmi = double.parse(bmi.toStringAsFixed(1));
    if (bmi < 18.5) {
      _category = '偏瘦';
      _categoryColor = Colors.blue;
    } else if (bmi < 24) {
      _category = '正常';
      _categoryColor = Colors.green;
    } else if (bmi < 28) {
      _category = '偏胖';
      _categoryColor = Colors.orange;
    } else {
      _category = '肥胖';
      _categoryColor = Colors.red;
    }
  });
}

3.2 状态管理

class _BMIPageState extends State<BMIPage> {
  final _heightController = TextEditingController();
  final _weightController = TextEditingController();
  double? _bmi;
  String _category = '';
  Color _categoryColor = Colors.grey;
}

四、UI布局实现

4.1 输入区域

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      children: [
        TextField(
          controller: _heightController,
          keyboardType: TextInputType.number,
          decoration: const InputDecoration(
            labelText: '身高 (cm)',
            border: OutlineInputBorder(),
            prefixIcon: Icon(Icons.height),
          ),
        ),
        const SizedBox(height: 16),
        TextField(
          controller: _weightController,
          keyboardType: TextInputType.number,
          decoration: const InputDecoration(
            labelText: '体重 (kg)',
            border: OutlineInputBorder(),
            prefixIcon: Icon(Icons.monitor_weight),
          ),
        ),
        const SizedBox(height: 16),
        SizedBox(
          width: double.infinity,
          child: ElevatedButton.icon(
            onPressed: _calculateBMI,
            icon: const Icon(Icons.calculate),
            label: const Text('计算 BMI'),
          ),
        ),
      ],
    ),
  ),
)

4.2 结果展示

Card(
  child: Padding(
    padding: const EdgeInsets.all(24),
    child: Column(
      children: [
        Text(
          '$_bmi',
          style: const TextStyle(fontSize: 64, fontWeight: FontWeight.bold),
        ),
        const SizedBox(height: 8),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          decoration: BoxDecoration(
            color: _categoryColor.withOpacity(0.2),
            borderRadius: BorderRadius.circular(20),
          ),
          child: Text(
            _category,
            style: TextStyle(fontSize: 20, color: _categoryColor, fontWeight: FontWeight.bold),
          ),
        ),
      ],
    ),
  ),
)

五、关键实现要点

5.1 BMI分类标准

BMI范围	分类	颜色
< 18.5	偏瘦	蓝色
18.5 - 24	正常	绿色
24 - 28	偏胖	橙色
> 28	肥胖	红色

5.2 数值保留

使用toStringAsFixed保留一位小数：

_bmi = double.parse(bmi.toStringAsFixed(1));

六、在鸿蒙平台运行

由于BMI计算器功能完全由Dart实现，无需任何原生代码适配：

1. 确保Flutter环境已配置鸿蒙支持
2. 在DevEco Studio中打开项目
3. 连接鸿蒙设备或模拟器
4. 运行应用即可使用BMI计算功能

七、总结

本文介绍了如何在Flutter鸿蒙应用中实现BMI计算器功能。通过纯Dart实现，我们获得了以下优势：

• 跨平台一致性：无需针对不同平台编写原生代码
• 代码简洁：核心逻辑清晰易懂
• 易于维护：所有逻辑集中在Dart层
• 实用性强：帮助用户了解身体状况

BMI计算器是学习Flutter表单处理和数值计算的优秀案例。

---

本文为Flutter鸿蒙开发系列文章之一，更多实战内容请关注后续更新。

CSDN社区: https://bbs.csdn.net/forums/4f54ff014fbd4d42b72d3c5c1d3c5a4e