开源鸿蒙跨平台Flutter开发：家庭传统节日记录应用

独特的螺狮粉2026-04-11 9:35

欢迎加入开源鸿蒙跨平台社区：

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

家庭传统节日记录是一款生活服务类应用，专门用于记录每个传统节日的家庭活动，包括照片、视频、文字等多种形式，帮助用户传承节日文化。应用以喜庆的红色为主色调，象征传统节日的喜庆氛围。涵盖节日记录、添加记录、记录详情、个人中心四大模块，让家庭节日记忆得到永久保存。

1.2 核心功能

功能模块 功能描述 实现方式
节日记录 浏览和管理节日记录 列表展示
添加记录 上传照片、视频、文字 多媒体输入
记录详情 查看完整节日记录 详情页面
节日分类 按传统节日分类 分类筛选
时间轴 按时间顺序展示 时间轴布局
分享功能 分享节日记录 社交分享

1.3 传统节日定义

序号 节日名称 Emoji 描述
1 春节 🧧 农历新年，全家团圆
2 元宵节 🏮 正月十五，吃汤圆
3 清明节 🪦 祭祖扫墓，缅怀先人
4 端午节 🥢 五月初五，吃粽子
5 中秋节 🌙 八月十五，赏月吃月饼
6 重阳节 🎋 九月初九，敬老爱老
7 冬至 ❄️ 冬季节气，吃饺子
8 除夕 🧨 年三十，守岁团圆

1.4 记录类型定义

序号 记录类型 Emoji 描述
1 照片 📷 节日照片记录
2 视频 📹 节日视频记录
3 文字 ✏️ 节日文字记录
4 混合 📝 照片、视频、文字混合

1.5 活动类型定义

序号 活动类型 Emoji 描述
1 家庭聚餐 🍲 家庭团圆饭
2 传统习俗 🎭 传统节日习俗
3 户外活动 🏞️ 节日户外活动
4 文化传承 📚 文化传承活动
5 亲友拜访 🚪 走亲访友

1.6 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
本地存储 SharedPreferences -
图片选择 image_picker -
视频处理 video_player -
目标平台 鸿蒙OS / Web API 21+

1.7 项目结构

复制代码 
lib/
└── main_family_festival_recorder.dart
    ├── FamilyFestivalRecorderApp     # 应用入口
    ├── FestivalType                  # 节日类型枚举
    ├── RecordType                    # 记录类型枚举
    ├── ActivityType                  # 活动类型枚举
    ├── FestivalRecord                # 节日记录模型
    ├── MediaItem                     # 媒体项目模型
    ├── FamilyFestivalHomePage        # 主页面（底部导航）
    ├── _buildFestivalPage            # 节日记录页面
    ├── _buildAddRecordPage           # 添加记录页面
    ├── _buildRecordDetailPage        # 记录详情页面
    ├── _buildProfilePage             # 我的页面
    ├── FestivalCard                  # 节日卡片组件
    ├── TimelineItem                  # 时间轴项目组件
    └── MediaGrid                    # 媒体网格组件

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

FamilyFestivalHomePage
节日记录页
添加记录页
记录详情页
我的页
节日列表
时间轴
分类筛选
媒体选择
文字输入
保存记录
媒体展示
详情信息
分享功能
个人设置
记录统计
记录管理器

RecordManager
媒体处理器

MediaProcessor
分享管理器

ShareManager
FestivalRecord

节日记录
MediaItem

媒体项目
FestivalType

节日类型

2.2 类图设计

has
has
has
has
FamilyFestivalRecorderApp
+Widget build()
<<enumeration>>
FestivalType
+String label
+String emoji
+String description
+springFestival()
+lanternFestival()
+qingmingFestival()
+dragonBoatFestival()
+midAutumnFestival()
+doubleNinthFestival()
+winterSolstice()
+newYearsEve()
<<enumeration>>
RecordType
+String label
+String emoji
+photo()
+video()
+text()
+mixed()
<<enumeration>>
ActivityType
+String label
+String emoji
+familyDinner()
+traditionalCustom()
+outdoorActivity()
+culturalHeritage()
+visitingRelatives()
MediaItem
+String id
+String type
+String path
+DateTime createdAt
FestivalRecord
+String id
+String title
+FestivalType festival
+RecordType recordType
+ActivityType activityType
+List<MediaItem> mediaItems
+String content
+DateTime date
+String location
+int year
+bool isPublic
FamilyFestivalHomePage
+Widget build()

