Flutter实战：开源鸿蒙习惯打卡组件

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

本文详细介绍如何在Flutter鸿蒙应用中实现一个习惯打卡组件，支持习惯管理和每日打卡。

一、前言

习惯养成需要持续的追踪和激励。本文将介绍如何在Flutter鸿蒙应用中实现一个习惯打卡组件，帮助用户养成良好习惯。

二、效果展示

2.1 功能特性

三、详细实现

import 'package:flutter/material.dart';

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

  @override
  State<HabitTrackerPage> createState() => _HabitTrackerPageState();
}

class _HabitTrackerPageState extends State<HabitTrackerPage> {
  final List<Habit> _habits = [
    Habit(name: '早起', icon: Icons.wb_sunny),
    Habit(name: '运动', icon: Icons.fitness_center),
    Habit(name: '阅读', icon: Icons.book),
  ];

  void _toggleHabit(int index) {
    setState(() {
      _habits[index].isCompleted = !_habits[index].isCompleted;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('习惯打卡')),
      body: ListView.builder(
        itemCount: _habits.length,
        itemBuilder: (context, index) {
          return ListTile(
            leading: Icon(_habits[index].icon),
            title: Text(_habits[index].name),
            trailing: Checkbox(
              value: _habits[index].isCompleted,
              onChanged: (_) => _toggleHabit(index),
            ),
          );
        },
      ),
    );
  }
}

class Habit {
  final String name;
  final IconData icon;
  bool isCompleted;
  Habit({required this.name, required this.icon, this.isCompleted = false});
}

四、总结

本文详细介绍了如何在Flutter鸿蒙应用中实现一个习惯打卡组件。

五、参考资料

• Flutter官方文档
• 开源鸿蒙跨平台社区