Flutter 框架跨平台鸿蒙开发 - 儿童故事库

李李李勃谦2026-04-11 10:30

儿童故事库应用

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

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图



1.1 应用简介

儿童故事库是一款专为儿童设计的故事播放应用，提供丰富的儿童故事资源，包括童话故事、寓言故事、睡前故事、冒险故事、教育故事、传统故事等多种类型。应用以温馨的粉色为主色调，营造温馨可爱的氛围，陪伴孩子快乐成长。

应用涵盖首页、分类、收藏、设置四大模块。用户可以浏览推荐故事和热门故事，按类型和年龄筛选故事，收藏喜欢的故事，设置睡眠定时器，让孩子在温馨的故事中安然入睡。

1.2 核心功能

功能模块 功能描述 实现方式
故事播放 播放儿童故事 播放控制
故事分类 6种故事类型分类 枚举定义
年龄筛选 3个年龄段筛选 枚举定义
故事收藏 收藏喜欢的故事 状态管理
睡眠定时 定时关闭播放 计时器
故事详情 查看故事详细内容 底部弹窗

1.3 故事类型定义

序号 类型名称 Emoji 描述
1 童话故事 🏰 经典童话，充满想象
2 寓言故事 🦊 寓教于乐，启迪智慧
3 睡前故事 🌙 温馨故事，伴你入眠
4 冒险故事 ⚔️ 勇敢探索，刺激有趣
5 教育故事 📚 学习知识，快乐成长
6 传统故事 🎭 传统文化，代代相传

1.4 故事时长定义

序号 时长名称 Emoji 分钟数 描述
1 短篇 ⏱️ 5 5分钟以内
2 中篇 ⏰ 10 5-15分钟
3 长篇 ⏳ 20 15分钟以上

1.5 年龄段定义

序号 年龄段 Emoji 年龄范围 描述
1 幼儿 👶 0-3岁 简单易懂，色彩丰富
2 学龄前 👧 3-6岁 有趣生动，启蒙教育
3 学龄期 👦 6-12岁 知识性强，启发思维

1.6 技术栈

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

1.7 项目结构

复制代码 
lib/
└── main_children_stories.dart
    ├── ChildrenStoriesApp         # 应用入口
    ├── StoryCategory              # 故事类型枚举
    ├── StoryDuration              # 故事时长枚举
    ├── AgeGroup                   # 年龄段枚举
    ├── Story                      # 故事模型
    ├── ChildrenStoriesHomePage    # 主页面（底部导航）
    ├── _buildHomePage             # 首页
    ├── _buildCategoryPage         # 分类页
    ├── _buildFavoritesPage        # 收藏页
    ├── _buildSettingsPage         # 设置页
    ├── _playStory                 # 播放故事
    ├── _toggleFavorite            # 收藏故事
    └── _startSleepTimer           # 启动睡眠定时器

二、系统架构

2.1 整体架构图

Data Layer
Business Layer
Presentation Layer
主页面

ChildrenStoriesHomePage
首页
分类页
收藏页
设置页
正在播放
快速分类
推荐故事
热门故事
筛选条件
故事列表
收藏列表
睡眠定时器
播放设置
显示设置
故事管理器

StoryManager
播放管理器

PlayerManager
定时器管理器

TimerManager
Story

故事模型
StoryCategory

故事类型
AgeGroup

年龄段

2.2 类图设计