2.3 页面导航流程

节日记录
添加记录
我的
应用启动
节日记录页
底部导航
节日列表
添加记录
个人中心
查看记录
记录详情页
选择节日
选择活动类型
上传媒体
填写内容
保存记录
分享记录
社交平台

2.4 记录添加流程

记录管理器 媒体选择器 添加记录页 用户 记录管理器 媒体选择器 添加记录页 用户 点击添加记录 选择节日 选择节日 选择活动类型 选择活动类型 选择媒体 返回媒体文件 输入文字内容 输入内容 保存记录 保存成功

三、核心模块设计

3.1 数据模型设计

3.1.1 节日类型枚举 (FestivalType)
dart 复制代码 
enum FestivalType {
  springFestival(label: '春节', emoji: '🧧', description: '农历新年，全家团圆'),
  lanternFestival(label: '元宵节', emoji: '🏮', description: '正月十五，吃汤圆'),
  qingmingFestival(label: '清明节', emoji: '🪦', description: '祭祖扫墓，缅怀先人'),
  dragonBoatFestival(label: '端午节', emoji: '🥢', description: '五月初五，吃粽子'),
  midAutumnFestival(label: '中秋节', emoji: '🌙', description: '八月十五，赏月吃月饼'),
  doubleNinthFestival(label: '重阳节', emoji: '🎋', description: '九月初九，敬老爱老'),
  winterSolstice(label: '冬至', emoji: '❄️', description: '冬季节气，吃饺子'),
  newYearsEve(label: '除夕', emoji: '🧨', description: '年三十，守岁团圆');

  final String label;
  final String emoji;
  final String description;
}
3.1.2 记录类型枚举 (RecordType)
dart 复制代码 
enum RecordType {
  photo(label: '照片', emoji: '📷'),
  video(label: '视频', emoji: '📹'),
  text(label: '文字', emoji: '✏️'),
  mixed(label: '混合', emoji: '📝');

  final String label;
  final String emoji;
}
3.1.3 节日记录模型 (FestivalRecord)
dart 复制代码 
class FestivalRecord {
  final String id;              // 记录ID
  final String title;           // 记录标题
  final FestivalType festival;  // 节日类型
  final RecordType recordType;  // 记录类型
  final ActivityType activityType; // 活动类型
  final List<MediaItem> mediaItems; // 媒体项目
  final String content;         // 文字内容
  final DateTime date;          // 记录日期
  final String location;        // 记录地点
  final int year;               // 记录年份
  final bool isPublic;          // 是否公开
}
3.1.4 媒体项目模型 (MediaItem)
dart 复制代码 
class MediaItem {
  final String id;              // 媒体ID
  final String type;            // 媒体类型（photo/video）
  final String path;            // 媒体路径
  final DateTime createdAt;     // 创建时间
}
3.1.5 节日分布

30% 25% 15% 10% 8% 7% 3% 2% 节日记录分布示例 春节 中秋节 端午节 元宵节 清明节 重阳节 冬至 除夕

3.2 页面结构设计

3.2.1 主页面布局

FamilyFestivalHomePage
IndexedStack
节日记录页
添加记录页
记录详情页
我的页
NavigationBar
节日记录 Tab
添加记录 Tab
我的 Tab

3.2.2 节日记录页结构

节日记录页
SliverAppBar
年份筛选
节日分类
时间轴
标题
统计信息
年份选择器
节日芯片
时间轴项目
日期标签
记录卡片
媒体预览

3.2.3 添加记录页结构

添加记录页
SliverAppBar
节日选择
活动类型选择
媒体上传
文字输入
保存按钮
节日选择器
活动类型选择器
图片选择
视频选择
媒体预览
标题输入
内容输入
地点输入

3.2.4 记录详情页结构

记录详情页
SliverAppBar
记录信息
媒体展示
文字内容
操作按钮
返回按钮
分享按钮
节日信息
活动类型
日期地点
图片网格
视频播放器
编辑按钮
删除按钮
分享按钮

3.3 记录管理逻辑

记录管理
添加记录
选择节日
选择活动类型
上传媒体
输入内容
保存记录
查看记录
时间轴展示
按年份筛选
按节日筛选
编辑记录
修改内容
更新记录
删除记录
确认删除
删除成功

3.4 媒体处理逻辑

照片
视频
媒体处理
选择媒体
媒体类型
调用相机/相册
调用相机
压缩图片
压缩视频
生成缩略图
保存媒体
关联记录

