Flutter 框架跨平台鸿蒙开发 - 节气生活

运行效果图节气生活是一款基于中国传统二十四节气的生活指导应用，旨在帮助用户顺应自然规律，按照节气安排生活节奏。应用结合了传统节气文化与现代生活方式，为用户提供个性化的养生建议、饮食推荐和活动安排。应用以绿色为主色调，象征自然与生机。界面设计简洁优雅，融入了大量中国传统文化元素。通过智能算法识别当前节气，为用户提供实时的节气信息和生活指导，帮助用户在快节奏的现代生活中找到与自然和谐相处的方式。

李李李勃谦

392人浏览 · 2026-04-08 21:16:45

李李李勃谦 · 2026-04-08 21:16:45 发布

节气生活应用

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

一、项目概述

运行效果图

1.1 应用简介

节气生活是一款基于中国传统二十四节气的生活指导应用，旨在帮助用户顺应自然规律，按照节气安排生活节奏。应用结合了传统节气文化与现代生活方式，为用户提供个性化的养生建议、饮食推荐和活动安排。

应用以绿色为主色调，象征自然与生机。界面设计简洁优雅，融入了大量中国传统文化元素。通过智能算法识别当前节气，为用户提供实时的节气信息和生活指导，帮助用户在快节奏的现代生活中找到与自然和谐相处的方式。

1.2 核心功能

功能模块	功能描述	实现方式
节气识别	自动识别当前节气	日期计算算法
今日首页	展示当前节气信息	卡片式布局
节气日历	24节气完整展示	网格布局
养生建议	节气养生知识推荐	列表展示
美食推荐	节气饮食建议	横向滚动
活动建议	节气传统活动	标签展示
任务管理	节气生活任务	任务列表
知识科普	节气文化知识	文章展示

1.3 二十四节气

应用包含完整的二十四节气信息：

季节	节气	时间	含义
春	立春	2月3-5日	春季开始
春	雨水	2月18-20日	降雨开始
春	惊蛰	3月5-7日	春雷乍动
春	春分	3月20-22日	昼夜平分
春	清明	4月4-6日	天气清朗
春	谷雨	4月19-21日	雨生百谷
夏	立夏	5月5-7日	夏季开始
夏	小满	5月20-22日	麦粒饱满
夏	芒种	6月5-7日	有芒作物成熟
夏	夏至	6月21-22日	白昼最长
夏	小暑	7月6-8日	天气炎热
夏	大暑	7月22-24日	最热时期
秋	立秋	8月7-9日	秋季开始
秋	处暑	8月22-24日	暑气渐消
秋	白露	9月7-9日	露凝而白
秋	秋分	9月22-24日	昼夜平分
秋	寒露	10月8-9日	露水寒冷
秋	霜降	10月23-24日	开始降霜
冬	立冬	11月7-8日	冬季开始
冬	小雪	11月22-23日	开始降雪
冬	大雪	12月6-8日	雪量增多
冬	冬至	12月21-23日	白昼最短
冬	小寒	1月5-7日	天气寒冷
冬	大寒	1月20-21日	最冷时期

1.4 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
状态管理	setState	-
动画系统	AnimationController	-
目标平台	鸿蒙OS / Web	API 21+

1.5 项目结构

lib/
└── main_solar_terms_life.dart
    ├── SolarTermsLifeApp           # 应用入口
    ├── SolarTermSeason             # 季节枚举
    ├── SolarTerm                   # 节气模型
    ├── DailyTask                   # 每日任务模型
    ├── SolarTermsLifeHomePage      # 主页面（底部导航）
    ├── _buildHomePage              # 今日页面
    ├── _buildCalendarPage          # 节气日历页面
    ├── _buildTasksPage             # 任务页面
    └── _buildKnowledgePage         # 知识页面

二、设计理念

2.1 天人合一思想

2.2 节气生活理念

2.3 四季色彩体系

应用采用四季色彩体系，每个季节都有独特的主题色：

季节	主色	辅助色	象征意义
春	#81C784 (嫩绿)	#A5D6A7	生机、希望、新生
夏	#FFB74D (橙黄)	#FFCC80	热情、活力、阳光
秋	#FFB300 (金黄)	#FFD54F	收获、成熟、稳重
冬	#64B5F6 (天蓝)	#90CAF9	宁静、纯洁、内敛

2.4 节气文化传承

三、系统架构

3.1 整体架构图

3.2 类图设计

3.3 节气识别流程

四、核心功能实现

4.1 节气数据模型

节气模型包含完整的节气信息：

class SolarTerm {
  final int index;              // 节气序号（1-24）
  final String name;            // 节气名称
  final String pinyin;          // 拼音
  final String date;            // 日期范围
  final SolarTermSeason season; // 所属季节
  final String meaning;         // 节气含义
  final String phenomenon;      // 物候现象
  final List<String> foods;     // 节气美食
  final List<String> activities;// 节气活动
  final List<String> healthTips;// 养生建议
  final String poem;            // 节气诗词
  final String poemAuthor;      // 诗词作者
}

