Flutter实现猫咪体重记录功能开发指南

你认识小鲍鱼吗

1. 项目概述：猫咪体重记录功能开发

作为一名长期从事宠物健康类应用开发的工程师，我发现体重监测是猫咪健康管理中最基础也最重要的功能之一。这次我们要为OpenHarmony平台的猫咪管家App实现一个专业的体重记录模块，不仅能准确记录数据，还要提供优秀的用户体验。

这个功能看似简单，但实际开发中需要考虑很多细节：如何设计直观的输入界面？怎样确保数据有效性？如何与现有架构无缝集成？下面我将分享完整的实现过程，包括那些官方文档不会告诉你的实战技巧。

2. 核心功能设计解析

2.1 功能需求拆解

体重记录模块需要实现以下核心功能点：

精确数值输入：支持小数点后两位的体重录入（单位kg）
日期选择：默认当天，可回溯历史记录
备注信息：可选文字备注，记录特殊情况
数据验证：确保输入合法有效
持久化存储：与现有数据架构集成

看似简单的表单，实际上需要考虑以下设计要点：

输入体验优化：
- 大数字键盘优先显示数字和小数点
- 输入框自动聚焦
- 合理的默认值和占位提示
数据完整性保障：
- 前后端双重验证
- 合理的字段约束
- 异常输入处理
UI/UX设计：
- 视觉层次分明
- 操作反馈及时
- 无障碍访问支持

2.2 技术选型考量

在Flutter技术栈下，我们选择了以下方案组合：

状态管理：Provider（与现有架构一致）
表单处理：Form + TextEditingController（官方推荐）
日期选择：showDatePicker（Material原生）
输入验证：Form validator（内置机制）
布局适配：flutter_screenutil（跨设备适配）

选择这些方案主要基于：

一致性原则：延续项目现有技术栈
稳定性考量：使用经过验证的可靠方案
开发效率：最大化利用Flutter原生能力
维护成本：选择社区支持良好的方案

3. 详细实现步骤

3.1 环境准备与依赖配置

首先在pubspec.yaml中添加必要依赖：

yaml复制dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5
  flutter_screenutil: ^5.6.3
  intl: ^0.18.1

执行flutter pub get后，创建相关文件结构：

code复制lib/
├── features/
│   └── weight_tracking/
│       ├── add_weight_screen.dart
│       └── weight_record.dart
├── providers/
│   └── cat_provider.dart

3.2 数据模型设计

weight_record.dart中定义数据结构：

dart复制class WeightRecord {
  final String id;
  final String catId;
  final double weight; // 单位kg
  final DateTime date;
  final String? notes; // 可选备注

  WeightRecord({
    required this.id,
    required this.catId,
    required this.weight,
    required this.date,
    this.notes,
  });

  // 添加fromJson/toJson方法便于序列化
}

设计要点：

使用double存储体重，确保精度
notes字段可为null，避免空字符串
包含完整的序列化支持

3.3 页面架构实现

创建add_weight_screen.dart，构建基本结构：

dart复制class AddWeightScreen extends StatefulWidget {
  final String catId;

  const AddWeightScreen({super.key, required this.catId});

  @override
  State<AddWeightScreen> createState() => _AddWeightScreenState();
}

class _AddWeightScreenState extends State<AddWeightScreen> {
  final _formKey = GlobalKey<FormState>();
  final _weightController = TextEditingController();
  final _notesController = TextEditingController();
  DateTime _date = DateTime.now();

  @override
  void dispose() {
    _weightController.dispose();
    _notesController.dispose();
    super.dispose();
  }
  
  // 其他方法实现...
}

关键点：

使用StatefulWidget管理表单状态
独立的Controller处理每个输入字段
及时释放资源避免内存泄漏

3.4 表单UI构建

构建完整的表单布局：

dart复制@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('记录体重')),
    body: Form(
      key: _formKey,
      child: SingleChildScrollView(
        padding: EdgeInsets.all(16.w),
        child: Column(
          children: [
            _buildWeightInputCard(),
            SizedBox(height: 16.h),
            _buildDatePicker(),
            SizedBox(height: 16.h),
            _buildNotesInput(),
            SizedBox(height: 32.h),
            _buildSubmitButton(),
          ],
        ),
      ),
    ),
  );
}

布局特点：

使用Form包裹实现整体验证
SingleChildScrollView防止键盘遮挡
合理间距增强可读性

3.5 体重输入卡片实现