四、UI设计规范

4.1 配色方案

应用以喜庆的红色为主色调，象征传统节日的喜庆氛围：

颜色类型 色值 用途
主色 #E53935 (Red) 导航、主题元素
辅助色 #EF5350 节日记录页面
第三色 #EF9A9A 添加记录页面
强调色 #FFCDD2 记录详情页面
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 记录卡片
成功色 #4CAF50 保存成功
警告色 #FF9800 提示信息

4.2 节日颜色定义

节日 色值 视觉效果
春节 #E53935 红色，喜庆热闹
元宵节 #FF9800 橙色，温馨团圆
清明节 #4CAF50 绿色，生机盎然
端午节 #2196F3 蓝色，清凉夏日
中秋节 #FFC107 黄色，月圆美满
重阳节 #9C27B0 紫色，敬老尊老
冬至 #607D8B 灰色，冬日温暖
除夕 #F44336 深红色，辞旧迎新

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
记录标题 18px Bold #000000
节日名称 16px Bold 主色
日期信息 14px Regular 灰色
内容文字 14px Regular #333333

4.4 组件规范

4.4.1 节日卡片
复制代码 
┌─────────────────────────────────────┐
│  🧧  春节 2024                      │
│                                     │
│  ┌────────────┐ ┌────────────┐     │
│  │            │ │            │     │
│  │  📷 照片    │ │  📷 照片    │     │
│  │            │ │            │     │
│  └────────────┘ └────────────┘     │
│                                     │
│  家庭团圆饭                          │
│  2024-02-10 · 北京市                 │
│                                     │
│  [查看详情]                          │
└─────────────────────────────────────┘
4.4.2 时间轴项目
复制代码 
┌─────────────────────────────────────┐
│                                    │
│  │                                │
│  │  📅 2024-02-10                 │
│  │                                │
│  ▼                                │
│                                    │
│  ┌─────────────────────────────┐   │
│  │  🧧 春节                      │   │
│  │  家庭团圆饭                    │   │
│  │  3张照片 · 1段文字             │   │
│  └─────────────────────────────┘   │
│                                    │
└─────────────────────────────────────┘
4.4.3 添加记录表单
复制代码 
┌─────────────────────────────────────┐
│  添加节日记录                        │
│                                     │
│  节日: 🔽                            │
│  [🧧 春节] [🏮 元宵节] [🪦 清明节]        │
│                                     │
│  活动类型: 🔽                         │
│  [🍲 家庭聚餐] [🎭 传统习俗] [🏞️ 户外活动] │
│                                     │
│  上传照片/视频:                       │
│  ┌────────────┐ +                    │
│  │  📷        │                      │
│  └────────────┘                      │
│                                     │
│  标题: __________________________    │
│                                     │
│  内容: __________________________    │
│  ____________________________    │
│  ____________________________    │
│                                     │
│  地点: __________________________    │
│                                     │
│  [保存记录]                          │
└─────────────────────────────────────┘
4.4.4 记录详情
复制代码 
┌─────────────────────────────────────┐
│  🧧 春节家庭团圆饭                    │
│                                     │
│  2024-02-10 · 北京市                 │
│  🍲 家庭聚餐                         │
│                                     │
│  ┌────────────┐ ┌────────────┐     │
│  │            │ │            │     │
│  │  📷 照片    │ │  📷 照片    │     │
│  │            │ │            │     │
│  └────────────┘ └────────────┘     │
│                                     │
│  今年春节全家团圆，一起吃年夜饭，       │
│  孩子们放鞭炮，大人们聊天，非常开心。     │
│  希望每年都能这样团聚。               │
│                                     │
│  [编辑] [删除] [分享]                │
└─────────────────────────────────────┘
4.4.5 年份筛选
复制代码 
┌─────────────────────────────────────┐
│  年份筛选                            │
│                                     │
│  [2024] [2023] [2022] [2021] [2020]  │
│                                     │
└─────────────────────────────────────┘

五、核心功能实现

5.1 节日记录列表实现

dart 复制代码 
class FestivalRecordListPage extends StatefulWidget {
  @override
  State<FestivalRecordListPage> createState() => _FestivalRecordListPageState();
}