节气数据示例：

SolarTerm(
  index: 1,
  name: '立春',
  pinyin: 'Lì Chūn',
  date: '2月3-5日',
  season: SolarTermSeason.spring,
  meaning: '春季开始，万物复苏',
  phenomenon: '东风解冻，蛰虫始振，鱼陟负冰',
  foods: ['春饼', '萝卜', '姜', '葱', '韭菜'],
  activities: ['迎春', '咬春', '踏青', '放风筝'],
  healthTips: ['早睡早起', '适当运动', '调养肝脏', '防寒保暖'],
  poem: '春度春归无限春，今朝方始觉成人。',
  poemAuthor: '罗隐',
)

4.2 节气识别算法

节气识别是应用的核心功能：

SolarTerm _getCurrentSolarTerm() {
  final now = DateTime.now();
  final month = now.month;
  final day = now.day;

  // 24节气的日期范围
  final solarTermDates = [
    [2, 4], [2, 19], [3, 6], [3, 21], [4, 5], [4, 20],
    [5, 6], [5, 21], [6, 6], [6, 21], [7, 7], [7, 23],
    [8, 8], [8, 23], [9, 8], [9, 23], [10, 8], [10, 24],
    [11, 8], [11, 22], [12, 7], [12, 22], [1, 6], [1, 20],
  ];

  // 从后往前查找当前节气
  for (int i = solarTermDates.length - 1; i >= 0; i--) {
    final termMonth = solarTermDates[i][0];
    final termDay = solarTermDates[i][1];

    if (month > termMonth || (month == termMonth && day >= termDay)) {
      return _solarTerms[i];
    }
  }

  // 如果没找到，返回最后一个节气（大寒）
  return _solarTerms[23];
}

4.3 倒计时计算

计算距离下一个节气的天数：

int _calculateDaysToNextTerm() {
  final now = DateTime.now();
  final nextTermIndex = _nextTerm.index - 1;

  // 获取下一节气的日期
  final solarTermDates = [
    [2, 4], [2, 19], [3, 6], [3, 21], [4, 5], [4, 20],
    [5, 6], [5, 21], [6, 6], [6, 21], [7, 7], [7, 23],
    [8, 8], [8, 23], [9, 8], [9, 23], [10, 8], [10, 24],
    [11, 8], [11, 22], [12, 7], [12, 22], [1, 6], [1, 20],
  ];

  final nextDate = solarTermDates[nextTermIndex];
  var nextTermDate = DateTime(now.year, nextDate[0], nextDate[1]);

  // 如果下一节气日期已过，则计算下一年的
  if (nextTermDate.isBefore(now)) {
    nextTermDate = DateTime(now.year + 1, nextDate[0], nextDate[1]);
  }

  return nextTermDate.difference(now).inDays;
}

4.4 当前节气卡片

展示当前节气信息的核心组件：

Widget _buildCurrentTermCard() {
  return Container(
    width: double.infinity,
    padding: const EdgeInsets.all(24),
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [
          _currentTerm.season.color,
          _currentTerm.season.color.withValues(alpha: 0.7),
        ],
      ),
      borderRadius: BorderRadius.circular(24),
    ),
    child: Column(
      children: [
        // 节气名称和拼音
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_currentTerm.season.emoji, style: TextStyle(fontSize: 32)),
            SizedBox(width: 12),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  _currentTerm.name,
                  style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
                ),
                Text(_currentTerm.pinyin),
              ],
            ),
          ],
        ),
        // 节气含义
        Text(_currentTerm.meaning),
        // 节气序号和日期
        Container(
          child: Text('第${_currentTerm.index}个节气 · ${_currentTerm.date}'),
        ),
      ],
    ),
  );
}

4.5 节气美食推荐

展示节气相关的美食：

Widget _buildFoodRecommendations() {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('节气美食', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
      SizedBox(height: 12),
      SizedBox(
        height: 120,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: _currentTerm.foods.length,
          itemBuilder: (context, index) {
            final food = _currentTerm.foods[index];
            return Container(
              width: 100,
              margin: EdgeInsets.only(right: 12),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // 美食图标
                  Container(
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                      color: _currentTerm.season.color.withValues(alpha: 0.1),
                      shape: BoxShape.circle,
                    ),
                    child: Text(_getFoodEmoji(food), style: TextStyle(fontSize: 24)),
                  ),
                  SizedBox(height: 8),
                  Text(food, style: TextStyle(fontSize: 13)),
                ],
              ),
            );
          },
        ),
      ),
    ],
  );
}

五、UI设计规范

5.1 配色方案

应用采用四季色彩体系：

季节	主色	RGB	用途
春	#81C784	129,199,132	春季节气主题色
夏	#FFB74D	255,183,77	夏季节气主题色
秋	#FFB300	255,179,0	秋季节气主题色
冬	#64B5F6	100,181,246	冬季节气主题色

