开源鸿蒙跨平台Flutter开发：家庭传统节日记录应用
运行效果图家庭传统节日记录是一款生活服务类应用，专门用于记录每个传统节日的家庭活动，包括照片、视频、文字等多种形式，帮助用户传承节日文化。应用以喜庆的红色为主色调，象征传统节日的喜庆氛围。涵盖节日记录、添加记录、记录详情、个人中心四大模块，让家庭节日记忆得到永久保存。序号节日名称Emoji描述1春节🧧农历新年，全家团圆2元宵节🏮正月十五，吃汤圆3清明节🪦祭祖扫墓，缅怀先人4端午节🥢五月初五
·
欢迎加入开源鸿蒙跨平台社区：
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 整体架构图
2.2 类图设计
2.3 页面导航流程
2.4 记录添加流程
三、核心模块设计
3.1 数据模型设计
3.1.1 节日类型枚举 (FestivalType)
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)
enum RecordType {
photo(label: '照片', emoji: '📷'),
video(label: '视频', emoji: '📹'),
text(label: '文字', emoji: '✏️'),
mixed(label: '混合', emoji: '📝');
final String label;
final String emoji;
}
3.1.3 节日记录模型 (FestivalRecord)
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)
class MediaItem {
final String id; // 媒体ID
final String type; // 媒体类型（photo/video）
final String path; // 媒体路径
final DateTime createdAt; // 创建时间
}
3.1.5 节日分布
3.2 页面结构设计
3.2.1 主页面布局
3.2.2 节日记录页结构
3.2.3 添加记录页结构
3.2.4 记录详情页结构
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 节日记录列表实现
class FestivalRecordListPage extends StatefulWidget {
State<FestivalRecordListPage> createState() => _FestivalRecordListPageState();
}
class _FestivalRecordListPageState extends State<FestivalRecordListPage> {
List<FestivalRecord> _records = [];
int _selectedYear = DateTime.now().year;
FestivalType? _selectedFestival;
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 添加记录实现
class AddRecordPage extends StatefulWidget {
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();
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 记录详情实现
class RecordDetailPage extends StatefulWidget {
final FestivalRecord record;
State<RecordDetailPage> createState() => _RecordDetailPageState();
}
class _RecordDetailPageState extends State<RecordDetailPage> {
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 时间轴实现
class TimelineItem extends StatelessWidget {
final FestivalRecord record;
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 媒体处理实现
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 后续版本规划
7.2 功能扩展建议
7.2.1 云存储同步
云存储功能：
- 记录自动备份到云端
- 多设备同步
- 数据安全保障
- 存储空间管理
7.2.2 智能分类
智能功能：
- 基于AI的内容分类
- 自动生成记录标签
- 智能搜索功能
- 推荐相关记录
7.2.3 节日提醒
提醒功能：
- 传统节日倒计时
- 记录提醒
- 节日习俗介绍
- 活动建议
八、注意事项
8.1 开发注意事项
-
媒体处理：大量媒体文件需注意内存管理
-
数据安全：个人记录需做好数据加密
-
性能优化：图片加载需优化，避免卡顿
-
权限管理：相机、存储权限需合理申请
-
兼容性：不同设备的屏幕适配
8.2 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 媒体上传失败 | 存储空间不足 | 提示用户清理空间 |
| 记录保存失败 | 网络问题 | 支持离线保存 |
| 图片加载缓慢 | 图片过大 | 实现图片压缩 |
| 分享失败 | 权限不足 | 引导用户开启权限 |
| 时间轴卡顿 | 数据量过大 | 分页加载数据 |
8.3 使用技巧
📅 节日记录使用技巧 📅
记录建议
- 每个节日至少记录一次
- 包含照片、视频、文字多种形式
- 记录详细的活动内容和感受
- 标注地点和参与人员
组织方法
- 按年份整理记录
- 按节日类型分类
- 创建节日主题相册
- 定期回顾和分享
媒体管理
- 拍摄高质量照片
- 录制精彩瞬间视频
- 及时备份重要媒体
- 合理使用存储空间
传承建议
- 记录传统习俗细节
- 分享节日文化知识
- 与家人共同参与记录
- 定期回顾美好回忆
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
| Web浏览器 | Chrome 90+ |
| 存储权限 | 读写权限 |
9.2 运行命令
# 查看可用设备
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 设计规范，以喜庆的红色为主色调，象征传统节日的喜庆氛围。通过本应用，希望能够帮助用户记录和传承家庭传统节日文化，让美好回忆得以永久保存。
家庭传统节日记录——传承节日文化，保存美好回忆
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
9
0- 0
已为社区贡献20条内容
所有评论(0)