has
has
has
manages
ChildrenStoriesApp
+Widget build()
<<enumeration>>
StoryCategory
+String label
+String emoji
+String description
+fairyTale()
+fable()
+bedtime()
+adventure()
+educational()
+traditional()
<<enumeration>>
StoryDuration
+String label
+String emoji
+int minutes
+String description
+short()
+medium()
+long()
<<enumeration>>
AgeGroup
+String label
+String emoji
+String ageRange
+String description
+toddler()
+preschool()
+schoolAge()
Story
+String id
+String title
+String author
+StoryCategory category
+StoryDuration duration
+AgeGroup ageGroup
+String content
+String summary
+int playCount
+bool isFavorite
+String coverEmoji
+Story copyWith()
ChildrenStoriesHomePage
-int _currentIndex
-List<Story> _allStories
-List<Story> _favoriteStories
-Story _currentStory
-bool _isPlaying
-Timer _sleepTimer
-int _sleepMinutes
+void _playStory()
+void _toggleFavorite()
+void _startSleepTimer()
+void _showStoryDetail()

2.3 页面导航流程

首页
分类
收藏
设置
应用启动
首页
底部导航
浏览推荐故事
筛选故事
查看收藏
调整设置
点击故事
查看详情
播放故事
选择类型
选择年龄
查看列表
收藏列表
设置睡眠定时
设置播放选项

2.4 故事播放流程

定时器 播放器 首页 用户 定时器 播放器 首页 用户 点击故事 显示故事详情 点击播放 开始播放 显示播放状态 设置睡眠定时 启动定时器 倒计时 时间到 停止播放 显示已停止

三、核心模块设计

3.1 数据模型设计

3.1.1 故事类型枚举 (StoryCategory)
dart 复制代码 
enum StoryCategory {
  fairyTale(label: '童话故事', emoji: '🏰', description: '经典童话，充满想象'),
  fable(label: '寓言故事', emoji: '🦊', description: '寓教于乐，启迪智慧'),
  bedtime(label: '睡前故事', emoji: '🌙', description: '温馨故事，伴你入眠'),
  adventure(label: '冒险故事', emoji: '⚔️', description: '勇敢探索，刺激有趣'),
  educational(label: '教育故事', emoji: '📚', description: '学习知识，快乐成长'),
  traditional(label: '传统故事', emoji: '🎭', description: '传统文化，代代相传');

  final String label;
  final String emoji;
  final String description;

  const StoryCategory({
    required this.label,
    required this.emoji,
    required this.description,
  });
}
3.1.2 故事时长枚举 (StoryDuration)
dart 复制代码 
enum StoryDuration {
  short(label: '短篇', emoji: '⏱️', minutes: 5, description: '5分钟以内'),
  medium(label: '中篇', emoji: '⏰', minutes: 10, description: '5-15分钟'),
  long(label: '长篇', emoji: '⏳', minutes: 20, description: '15分钟以上');

  final String label;
  final String emoji;
  final int minutes;
  final String description;

  const StoryDuration({
    required this.label,
    required this.emoji,
    required this.minutes,
    required this.description,
  });
}
3.1.3 年龄段枚举 (AgeGroup)
dart 复制代码 
enum AgeGroup {
  toddler(label: '幼儿', emoji: '👶', ageRange: '0-3岁', description: '简单易懂，色彩丰富'),
  preschool(label: '学龄前', emoji: '👧', ageRange: '3-6岁', description: '有趣生动，启蒙教育'),
  schoolAge(label: '学龄期', emoji: '👦', ageRange: '6-12岁', description: '知识性强，启发思维');

  final String label;
  final String emoji;
  final String ageRange;
  final String description;

  const AgeGroup({
    required this.label,
    required this.emoji,
    required this.ageRange,
    required this.description,
  });
}
3.1.4 故事模型 (Story)
dart 复制代码 
class Story {
  final String id;              // 故事ID
  final String title;           // 故事标题
  final String author;          // 作者
  final StoryCategory category; // 故事类型
  final StoryDuration duration; // 故事时长
  final AgeGroup ageGroup;      // 适合年龄
  final String content;         // 故事内容
  final String summary;         // 故事简介
  final int playCount;          // 播放次数
  final bool isFavorite;        // 是否收藏
  final String coverEmoji;      // 封面Emoji