class _FestivalRecordListPageState extends State<FestivalRecordListPage> {
  List<FestivalRecord> _records = [];
  int _selectedYear = DateTime.now().year;
  FestivalType? _selectedFestival;

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          title: Text('节日记录'),
          actions: [
            IconButton(
              icon: Icon(Icons.filter_list),
              onPressed: () => _showFilterDialog(),
            ),
          ],
        ),
        SliverToBoxAdapter(
          child: _buildYearFilter(),
        ),
        SliverToBoxAdapter(
          child: _buildFestivalFilter(),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) => TimelineItem(record: _records[index]),
            childCount: _records.length,
          ),
        ),
      ],
    );
  }
}

5.2 添加记录实现

dart 复制代码 
class AddRecordPage extends StatefulWidget {
  @override
  State<AddRecordPage> createState() => _AddRecordPageState();
}

class _AddRecordPageState extends State<AddRecordPage> {
  FestivalType? _selectedFestival;
  ActivityType? _selectedActivity;
  List<MediaItem> _mediaItems = [];
  TextEditingController _titleController = TextEditingController();
  TextEditingController _contentController = TextEditingController();
  TextEditingController _locationController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('添加记录'),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildFestivalSelector(),
            _buildActivitySelector(),
            _buildMediaUpload(),
            _buildFormFields(),
            SizedBox(height: 24),
            SizedBox(
              width: double.infinity,
              child: FilledButton(
                onPressed: _saveRecord,
                child: Text('保存记录'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _saveRecord() {
    // 保存记录逻辑
  }
}

5.3 记录详情实现

dart 复制代码 
class RecordDetailPage extends StatefulWidget {
  final FestivalRecord record;

  @override
  State<RecordDetailPage> createState() => _RecordDetailPageState();
}

class _RecordDetailPageState extends State<RecordDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.record.title),
        actions: [
          IconButton(
            icon: Icon(Icons.share),
            onPressed: _shareRecord,
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildRecordInfo(),
            _buildMediaDisplay(),
            _buildContent(),
            _buildActionButtons(),
          ],
        ),
      ),
    );
  }

  void _shareRecord() {
    // 分享逻辑
  }
}

5.4 时间轴实现