dart复制Widget _buildWeightInputCard() {
  return Card(
    elevation: 2,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12.r),
    ),
    child: Padding(
      padding: EdgeInsets.all(16.w),
      child: Column(
        children: [
          Icon(Icons.monitor_weight, 
              size: 60.sp, 
              color: Theme.of(context).primaryColor),
          SizedBox(height: 16.h),
          TextFormField(
            controller: _weightController,
            autofocus: true,
            keyboardType: const TextInputType.numberWithOptions(
              decimal: true,
              signed: false,
            ),
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 32.sp,
              fontWeight: FontWeight.bold,
              color: Colors.grey[800],
            ),
            decoration: InputDecoration(
              hintText: '0.00',
              suffixText: 'kg',
              border: InputBorder.none,
              hintStyle: TextStyle(
                fontSize: 32.sp,
                color: Colors.grey[300],
              ),
              contentPadding: EdgeInsets.zero,
            ),
            validator: _validateWeightInput,
          ),
        ],
      ),
    ),
  );
}

String? _validateWeightInput(String? value) {
  if (value?.isEmpty ?? true) return '请输入体重值';
  final numValue = double.tryParse(value!);
  if (numValue == null) return '请输入有效数字';
  if (numValue <= 0) return '体重必须大于0';
  if (numValue > 20) return '体重值过大'; // 一般猫咪体重不会超过20kg
  return null;
}

专业技巧：

自动聚焦提升用户体验
限制输入范围避免异常值
自定义圆角卡片增强视觉效果
去除内边距使输入更紧凑

3.6 日期选择器实现

dart复制Widget _buildDatePicker() {
  return InkWell(
    onTap: () => _selectDate(context),
    borderRadius: BorderRadius.circular(8.r),
    child: InputDecorator(
      decoration: InputDecoration(
        labelText: '记录日期',
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8.r),
        ),
        prefixIcon: Icon(Icons.calendar_today,
            color: Theme.of(context).primaryColor),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(DateFormat('yyyy年MM月dd日').format(_date)),
          Icon(Icons.arrow_drop_down,
              color: Colors.grey[600]),
        ],
      ),
    ),
  );
}

Future<void> _selectDate(BuildContext context) async {
  final picked = await showDatePicker(
    context: context,
    initialDate: _date,
    firstDate: DateTime.now().subtract(const Duration(days: 365 * 5)), // 5年前
    lastDate: DateTime.now(),
    builder: (context, child) {
      return Theme(
        data: Theme.of(context).copyWith(
          colorScheme: ColorScheme.light(
            primary: Theme.of(context).primaryColor,
          ),
        ),
        child: child!,
      );
    },
  );
  if (picked != null && picked != _date) {
    setState(() => _date = picked);
  }
}

优化点：

自定义日期选择器主题色
限制可选日期范围
添加视觉反馈图标
使用更符合中文习惯的日期格式

3.7 备注输入与保存逻辑

dart复制Widget _buildNotesInput() {
  return TextFormField(
    controller: _notesController,
    minLines: 1,
    maxLines: 3,
    decoration: InputDecoration(
      labelText: '备注 (选填)',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8.r),
      ),
      prefixIcon: Icon(Icons.note,
          color: Theme.of(context).primaryColor),
      hintText: '如：洗澡后、饭前等特殊情况',
    ),
  );
}

Widget _buildSubmitButton() {
  return SizedBox(
    width: double.infinity,
    height: 48.h,
    child: ElevatedButton(
      style: ElevatedButton.styleFrom(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.r),
        ),
      ),
      onPressed: _saveRecord,
      child: Text(
        '保存记录',
        style: TextStyle(fontSize: 16.sp),
      ),
    ),
  );
}

void _saveRecord() {
  if (!_formKey.currentState!.validate()) return;
  
  final record = WeightRecord(
    id: const Uuid().v4(),
    catId: widget.catId,
    weight: double.parse(_weightController.text),
    date: _date,
    notes: _notesController.text.trim().isEmpty 
        ? null 
        : _notesController.text.trim(),
  );

  try {
    context.read<CatProvider>().addWeightRecord(record);
    Navigator.pop(context);
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('${DateFormat('MM月dd日').format(_date)}体重已保存'),
        behavior: SnackBarBehavior.floating,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8.r),
        ),
      ),
    );
  } catch (e) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: const Text('保存失败，请重试'),
        backgroundColor: Colors.red,
      ),
    );
  }
}

关键细节：

备注字段动态行高
按钮圆角与整体风格一致
完善的错误处理机制
用户友好的成功反馈
自动生成唯一ID
数据存储前的trim处理

4. 高级优化技巧

4.1 输入体验增强

dart复制// 在initState中添加
@override
void initState() {
  super.initState();
  // 自动弹出数字键盘
  Future.delayed(Duration.zero, () {
    FocusScope.of(context).requestFocus(
      FocusNode()..addListener(() {
        if (!(_weightController.text.isEmpty)) return;
        SystemChannels.textInput.invokeMethod(
          'TextInput.show',
        );
      }),
    );
  });
  
  // 小数点自动补全
  _weightController.addListener(() {
    final text = _weightController.text;
    if (text.isEmpty) return;
    if (!text.contains('.') && text.length > 1) {
      _weightController.text = '$text.00';
      _weightController.selection = TextSelection.fromPosition(
        TextPosition(offset: text.length),
      );
    }
  });
}