  Story({
    required this.id,
    required this.title,
    required this.author,
    required this.category,
    required this.duration,
    required this.ageGroup,
    required this.content,
    required this.summary,
    this.playCount = 0,
    this.isFavorite = false,
    this.coverEmoji = '📖',
  });

  Story copyWith({...});
}
3.1.5 故事类型分布

30% 25% 20% 10% 10% 5% 故事类型分布示例 童话故事 寓言故事 睡前故事 冒险故事 教育故事 传统故事

3.1.6 年龄段分布

45% 30% 25% 年龄段分布示例 幼儿 学龄前 学龄期

3.2 页面结构设计

3.2.1 主页面布局

ChildrenStoriesHomePage
IndexedStack
首页
分类页
收藏页
设置页
NavigationBar
首页 Tab
分类 Tab
收藏 Tab
设置 Tab

3.2.2 首页结构

首页
SliverAppBar
正在播放
快速分类
推荐故事
热门故事
故事信息
播放控制
睡眠定时
类型横向列表
故事卡片列表
按播放次数排序

3.2.3 分类页结构

分类页
SliverAppBar
筛选条件
故事列表
故事类型
适合年龄
故事卡片
故事数量统计

3.2.4 收藏页结构

是
否
收藏页
SliverAppBar
有收藏?
收藏列表
故事卡片
空状态提示
图标
提示文字

3.3 故事播放逻辑

是
否
点击播放
设置当前故事
更新播放状态
增加播放次数
正在播放?
显示暂停按钮
显示播放按钮
点击暂停
暂停播放
点击播放
继续播放
点击停止
清空当前故事
重置播放状态

3.4 睡眠定时器逻辑

否
是
选择定时时间
启动定时器
设置剩余时间
每秒更新
时间到?
剩余时间-1
更新进度条
停止播放
取消定时器
重置状态
取消定时

四、UI设计规范

4.1 配色方案

应用以温馨的粉色为主色调，营造温馨可爱的氛围：

颜色类型 色值 用途
主色 #E91E63 (Pink) 导航、主题元素
辅助色 #F06292 分类页面
第三色 #F48FB1 收藏页面
强调色 #F8BBD0 设置页面
背景色 #FAFAFA 页面背景
卡片背景 #FFFFFF 故事卡片

4.2 故事类型颜色

类型 色值 视觉效果
童话故事 #9C27B0 紫色
寓言故事 #FF9800 橙色
睡前故事 #3F51B5 靛蓝色
冒险故事 #F44336 红色
教育故事 #4CAF50 绿色
传统故事 #795548 棕色

4.3 字体规范

元素 字号 字重 颜色
页面标题 24px Bold 主色
故事标题 16px Bold #000000
故事简介 14px Regular #666666
标签文字 12px Regular 分类颜色
播放状态 12px Regular 白色

4.4 组件规范

4.4.1 正在播放卡片
复制代码 
┌─────────────────────────────────────┐
│  ┌──────┐  正在播放                  │
│  │  👧  │  小红帽                    │
│  │      │  格林兄弟                  │
│  └──────┘  ▶ ⏹                      │
│  睡眠定时: 25:30          [取消]    │
└─────────────────────────────────────┘
4.4.2 快速分类
复制代码 
┌─────────────────────────────────────┐
│  快速分类                            │
│                                     │
│  ┌────┐ ┌────┐ ┌────┐ ┌────┐      │
│  │ 🏰 │ │ 🦊 │ │ 🌙 │ │ ⚔️ │      │
│  │童话│ │寓言│ │睡前│ │冒险│      │
│  └────┘ └────┘ └────┘ └────┘      │
└─────────────────────────────────────┘
4.4.3 故事卡片
复制代码 
┌─────────────────────────────────────┐
│  ┌──────┐  小红帽                    │
│  │  👧  │  小红帽去看望外婆...       │
│  │      │  🏰 童话故事  ⏰ 中篇      │
│  └──────┘  ♡ ▶                       │
└─────────────────────────────────────┘
4.4.4 睡眠定时器
复制代码 
┌─────────────────────────────────────┐
│  🌙 睡眠定时器                       │
│                                     │
│  [15分钟] [30分钟] [45分钟] [60分钟]│
│                                     │
│  ████████░░░░░░░░  60%              │
│  剩余时间: 18:00                    │
└─────────────────────────────────────┘
4.4.5 故事详情弹窗
复制代码 
┌─────────────────────────────────────┐
│  小红帽                         ✕   │
│                                     │
│  ┌────────┐  作者: 格林兄弟         │
│  │   👧   │  🏰 童话故事            │
│  │        │  👧 3-6岁               │
│  └────────┘                          │
│                                     │
│  故事简介                            │
│  小红帽去看望外婆，路上遇到了...     │
│                                     │
│  故事内容                            │
│  从前有一个可爱的小女孩...           │
│                                     │
│  [▶ 播放故事]              ♡        │
└─────────────────────────────────────┘