dart 复制代码 
class TimelineItem extends StatelessWidget {
  final FestivalRecord record;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 16),
      child: Column(
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: 60,
                child: Column(
                  children: [
                    Text(
                      '${record.date.month}-${record.date.day}',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text(
                      record.date.year.toString(),
                      style: TextStyle(fontSize: 12, color: Colors.grey),
                    ),
                  ],
                ),
              ),
              Container(
                width: 2,
                color: Theme.of(context).colorScheme.primary,
                margin: EdgeInsets.symmetric(horizontal: 16),
              ),
              Expanded(
                child: FestivalCard(record: record),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

5.5 媒体处理实现

dart 复制代码 
class MediaProcessor {
  static Future<MediaItem> processImage(XFile file) async {
    // 压缩图片
    // 生成缩略图
    // 保存文件
    return MediaItem(
      id: '${DateTime.now().millisecondsSinceEpoch}',
      type: 'photo',
      path: file.path,
      createdAt: DateTime.now(),
    );
  }

  static Future<MediaItem> processVideo(XFile file) async {
    // 压缩视频
    // 生成缩略图
    // 保存文件
    return MediaItem(
      id: '${DateTime.now().millisecondsSinceEpoch}',
      type: 'video',
      path: file.path,
      createdAt: DateTime.now(),
    );
  }
}

六、交互设计

6.1 记录浏览流程

详情页 筛选器 节日记录页 用户 详情页 筛选器 节日记录页 用户 打开应用 加载筛选选项 显示年份和节日选项 选择年份 筛选记录 显示筛选结果 点击记录 打开详情 显示记录详情

6.2 添加记录流程

照片
视频
打开添加记录页
选择节日
选择活动类型
上传媒体
输入标题和内容
输入地点
保存记录
返回记录列表
媒体类型
选择照片
录制视频

6.3 分享记录流程

点击分享按钮
选择分享平台
生成分享内容
分享到平台
记录详情
点击分享
选择平台
生成分享内容
分享完成

七、扩展功能规划

7.1 后续版本规划

2024-01-07 2024-01-14 2024-01-21 2024-01-28 2024-02-04 2024-02-11 2024-02-18 2024-02-25 2024-03-03 2024-03-10 2024-03-17 2024-03-24 2024-03-31 2024-04-07 基础UI框架 记录管理功能 媒体处理功能 时间轴优化 分享功能完善 统计分析功能 云存储同步 智能分类 节日提醒 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 家庭传统节日记录应用开发计划

7.2 功能扩展建议

7.2.1 云存储同步

云存储功能：

  • 记录自动备份到云端
  • 多设备同步
  • 数据安全保障
  • 存储空间管理
7.2.2 智能分类

智能功能：

  • 基于AI的内容分类
  • 自动生成记录标签
  • 智能搜索功能
  • 推荐相关记录
7.2.3 节日提醒

提醒功能：

  • 传统节日倒计时
  • 记录提醒
  • 节日习俗介绍
  • 活动建议

八、注意事项

8.1 开发注意事项

  1. 媒体处理：大量媒体文件需注意内存管理

  2. 数据安全：个人记录需做好数据加密

  3. 性能优化：图片加载需优化，避免卡顿

  4. 权限管理：相机、存储权限需合理申请

  5. 兼容性：不同设备的屏幕适配

8.2 常见问题

问题 原因 解决方案
媒体上传失败 存储空间不足 提示用户清理空间
记录保存失败 网络问题 支持离线保存
图片加载缓慢 图片过大 实现图片压缩
分享失败 权限不足 引导用户开启权限
时间轴卡顿 数据量过大 分页加载数据

8.3 使用技巧

📅 节日记录使用技巧 📅

记录建议

  • 每个节日至少记录一次
  • 包含照片、视频、文字多种形式
  • 记录详细的活动内容和感受
  • 标注地点和参与人员

组织方法

  • 按年份整理记录
  • 按节日类型分类
  • 创建节日主题相册
  • 定期回顾和分享

媒体管理

  • 拍摄高质量照片
  • 录制精彩瞬间视频
  • 及时备份重要媒体
  • 合理使用存储空间

传承建议

  • 记录传统习俗细节
  • 分享节日文化知识
  • 与家人共同参与记录
  • 定期回顾美好回忆

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+
Web浏览器 Chrome 90+
存储权限 读写权限

9.2 运行命令

bash 复制代码 
# 查看可用设备
flutter devices

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

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

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

十、总结

家庭传统节日记录应用通过节日记录、添加记录、记录详情、个人中心四大模块，为用户提供了一个便捷的家庭节日记忆管理平台。应用支持照片、视频、文字等多种记录形式，让传统节日文化得到传承和保存。

核心功能涵盖节日记录管理、媒体上传、时间轴展示、分享功能四大模块。节日记录管理支持按年份和节日类型筛选；媒体上传支持照片和视频；时间轴展示按时间顺序呈现记录；分享功能支持将记录分享到社交平台。

应用采用 Material Design 3 设计规范，以喜庆的红色为主色调，象征传统节日的喜庆氛围。通过本应用，希望能够帮助用户记录和传承家庭传统节日文化，让美好回忆得以永久保存。

家庭传统节日记录------传承节日文化，保存美好回忆

相关推荐
冬奇Lab2 小时前
一天一个开源项目（第70篇）：claude-code-best-practice - 从 Vibe Coding 迈向 AI 原生开发的实战指南
人工智能·开源·资讯
Fate_I_C2 小时前
uniappx 鸿蒙运行包制作失败
华为·uni-app·uniapp·harmonyos
亚马逊云开发者2 小时前
Claude Code接入自建开源模型实战：SageMaker部署+LiteLLM动态路由，推理成本降低70%
开源
空中海2 小时前
2.1 Widget 基础
flutter·dart
想七想八不如114082 小时前
【GitHub开源】一款基于 Python 的人脸识别 C/S 系统：YOLOv5 + PyQt5 + 批量入库
yolo·开源·github
亚历克斯神2 小时前
Flutter 组件 genkit 的适配 鸿蒙Harmony 深度进阶 - 驾驭模型幻觉审计、实现鸿蒙端多维 RAG 向量对齐与端云协同 AI 指挥中心方案
flutter·harmonyos·鸿蒙·openharmony
浮芷.2 小时前
开源鸿蒙跨平台Flutter开发：考试资料共享平台应用
科技·flutter·华为·开源·harmonyos·鸿蒙
AI_零食2 小时前
开源鸿蒙跨平台Flutter开发：快递单号批量查询应用
学习·flutter·华为·开源·harmonyos·鸿蒙
旺仔大牛2 小时前
Flutter中StatefulWidget的生命周期
flutter·statefulwidget
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了06MySQL表约束详解：8大核心约束实战指南07VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）08CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南09Oh My Codex 快速使用指南10UV安装并设置国内源