5.2 字体规范

元素	字号	字重	颜色
节气名称	36px	Bold	季节主题色
页面标题	24-28px	Bold	#000000
节气拼音	14-16px	Regular	#666666
节气含义	16px	Regular	#FFFFFF
养生建议	15px	Regular	#000000
辅助文字	12-13px	Regular	#999999

5.3 组件规范

5.3.1 节气卡片

┌─────────────────────────────────────────┐
│                                         │
│            🌸  立春                     │
│               Lì Chūn                   │
│                                         │
│        春季开始，万物复苏                │
│                                         │
│         第1个节气 · 2月3-5日             │
│                                         │
└─────────────────────────────────────────┘

5.3.2 倒计时卡片

┌─────────────────────────────────────────┐
│  📅 下一个节气                           │
│                                         │
│     雨水          │        15           │
│   2月18-20日      │       天后          │
│                                         │
└─────────────────────────────────────────┘

5.3.3 养生建议卡片

┌─────────────────────────────────────────┐
│  ①  早睡早起                             │
│      顺应节气，调整作息时间               │
└─────────────────────────────────────────┘

六、交互设计

6.1 应用启动流程

6.2 节气切换流程

6.3 页面切换状态

七、节气数据设计

7.1 节气信息完整性

每个节气包含完整的信息：

信息类型	内容	用途
基本信息	名称、拼音、日期	节气识别
季节信息	所属季节、主题色	UI展示
文化信息	含义、物候现象	知识科普
生活指导	美食、活动、养生	生活建议
文化传承	诗词、作者	文化教育

7.2 节气美食设计原则

设计节气美食时应考虑：

7.3 养生建议设计原则

设计养生建议时应遵循：

科学性：基于中医养生理论
实用性：简单易行，适合日常生活
季节性：符合节气特点
个性化：考虑不同人群需求

7.4 节气诗词选择

选择节气诗词时应考虑：

相关性：诗词内容与节气相关
知名度：选择广为人知的经典诗词
教育性：具有文化教育意义
美感：具有艺术美感

八、扩展功能规划

8.1 后续版本规划

8.2 功能扩展建议

8.2.1 节气提醒

在节气到来前提醒用户：

节气到来提醒
养生建议推送
美食推荐通知
活动安排提醒

8.2.2 个人定制

根据用户情况定制建议：

体质类型识别
个性化养生方案
饮食偏好设置
运动习惯记录

8.2.3 社区分享

建立节气生活社区：

分享节气体验
交流养生心得
美食制作分享
活动组织

九、注意事项

9.1 开发注意事项

节气日期：节气日期每年略有变化，需要精确计算
状态管理：使用setState管理本地状态
性能优化：节气数据较大，注意内存管理
用户体验：保持界面简洁，避免信息过载

9.2 常见问题

问题	原因	解决方案
节气识别错误	日期计算错误	检查节气日期数组
颜色不更新	季节未正确识别	检查_currentTerm
倒计时不准确	日期计算错误	检查_calculateDaysToNextTerm
美食图标不显示	emoji映射缺失	添加新的emoji映射

9.3 使用提示

🌸 节气生活使用小贴士 🌸

顺应节气，调养身心，天人合一。
每个节气都有独特的养生智慧。
品尝当季美食，感受自然馈赠。
参与传统活动，传承文化精髓。

提示：节气养生建议仅供参考，具体情况请咨询专业人士。

十、运行说明

10.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+

10.2 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_solar_terms_life.dart --web-port 8124

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_solar_terms_life.dart

# 运行到Windows
flutter run -d windows -t lib/main_solar_terms_life.dart

# 代码分析
flutter analyze lib/main_solar_terms_life.dart

十一、总结

节气生活是一款基于中国传统二十四节气的生活指导应用，通过智能识别当前节气，为用户提供个性化的养生建议、饮食推荐和活动安排。应用融合了传统节气文化与现代生活方式，帮助用户在快节奏的现代生活中找到与自然和谐相处的方式。

从技术实现来看，应用使用日期计算算法识别当前节气，通过节气数据模型存储完整的节气信息，采用四季色彩体系设计界面主题，使用卡片式布局展示节气信息。从文化传承来看，应用包含了完整的二十四节气信息，每个节气都有详细的含义、物候现象、美食推荐、活动建议和养生知识，还配有经典诗词，让用户在了解节气的同时感受传统文化的魅力。

应用不仅是一个节气查询工具，更是一个生活指导平台。它提醒我们：顺应节气，调养身心，天人合一；每个节气都有独特的养生智慧；品尝当季美食，感受自然馈赠；参与传统活动，传承文化精髓。在快节奏的现代生活中，节气生活为我们提供了一种回归自然、顺应天时的生活方式。

春雨惊春清谷天，夏满芒夏暑相连
秋处露秋寒霜降，冬雪雪冬小大寒