五、核心功能实现

5.1 故事播放实现

dart 复制代码 
void _playStory(Story story) {
  setState(() {
    _currentStory = story;
    _isPlaying = true;
    
    final index = _allStories.indexWhere((s) => s.id == story.id);
    if (index != -1) {
      _allStories[index] = story.copyWith(playCount: story.playCount + 1);
    }
  });
}

void _pauseStory() {
  setState(() {
    _isPlaying = false;
  });
}

void _stopStory() {
  setState(() {
    _isPlaying = false;
    _currentStory = null;
  });
}

5.2 收藏功能实现

dart 复制代码 
void _toggleFavorite(Story story) {
  setState(() {
    final updatedStory = story.copyWith(isFavorite: !story.isFavorite);
    
    final index = _allStories.indexWhere((s) => s.id == story.id);
    if (index != -1) {
      _allStories[index] = updatedStory;
    }
    
    if (updatedStory.isFavorite) {
      _favoriteStories.add(updatedStory);
    } else {
      _favoriteStories.removeWhere((s) => s.id == story.id);
    }
    
    if (_currentStory?.id == story.id) {
      _currentStory = updatedStory;
    }
  });
}

5.3 睡眠定时器实现

dart 复制代码 
void _startSleepTimer(int minutes) {
  _sleepTimer?.cancel();
  
  setState(() {
    _sleepMinutes = minutes;
    _remainingSleepSeconds = minutes * 60;
  });

  _sleepTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
    setState(() {
      if (_remainingSleepSeconds > 0) {
        _remainingSleepSeconds--;
      } else {
        _stopStory();
        timer.cancel();
        _sleepMinutes = 0;
      }
    });
  });
}

void _cancelSleepTimer() {
  _sleepTimer?.cancel();
  setState(() {
    _sleepMinutes = 0;
    _remainingSleepSeconds = 0;
  });
}

5.4 故事筛选实现

dart 复制代码 
List<Story> _getFilteredStories() {
  List<Story> filtered = _allStories;
  
  if (_selectedCategory != null) {
    filtered = filtered.where((s) => s.category == _selectedCategory).toList();
  }
  
  if (_selectedAgeGroup != null) {
    filtered = filtered.where((s) => s.ageGroup == _selectedAgeGroup).toList();
  }
  
  return filtered;
}

5.5 故事详情展示

dart 复制代码 
void _showStoryDetail(Story story) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) {
      return DraggableScrollableSheet(
        initialChildSize: 0.7,
        minChildSize: 0.5,
        maxChildSize: 0.95,
        expand: false,
        builder: (context, scrollController) {
          return Container(
            padding: const EdgeInsets.all(20),
            child: Column(
              children: [
                // 故事标题和关闭按钮
                // 故事信息
                // 故事内容
                // 播放和收藏按钮
              ],
            ),
          );
        },
      );
    },
  );
}

