Flutter 框架跨平台鸿蒙开发 - 黑白屏
·
黑白屏应用
欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net
一、项目概述
运行效果图
1.1 应用简介
黑白屏是一款极简主义应用，核心理念是"只有黑白两色，回归最原始的视觉"。在这个色彩斑斓的数字世界中，黑白屏应用提供了一种独特的视觉体验，让用户能够远离色彩的干扰，回归最纯粹、最原始的视觉感受。
应用采用纯粹的黑白配色方案，没有任何彩色元素，创造出一种极简、宁静、专注的氛围。通过纯屏切换、极简笔记、专注计时、冥想模式四大功能，帮助用户在喧嚣的数字世界中找到一片宁静的空间。
1.2 核心功能
| 功能模块 | 功能描述 | 实现方式 |
|---|---|---|
| 纯屏切换 | 黑屏/白屏一键切换 | 手势识别+状态管理 |
| 极简笔记 | 纯文字笔记记录 | 文本输入+列表展示 |
| 专注计时 | 黑白倒计时器 | Timer+动画效果 |
| 冥想模式 | 呼吸引导冥想 | 动画控制器+节奏引导 |
1.3 设计理念
┌─────────────────────────────────────────────────────────┐
│ 黑白屏设计理念 │
├─────────────────────────────────────────────────────────┤
│ │
│ ⚪ 极简主义 │
│ 去除一切不必要的装饰，回归本质 │
│ │
│ ⚫ 专注纯粹 │
│ 没有色彩的干扰，让注意力更集中 │
│ │
│ ⚪ 视觉休息 │
│ 在彩色世界中，给眼睛一个休息的空间 │
│ │
│ ⚫ 内心平静 │
│ 黑白的宁静，带来内心的平和 │
│ │
└─────────────────────────────────────────────────────────┘
1.4 技术栈
| 技术领域 | 技术选型 | 版本要求 |
|---|---|---|
| 开发框架 | Flutter | >= 3.0.0 |
| 编程语言 | Dart | >= 2.17.0 |
| 设计规范 | Material Design 3 | - |
| 状态管理 | setState | - |
| 动画控制 | AnimationController | - |
| 目标平台 | 鸿蒙OS / Web | API 21+ |
二、项目结构
lib/
├── main_black_white.dart # 应用主入口
│ ├── BlackWhiteApp # 根应用组件
│ ├── ScreenMode # 屏幕模式枚举
│ ├── Note # 笔记模型
│ └── BlackWhiteHomePage # 主页面
三、数据模型
3.1 ScreenMode 枚举
enum ScreenMode {
white('白屏', '⚪'),
black('黑屏', '⚫');
final String label;
final String emoji;
}
3.2 Note 模型
class Note {
final String id; // 笔记唯一标识
String content; // 笔记内容
DateTime createdAt; // 创建时间
DateTime updatedAt; // 更新时间
}
四、核心功能实现
4.1 纯屏切换
4.2 黑白切换实现
void _toggleScreenMode() {
setState(() {
_isBlackMode = !_isBlackMode;
_screenMode = _isBlackMode ? ScreenMode.black : ScreenMode.white;
});
}
Widget _buildPureScreen(Color textColor, Color bgColor) {
return GestureDetector(
onTap: _toggleScreenMode,
child: Container(
color: bgColor,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
color: textColor,
shape: BoxShape.circle,
),
child: Text(_screenMode.emoji),
),
Text(_screenMode.label),
],
),
),
),
);
}
4.3 专注计时器
4.4 计时器实现
void _startTimer() {
if (_isTimerRunning) {
_timer?.cancel();
setState(() {
_isTimerRunning = false;
});
} else {
setState(() {
_isTimerRunning = true;
_timerSeconds = _targetMinutes * 60;
});
_timer = Timer.periodic(const Duration(seconds: 1), (timer) {
setState(() {
if (_timerSeconds > 0) {
_timerSeconds--;
} else {
_timer?.cancel();
_isTimerRunning = false;
}
});
});
}
}
String _formatTime(int seconds) {
final minutes = seconds ~/ 60;
final secs = seconds % 60;
return '${minutes.toString().padLeft(2, '0')}:${secs.toString().padLeft(2, '0')}';
}
4.5 冥想呼吸动画
_pulseController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 2000),
)..repeat(reverse: true);
AnimatedBuilder(
animation: _pulseController,
builder: (context, child) {
return Container(
width: 200 + (_pulseController.value * 20),
height: 200 + (_pulseController.value * 20),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: textColor.withValues(alpha: 0.3 + (_pulseController.value * 0.2)),
width: 1,
),
),
);
},
)
五、界面设计
5.1 纯屏页面
┌─────────────────────────────────────┐
│ │
│ │
│ │
│ │
│ ⚪ │
│ 白屏 │
│ │
│ 点击屏幕切换 │
│ │
│ │
│ │
│ │
│ │
└─────────────────────────────────────┘
⬇️ 点击切换
┌─────────────────────────────────────┐
│ │
│ │
│ │
│ │
│ ⚫ │
│ 黑屏 │
│ │
│ 点击屏幕切换 │
│ │
│ │
│ │
│ │
│ │
└─────────────────────────────────────┘
5.2 极简笔记页面
┌─────────────────────────────────────┐
│ 极简笔记 [+] │
├─────────────────────────────────────┤
│ ┌─────────────────────────────┐ │
│ │ 极简主义，回归本质 │ │
│ │ │ │
│ │ 昨天 │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 黑白之间，万色归一 │ │
│ │ │ │
│ │ 2天前 │ │
│ └─────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ 专注当下，享受纯粹 │ │
│ │ │ │
│ │ 3天前 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────┘
5.3 专注计时页面
┌─────────────────────────────────────┐
│ │
│ 专注计时 │
│ │
│ │
│ ┌─────────┐ │
│ │ │ │
│ │ 25:00 │ │
│ │ │ │
│ └─────────┘ │
│ │
│ [5] [15] [25] [45] [60] │
│ │
│ ▶️ 🔄 │
│ │
│ │
└─────────────────────────────────────┘
5.4 冥想模式页面
┌─────────────────────────────────────┐
│ │
│ 冥想模式 │
│ │
│ │
│ ╭───────╮ │
│ ╱ ╲ │
│ │ ╭───╮ │ │
│ │ │ ● │ │ │
│ │ ╰───╯ │ │
│ ╲ ╱ │
│ ╰───────╯ │
│ │
│ 呼吸 │
│ │
│ 吸气 4秒 · 屏息 4秒 · 呼气 4秒 │
│ │
└─────────────────────────────────────┘
六、动画效果
6.1 黑白切换动画
AnimatedContainer(
duration: const Duration(milliseconds: 500),
width: 150,
height: 150,
decoration: BoxDecoration(
color: textColor,
shape: BoxShape.circle,
),
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: Text(
_screenMode.emoji,
key: ValueKey(_screenMode),
style: const TextStyle(fontSize: 60),
),
),
)
6.2 文字颜色动画
AnimatedDefaultTextStyle(
duration: const Duration(milliseconds: 500),
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: textColor,
),
child: Text(_screenMode.label),
)
6.3 呼吸脉冲动画
_pulseController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 2000),
)..repeat(reverse: true);
// 脉冲效果：圆圈从小到大，再从大到小
width: 200 + (_pulseController.value * 20),
height: 200 + (_pulseController.value * 20),
七、运行与调试
7.1 运行命令
# 运行到鸿蒙设备
flutter run -d harmony lib/main_black_white.dart
# 运行到Web服务器
flutter run -d web-server -t lib/main_black_white.dart --web-port 8122
# 运行到Windows
flutter run -d windows -t lib/main_black_white.dart
# 代码分析
flutter analyze lib/main_black_white.dart
7.2 功能测试清单
| 测试项 | 测试内容 | 预期结果 |
|---|---|---|
| 纯屏切换 | 点击屏幕切换黑白 | 平滑切换动画 |
| 笔记添加 | 创建新笔记 | 笔记显示在列表 |
| 计时器 | 开始/暂停/重置 | 正确计时 |
| 时间选择 | 选择不同时长 | 正确设置时间 |
| 冥想动画 | 观察呼吸动画 | 脉冲效果流畅 |
| 导航切换 | 切换不同页面 | 页面正确切换 |
八、扩展方向
8.1 功能扩展计划
| 版本 | 功能 | 描述 |
|---|---|---|
| v1.1 | 黑白滤镜 | 将照片转换为黑白 |
| v1.2 | 黑白画板 | 纯黑白绘画工具 |
| v1.3 | 黑白主题 | 更多黑白主题选择 |
| v1.4 | 数据统计 | 记录使用时长和频率 |
| v1.5 | 社区分享 | 分享黑白艺术作品 |
8.2 高级功能
九、使用场景
9.1 典型使用场景
⚫ 黑白屏使用场景 ⚪
| 场景 | 描述 | 功能使用 |
|---|---|---|
| 视觉休息 | 长时间看彩色屏幕后休息 | 纯屏模式 |
| 专注工作 | 需要高度集中注意力 | 专注计时 |
| 冥想放松 | 进行冥想练习 | 冥想模式 |
| 极简记录 | 记录重要想法 | 极简笔记 |
| 夜间使用 | 夜间使用手机减少刺激 | 黑屏模式 |
9.2 使用建议
┌─────────────────────────────────────────────────────────┐
│ 黑白屏使用建议 │
├─────────────────────────────────────────────────────────┤
│ │
│ 🌙 夜间模式 │
│ 睡前使用黑屏模式，减少蓝光刺激 │
│ │
│ ⏰ 专注时间 │
│ 使用计时器进行番茄工作法，提高效率 │
│ │
│ 🧘 冥想练习 │
│ 每天花10分钟进行冥想，放松身心 │
│ │
│ 📝 极简记录 │
│ 用最少的文字记录最重要的想法 │
│ │
│ 👁️ 视觉休息 │
│ 每隔1小时切换到黑白屏，让眼睛休息 │
│ │
└─────────────────────────────────────────────────────────┘
十、极简主义哲学
10.1 极简主义原则
| 原则 | 说明 | 应用体现 |
|---|---|---|
| 少即是多 | 用最少的元素表达最多的内容 | 纯黑白配色 |
| 去除冗余 | 删除一切不必要的装饰 | 无图标、无渐变 |
| 功能优先 | 功能决定形式 | 直观的操作方式 |
| 留白之美 | 空白也是设计的一部分 | 大量留白空间 |
| 专注本质 | 关注核心价值 | 核心功能突出 |
10.2 黑白美学
⚪⚫ 黑白美学 ⚫⚪
黑与白，是最纯粹的颜色
- 黑 - 代表深邃、神秘、力量
- 白 - 代表纯净、简洁、希望
- 黑白之间 - 无限的可能性
在黑白世界中：
- 没有色彩的干扰，注意力更集中
- 形式更加纯粹，美感更加突出
- 对比更加强烈，视觉更加清晰
- 情感更加纯粹，体验更加深刻
十一、心理学意义
11.1 视觉心理学
| 方面 | 说明 | 效果 |
|---|---|---|
| 视觉疲劳 | 减少色彩刺激 | 降低视觉疲劳 |
| 注意力 | 去除色彩干扰 | 提高专注度 |
| 情绪影响 | 黑白的平静 | 减少情绪波动 |
| 认知负荷 | 简化视觉信息 | 降低认知负担 |
11.2 冥想的科学
🧘 冥想的科学依据 🧘
研究表明，冥想可以：
- 降低压力和焦虑
- 改善注意力和专注力
- 增强自我意识
- 促进情绪稳定
- 改善睡眠质量
呼吸冥想的好处：
- 4-7-8呼吸法 - 吸气4秒，屏息7秒，呼气8秒
- 箱式呼吸 - 吸气4秒，屏息4秒，呼气4秒，屏息4秒
- 正念呼吸 - 关注呼吸，觉察当下
十二、设计细节
12.1 配色方案
┌─────────────────────────────────────┐
│ 黑白配色方案 │
├─────────────────────────────────────┤
│ │
│ ⚪ 白色 #FFFFFF │
│ • 背景（白屏模式） │
│ • 文字（黑屏模式） │
│ • 图形元素 │
│ │
│ ⚫ 黑色 #000000 │
│ • 背景（黑屏模式） │
│ • 文字（白屏模式） │
│ • 图形元素 │
│ │
│ ⚪ 灰色层次 │
│ • #000000 100% 黑色 │
│ • #333333 80% 深灰 │
│ • #666666 60% 中灰 │
│ • #999999 40% 浅灰 │
│ • #CCCCCC 20% 淡灰 │
│ • #FFFFFF 0% 白色 │
│ │
└─────────────────────────────────────┘
12.2 字体规范
| 元素 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 标题 | 24px | Bold | 黑/白 |
| 正文 | 16px | Regular | 黑/白 |
| 辅助文字 | 12-14px | Regular | 灰色 |
| 数字 | 56px | Light | 黑/白 |
12.3 间距规范
| 元素 | 间距 |
|---|---|
| 页面边距 | 20px |
| 卡片内边距 | 16px |
| 元素间距 | 12px |
| 底部导航高度 | 56px |
十三、总结
黑白屏应用通过"只有黑白两色，回归最原始的视觉"的核心理念，为用户提供了一个独特的数字体验空间。应用采用纯粹的黑白配色，没有任何彩色元素，创造出极简、宁静、专注的氛围。
应用涵盖纯屏切换、极简笔记、专注计时、冥想模式四大核心功能。纯屏切换让用户能够在黑白之间自由切换，给眼睛一个休息的空间；极简笔记用最少的文字记录最重要的想法；专注计时帮助用户进行番茄工作法，提高工作效率；冥想模式通过呼吸引导，帮助用户放松身心。
设计上，应用遵循极简主义原则，去除一切不必要的装饰，只保留最核心的功能和最纯粹的形式。大量的留白、简洁的线条、纯粹的黑白对比，创造出一种独特的美学体验。
技术上，应用采用Flutter框架开发，使用Material Design 3设计规范，代码结构清晰，易于维护和扩展。动画效果流畅自然，交互体验简洁直观。
在色彩斑斓的数字世界中，黑白屏应用提供了一个独特的视觉休息空间，让用户能够远离色彩的干扰，回归最纯粹、最原始的视觉感受。无论是用于视觉休息、专注工作、冥想放松还是极简记录，黑白屏应用都能为用户带来独特的体验。
黑白之间，万色归一 ⚫⚪
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
10
0- 0
已为社区贡献29条内容
所有评论(0)