4.2 数据持久化优化

在CatProvider中添加：

dart复制class CatProvider with ChangeNotifier {
  final List<WeightRecord> _weightRecords = [];
  
  void addWeightRecord(WeightRecord record) async {
    _weightRecords.add(record);
    notifyListeners();
    
    // 本地存储
    final prefs = await SharedPreferences.getInstance();
    final recordsJson = _weightRecords.map((r) => r.toJson()).toList();
    await prefs.setString(
      'weightRecords_${record.catId}',
      jsonEncode(recordsJson),
    );
    
    // 可选：同步到云端
    await _syncToCloud(record);
  }
  
  Future<void> _syncToCloud(WeightRecord record) async {
    try {
      await FirebaseFirestore.instance
          .collection('cats')
          .doc(record.catId)
          .collection('weightRecords')
          .doc(record.id)
          .set(record.toJson());
    } catch (e) {
      debugPrint('同步失败: $e');
      // 可添加重试逻辑
    }
  }
}

4.3 国际化支持

创建arb文件：

dart复制// app_en.arb
{
  "addWeightTitle": "Record Weight",
  "weightHint": "0.00",
  "weightUnit": "kg",
  // 其他字段...
}

// app_zh.arb
{
  "addWeightTitle": "记录体重",
  "weightHint": "0.00",
  "weightUnit": "公斤",
  // 其他字段...
}

在代码中使用：

dart复制Text(AppLocalizations.of(context)!.addWeightTitle),

4.4 主题与暗黑模式适配

dart复制// 在ThemeData中配置
ThemeData(
  inputDecorationTheme: InputDecorationTheme(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8.r),
    ),
    filled: true,
    fillColor: Theme.of(context).brightness == Brightness.dark
        ? Colors.grey[800]
        : Colors.grey[100],
  ),
  // 其他配置...
)

5. 常见问题与解决方案

5.1 输入验证问题

问题1：用户输入了非数字字符
解决方案：

dart复制validator: (value) {
  if (value?.isEmpty ?? true) return '请输入体重';
  final num = double.tryParse(value!);
  if (num == null) return '请输入有效数字';
  if (num <= 0) return '体重必须大于0';
  if (num > 20) return '猫咪体重一般不超过20kg';
  return null;
}

问题2：小数点后位数过多
解决方案：

dart复制inputFormatters: [
  FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}')),
],

5.2 日期处理问题

问题：时区导致日期显示不一致
解决方案：

dart复制final localDate = _date.toLocal();
Text(DateFormat('yyyy-MM-dd').format(localDate)),

5.3 键盘弹出问题

问题：键盘遮挡输入框
解决方案：

dart复制return Scaffold(
  resizeToAvoidBottomInset: true,
  // ...
);

5.4 数据存储问题

问题：应用重启后数据丢失
解决方案：

dart复制// 在Provider初始化时加载数据
Future<void> loadWeightRecords(String catId) async {
  final prefs = await SharedPreferences.getInstance();
  final recordsJson = prefs.getString('weightRecords_$catId');
  if (recordsJson != null) {
    final List records = jsonDecode(recordsJson);
    _weightRecords = records.map((r) => WeightRecord.fromJson(r)).toList();
    notifyListeners();
  }
}

6. 性能优化建议

控制器管理：
- 确保所有TextEditingController在dispose时被释放
- 考虑使用DisposableMixin简化资源管理
构建优化：
- 将静态部分提取到常量或单独widget
- 使用const构造函数减少重建开销
数据加载：
- 实现分页加载大量历史记录
- 使用compute进行JSON解析等耗时操作
状态管理：
- 对频繁更新的状态使用ValueNotifier
- 考虑使用select优化Provider监听范围
内存管理：
- 限制历史记录缓存数量
- 实现图片等资源的缓存策略

7. 测试要点

7.1 单元测试示例

dart复制test('WeightRecord model test', () {
  final now = DateTime.now();
  final record = WeightRecord(
    id: '1',
    catId: 'cat1',
    weight: 4.5,
    date: now,
    notes: 'after meal',
  );
  
  expect(record.id, '1');
  expect(record.weight, 4.5);
  expect(record.date, now);
  expect(record.notes, 'after meal');
});

test('Weight input validation', () {
  expect(validator(null), '请输入体重');
  expect(validator(''), '请输入体重');
  expect(validator('abc'), '请输入有效数字');
  expect(validator('0'), '体重必须大于0');
  expect(validator('25'), '猫咪体重一般不超过20kg');
  expect(validator('4.5'), null);
});