六、交互设计

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 基础UI框架 故事播放功能 分类筛选功能 真实音频播放 更多故事内容 播放历史记录 故事下载功能 家长控制模式 云端同步 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 儿童故事库应用开发计划

7.2 功能扩展建议

7.2.1 真实音频播放

播放功能：

  • 集成音频播放器
  • 支持在线播放
  • 支持离线播放
  • 播放进度控制
7.2.2 故事下载

下载功能：

  • 批量下载故事
  • 下载进度显示
  • 离线播放支持
  • 存储空间管理
7.2.3 家长控制

控制功能：

  • 播放时长限制
  • 内容过滤
  • 使用时间统计
  • 家长密码保护
7.2.4 云端同步

同步功能：

  • 收藏同步
  • 播放历史同步
  • 多设备同步
  • 数据备份恢复

八、注意事项

8.1 开发注意事项

  1. 内容安全：确保故事内容适合儿童

  2. UI设计：界面要温馨可爱，符合儿童审美

  3. 操作简单：操作要简单直观，适合儿童使用

  4. 定时器管理：正确创建和销毁定时器

  5. 状态管理：收藏和播放状态需正确同步

8.2 常见问题

问题 原因 解决方案
播放状态不同步 状态更新错误 确保setState正确调用
收藏状态错误 列表未更新 同步更新所有列表
定时器不工作 Timer未正确创建 检查Timer初始化
筛选无结果 条件过严 提供默认选项
详情显示异常 数据缺失 添加默认值

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_children_stories.dart --web-port 8139

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

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

十、总结

儿童故事库应用通过首页、分类、收藏、设置四大模块，为孩子们提供了一个丰富的故事资源平台。应用支持6种故事类型、3个年龄段筛选，让家长可以根据孩子的年龄和兴趣选择合适的故事。

核心功能涵盖故事播放、分类筛选、故事收藏、睡眠定时四大模块。故事播放支持播放、暂停、停止控制；分类筛选支持按类型和年龄筛选；故事收藏方便孩子重复收听喜欢的故事；睡眠定时器帮助孩子在故事中安然入睡。

应用采用 Material Design 3 设计规范，以温馨的粉色为主色调，营造温馨可爱的氛围。通过本应用，希望能够陪伴孩子们快乐成长，在故事中学习知识，培养想象力。

儿童故事库------陪伴孩子快乐成长

相关推荐
2301_822703202 小时前
Flutter 框架跨平台鸿蒙开发 - 梦境场景重现应用
flutter·华为·信息可视化·开源·harmonyos·鸿蒙
空中海2 小时前
1.3 Dart 核心语言特性
flutter·dart
提子拌饭1332 小时前
浅灰计算器：鸿蒙的Flutter框架 实现的简洁计算器应用
flutter·华为·harmonyos·鸿蒙
枫叶丹42 小时前
【HarmonyOS 6.0】屏幕管理新特性：多屏坐标转换详解
开发语言·华为·harmonyos
提子拌饭1332 小时前
开源鸿蒙跨平台Flutter开发：AR厨艺教学应用
android·flutter·华为·开源·ar·harmonyos·鸿蒙
想你依然心痛2 小时前
HarmonyOS 5.0企业级开发实战：构建元服务驱动的智能协同办公套件
华为·harmonyos
2401_839633912 小时前
Flutter 框架跨平台鸿蒙开发 - 家庭食谱传承系统
flutter·华为·harmonyos
世人万千丶2 小时前
开源鸿蒙跨平台Flutter开发：步数统计应用
学习·flutter·华为·开源·harmonyos·鸿蒙
红目香薰2 小时前
Ascend C 算子：Sigmoid 函数原理深入解析与工程化构建及验证
c语言·开发语言·华为·华为云·昇腾·cann·modelarts
热门推荐
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 助手终于来了06VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）07Oh My Codex 快速使用指南08MySQL表约束详解：8大核心约束实战指南09CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南10UV安装并设置国内源