Flutter 框架跨平台鸿蒙开发 - 睡眠白噪音开发纪录
白噪音应用开发摘要 白噪音应用是一款基于Flutter开发的跨平台环境音效工具，专为现代人放松助眠和提升专注力设计。应用包含20种精选声音，分为自然、水声、城市和室内四大类，支持多音源混音播放和独立音量控制。核心功能包括： 分类声音库（GridView展示） 混音播放管理（同时播放多个音源） 定时关闭（15分钟-2小时可选） 收藏功能 响应式UI（Material Design 3风格） 技术架构
·
白噪音应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
白噪音是一款专注于放松助眠与专注工作的环境音应用，为用户提供丰富的自然声音和环境音效。在快节奏的现代生活中，良好的睡眠和专注力变得尤为重要。本应用通过模拟各种自然环境和城市声音，帮助用户放松身心、改善睡眠、提升专注力。
应用涵盖四大声音分类：自然、水声、城市、室内，共20种精选声音。支持多声音混音播放，用户可以根据个人喜好组合不同的声音，创造专属的环境氛围。定时关闭功能让用户安心入睡，音量独立调节实现精细控制。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 声音库 | 20种精选环境声音 | GridView展示 |
| 分类筛选 | 四大分类快速筛选 | FilterChip |
| 混音播放 | 多声音同时播放 | 状态管理 |
| 音量控制 | 每个声音独立音量 | Slider组件 |
| 定时关闭 | 预设时间自动停止 | Timer定时器 |
| 收藏功能 | 收藏喜欢的声音 | 本地状态 |
| 播放面板 | 当前播放声音管理 | ModalBottomSheet |
1.3 声音分类
| 分类 | 中文名称 | 包含声音 |
|---|---|---|
| nature | 自然 | 森林、鸟鸣、虫鸣、风声、篝火 |
| water | 水声 | 雨声、雷雨、海浪、溪流、瀑布 |
| urban | 城市 | 咖啡厅、火车、交通、飞机 |
| indoor | 室内 | 风扇、时钟、键盘、白噪音、粉噪音、棕噪音 |
1.4 定时选项
| 选项 | 时长 | 说明 |
|---|---|---|
| none | 无 | 不设置定时 |
| minutes15 | 15分钟 | 短暂休息 |
| minutes30 | 30分钟 | 午睡时长 |
| minutes60 | 1小时 | 标准睡眠周期 |
| minutes90 | 1.5小时 | 完整睡眠周期 |
| hours2 | 2小时 | 长时间助眠 |
1.5 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 目标平台 | 鸿蒙OS | API 21+ |
1.6 项目结构
lib/
└── main_white_noise.dart
├── WhiteNoiseApp # 应用入口
├── NoiseCategory # 声音分类枚举
├── TimerDuration # 定时时长枚举
├── NoiseSound # 声音数据模型
├── TimerOption # 定时选项模型
└── WhiteNoisePage # 主页面
├── _buildSoundsPage() # 声音列表页
├── _buildFavoritesPage() # 收藏列表页
├── _buildCategoryChips() # 分类筛选条
├── _buildSoundCard() # 声音卡片
├── _buildPlayingBar() # 播放状态栏
├── _showTimerPicker() # 定时选择弹窗
└── _showMixPanel() # 混音面板弹窗
二、系统架构
2.1 整体架构图
2.2 类图设计
2.3 数据流程图
2.4 定时器流程
三、核心模块设计
3.1 数据模型设计
3.1.1 声音分类枚举 (NoiseCategory)
enum NoiseCategory {
nature, // 自然
water, // 水声
urban, // 城市
indoor, // 室内
}
3.1.2 声音分类属性映射
| 分类 | 中文名称 | 包含声音数量 |
|---|---|---|
| nature | 自然 | 5种 |
| water | 水声 | 5种 |
| urban | 城市 | 4种 |
| indoor | 室内 | 6种 |
3.1.3 定时时长枚举 (TimerDuration)
enum TimerDuration {
none, // 无定时
minutes15, // 15分钟
minutes30, // 30分钟
minutes60, // 1小时
minutes90, // 1.5小时
hours2, // 2小时
}
3.1.4 声音模型 (NoiseSound)
class NoiseSound {
final String id; // 唯一标识
final String name; // 声音名称
final NoiseCategory category; // 声音分类
final String emoji; // 表情符号
final Color color; // 主题颜色
final String description; // 声音描述
double volume; // 音量 (0.0-1.0)
bool isPlaying; // 是否播放中
bool isFavorite; // 是否收藏
String get categoryName; // 分类中文名
}
3.1.5 定时选项模型 (TimerOption)
class TimerOption {
final TimerDuration duration; // 定时时长类型
final String label; // 显示标签
final int minutes; // 分钟数
}
3.2 混音管理
3.2.1 混音流程
3.2.2 混音实现
List<NoiseSound> get _playingSounds =>
_sounds.where((s) => s.isPlaying).toList();
void _toggleSound(NoiseSound sound) {
setState(() {
sound.isPlaying = !sound.isPlaying;
});
}
void _stopAll() {
setState(() {
for (var sound in _sounds) {
sound.isPlaying = false;
}
});
_cancelTimer();
}
3.3 定时器管理
3.3.1 定时器流程
3.3.2 定时器实现
void _setTimer(TimerOption option) {
setState(() {
_selectedTimer = option;
});
_cancelTimer();
if (option.minutes > 0) {
_remainingSeconds = option.minutes * 60;
_startCountdown();
}
}
void _startCountdown() {
_countdownTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
if (_remainingSeconds > 0) {
setState(() {
_remainingSeconds--;
});
} else {
_stopAll();
timer.cancel();
}
});
}
void _cancelTimer() {
_countdownTimer?.cancel();
_remainingSeconds = 0;
}
3.4 页面结构设计
3.4.1 主页面布局
3.5 状态管理
3.5.1 核心状态变量
class _WhiteNoisePageState extends State<WhiteNoisePage> {
final List<NoiseSound> _sounds = []; // 所有声音
final List<TimerOption> _timerOptions = []; // 定时选项
NoiseCategory? _selectedCategory; // 选中的分类筛选
TimerOption _selectedTimer = ...; // 选中的定时选项
Timer? _countdownTimer; // 倒计时定时器
int _remainingSeconds = 0; // 剩余秒数
bool _showFavoritesOnly = false; // 是否只显示收藏
int _currentIndex = 0; // 当前Tab索引
}
四、UI设计规范
4.1 配色方案
应用采用靛蓝色主题风格，体现宁静与放松的氛围：
| 颜色类型 | 色值 | 用途 |
|---|---|---|
| 主色 | Indigo | AppBar、按钮、强调 |
| 播放状态 | 各声音主题色 | 播放中声音标识 |
| 停止状态 | Red | 停止按钮 |
4.2 声音分类样式
4.2.1 声音卡片
┌─────────────────────────┐
│ ❤️ │
│ 🌧️ │
│ 雨声 │
│ 轻柔的雨滴声 │
│ │
│ 🔊 50% │ ← 播放中显示
│ ████████████░░░░░░░ │
└─────────────────────────┘
4.2.2 播放状态栏
┌─────────────────────────────────────────────────────────────┐
│ 🌧️ 🌊 🌲 +2 5个声音播放中 30分15秒 ⏱️ 🎛️ ⏹️ │
└─────────────────────────────────────────────────────────────┘
4.3 组件规范
4.3.1 分类筛选条
┌─────────────────────────────────────────────────────────────┐
│ [全部] [🌲自然] [💧水声] [🏙️城市] [🏠室内] │
└─────────────────────────────────────────────────────────────┘
4.3.2 混音面板
┌─────────────────────────────────────────────────────────────┐
│ ─────── │
│ 正在播放 [全部停止] │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 🌧️ 雨声 ⏹️ │ │
│ │ 轻柔的雨滴声 │ │
│ │ 🔈 ───────────────●────────────── 🔊 50% │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 🌊 海浪 ⏹️ │ │
│ │ 海浪拍打沙滩 │ │
│ │ 🔈 ─────────────────────●─────────── 🔊 70% │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
4.3.3 定时选择器
┌─────────────────────────────────────────────────────────────┐
│ 定时关闭 │
│ │
│ [无定时] [15分钟] [30分钟] [1小时] [1.5小时] [2小时] │
└─────────────────────────────────────────────────────────────┘
4.4 交互设计
4.4.1 操作方式
| 操作 | 手势 | 效果 |
|---|---|---|
| 播放/停止 | 点击声音卡片 | 切换播放状态 |
| 收藏 | 点击心形图标 | 切换收藏状态 |
| 调节音量 | 拖动滑块 | 调整音量值 |
| 设置定时 | 点击定时按钮 | 弹出定时选项 |
| 混音控制 | 点击混音按钮 | 弹出混音面板 |
| 停止全部 | 点击停止按钮 | 停止所有声音 |
五、核心功能实现
5.1 主页面构建
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('白噪音'),
actions: [
IconButton(
icon: Icon(_showFavoritesOnly ? Icons.favorite : Icons.favorite_border),
onPressed: () {
setState(() {
_showFavoritesOnly = !_showFavoritesOnly;
});
},
),
PopupMenuButton<NoiseCategory?>(
icon: const Icon(Icons.filter_list),
onSelected: (value) {
setState(() {
_selectedCategory = value;
});
},
itemBuilder: (context) => [
const PopupMenuItem(value: null, child: Text('全部分类')),
// ...分类选项
],
),
],
),
body: _currentIndex == 0 ? _buildSoundsPage() : _buildFavoritesPage(),
bottomNavigationBar: Column(
children: [
if (_playingSounds.isNotEmpty) _buildPlayingBar(),
BottomNavigationBar(...),
],
),
);
}
5.2 声音卡片
Widget _buildSoundCard(NoiseSound sound) {
return Card(
elevation: sound.isPlaying ? 4 : 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: BorderSide(
color: sound.isPlaying ? sound.color : Colors.transparent,
width: 2,
),
),
child: InkWell(
onTap: () => _toggleSound(sound),
child: Stack(
children: [
// 声音图标、名称、描述
// 收藏按钮
// 播放中的音量指示器
],
),
),
);
}
5.3 播放状态栏
Widget _buildPlayingBar() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: Colors.indigo.withValues(alpha: 0.1),
),
child: Row(
children: [
// 播放声音图标
// 播放数量
// 定时显示
// 控制按钮（定时、混音、停止）
],
),
);
}
5.4 混音面板
void _showMixPanel() {
showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) {
return DraggableScrollableSheet(
initialChildSize: 0.6,
builder: (context, scrollController) {
final playingSounds = _sounds.where((s) => s.isPlaying).toList();
return SingleChildScrollView(
controller: scrollController,
child: Column(
children: [
// 播放列表
// 每个声音的音量滑块
],
),
);
},
);
},
);
}
5.5 定时选择器
void _showTimerPicker() {
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
padding: const EdgeInsets.all(20),
child: Column(
children: [
const Text('定时关闭', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
Wrap(
spacing: 12,
runSpacing: 12,
children: _timerOptions.map((option) {
return ChoiceChip(
label: Text(option.label),
selected: _selectedTimer.duration == option.duration,
onSelected: (selected) {
Navigator.pop(context);
_setTimer(option);
},
);
}).toList(),
),
],
),
);
},
);
}
六、白噪音知识拓展
6.1 声音类型与功效
6.2 白噪音科学原理
| 声音类型 | 频率特点 | 主要功效 |
|---|---|---|
| 白噪音 | 均匀分布各频率 | 屏蔽环境噪音、助眠 |
| 粉噪音 | 低频增强 | 深度放松、改善睡眠 |
| 棕噪音 | 低频更强 | 缓解焦虑、平静心情 |
| 自然声 | 不规则变化 | 心理放松、压力释放 |
6.3 使用场景推荐
6.4 声音组合建议
| 场景 | 推荐组合 | 音量建议 |
|---|---|---|
| 深度睡眠 | 雨声 + 雷雨 + 风声 | 中等偏低 |
| 午休小憩 | 海浪 + 海鸥 | 中等 |
| 专注工作 | 咖啡厅 + 键盘 | 中等偏高 |
| 冥想放松 | 森林 + 溪流 + 鸟鸣 | 偏低 |
| 阅读时光 | 篝火 + 雨声 | 中等 |
七、扩展功能规划
7.1 后续版本规划
7.2 功能扩展建议
7.2.1 音频播放
| 功能 | 说明 |
|---|---|
| 真实音频 | 集成音频播放插件 |
| 循环播放 | 无缝循环播放音频 |
| 音频下载 | 支持离线播放 |
7.2.2 场景预设
| 功能 | 说明 |
|---|---|
| 预设场景 | 睡眠、工作、冥想等预设 |
| 自定义场景 | 用户创建专属场景 |
| 场景分享 | 分享场景配置 |
7.2.3 数据分析
| 功能 | 说明 |
|---|---|
| 使用统计 | 记录使用时长和频率 |
| 睡眠分析 | 分析睡眠模式 |
| 效果评估 | 评估助眠效果 |
八、注意事项
8.1 开发注意事项
-
颜色处理：使用
withValues(alpha:)替代已废弃的withOpacity() -
定时器管理：页面销毁时必须取消定时器
-
状态同步：混音面板使用StatefulBuilder保持状态同步
-
内存管理：大量声音对象注意内存占用
8.2 用户体验优化
💡 用户体验建议 💡
- 声音分类清晰明了
- 播放状态一目了然
- 混音操作简单直观
- 定时功能便捷实用
8.3 常见问题
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 声音无法播放 | 播放状态未更新 | 检查isPlaying状态 |
| 定时不生效 | 定时器未启动 | 检查_startCountdown |
| 混音面板不更新 | 状态未同步 | 使用StatefulBuilder |
| 内存泄漏 | 定时器未取消 | dispose中取消定时器 |
九、运行说明
9.1 环境要求
| 环境 | 版本要求 |
|---|---|
| Flutter SDK | >= 3.0.0 |
| Dart SDK | >= 2.17.0 |
| 鸿蒙OS | API 21+ |
9.2 运行命令
# 查看可用设备
flutter devices
# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_white_noise.dart
# 运行到Windows
flutter run -d windows -t lib/main_white_noise.dart
# 代码分析
flutter analyze lib/main_white_noise.dart
十、总结
白噪音应用通过丰富的环境声音库，帮助用户放松身心、改善睡眠、提升专注力。应用涵盖四大声音分类共20种精选声音，支持多声音混音播放，用户可以根据个人喜好组合不同的声音，创造专属的环境氛围。
混音功能允许同时播放多种声音，每个声音独立音量控制，实现精细化的声音调节。定时关闭功能提供多种预设时长，帮助用户安心入睡。收藏功能让用户快速访问喜欢的声音。播放状态栏实时显示当前播放状态和剩余时间，操作便捷直观。
界面设计采用靛蓝色主题风格，体现宁静与放松的氛围。声音卡片采用网格布局，播放状态通过边框颜色和进度条直观展示。应用采用Material Design 3设计规范，遵循Flutter最佳实践，代码结构清晰，易于维护和扩展。
聆听自然之声，享受宁静时光！
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
2
0- 0
已为社区贡献5条内容
所有评论(0)