Flutter 框架跨平台鸿蒙开发 - 黑白屏

一直在想名2026-04-09 14:22

黑白屏应用

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

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 枚举

dart 复制代码 
enum ScreenMode {
  white('白屏', '⚪'),
  black('黑屏', '⚫');

  final String label;
  final String emoji;
}

3.2 Note 模型

dart 复制代码 
class Note {
  final String id;              // 笔记唯一标识
  String content;               // 笔记内容
  DateTime createdAt;           // 创建时间
  DateTime updatedAt;           // 更新时间
}

四、核心功能实现

4.1 纯屏切换

点击
点击
打开应用
显示白屏
点击屏幕
切换到黑屏
点击屏幕
切换到白屏

4.2 黑白切换实现

dart 复制代码 
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 计时器实现

dart 复制代码 
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 冥想呼吸动画

dart 复制代码 
_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 黑白切换动画

dart 复制代码 
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 文字颜色动画

dart 复制代码 
AnimatedDefaultTextStyle(
  duration: const Duration(milliseconds: 500),
  style: TextStyle(
    fontSize: 32,
    fontWeight: FontWeight.bold,
    color: textColor,
  ),
  child: Text(_screenMode.label),
)

6.3 呼吸脉冲动画

dart 复制代码 
_pulseController = AnimationController(
  vsync: this,
  duration: const Duration(milliseconds: 2000),
)..repeat(reverse: true);

// 脉冲效果：圆圈从小到大，再从大到小
width: 200 + (_pulseController.value * 20),
height: 200 + (_pulseController.value * 20),

七、运行与调试

7.1 运行命令

bash 复制代码 
# 运行到鸿蒙设备
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 冥想的科学

🧘 冥想的科学依据 🧘

研究表明，冥想可以：

  • 降低压力和焦虑
  • 改善注意力和专注力
  • 增强自我意识
  • 促进情绪稳定
  • 改善睡眠质量

呼吸冥想的好处：

  1. 4-7-8呼吸法 - 吸气4秒，屏息7秒，呼气8秒
  2. 箱式呼吸 - 吸气4秒，屏息4秒，呼气4秒，屏息4秒
  3. 正念呼吸 - 关注呼吸，觉察当下

十二、设计细节

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设计规范，代码结构清晰，易于维护和扩展。动画效果流畅自然，交互体验简洁直观。

在色彩斑斓的数字世界中，黑白屏应用提供了一个独特的视觉休息空间，让用户能够远离色彩的干扰，回归最纯粹、最原始的视觉感受。无论是用于视觉休息、专注工作、冥想放松还是极简记录，黑白屏应用都能为用户带来独特的体验。

黑白之间，万色归一 ⚫⚪

相关推荐
空中海1 小时前
2.6 表单与输入处理
flutter·dart
AI_零食1 小时前
开源鸿蒙跨平台Flutter开发：脑筋急转弯应用开发文档
flutter·华为·开源·harmonyos·鸿蒙
不爱吃糖的程序媛2 小时前
深入理解鸿蒙PC 三方库构建系统中的HPKCHECK文件
华为·harmonyos
alexhilton2 小时前
Jetpack Compose元球边缘效果
android·kotlin·android jetpack
2301_822703203 小时前
Flutter 框架跨平台鸿蒙开发 - 家庭时间胶囊应用
算法·flutter·华为·图形渲染·harmonyos·鸿蒙
提子拌饭1333 小时前
Flutter 框架跨平台鸿蒙开发 - 声音风景分享应用
flutter·华为·harmonyos·鸿蒙·风景
独特的螺狮粉3 小时前
开源鸿蒙跨平台Flutter开发：超市购物清单应用
flutter·华为·开源·harmonyos·鸿蒙
2301_822703203 小时前
成语小词典：鸿蒙Flutter实现的成语查询与管理应用
算法·flutter·华为·开源·图形渲染·harmonyos
2301_822703204 小时前
Flutter 框架跨平台鸿蒙开发 - 智能植物生长记录应用
算法·flutter·华为·harmonyos·鸿蒙
以太浮标4 小时前
华为eNSP模拟器综合实验之- DHCP、DNS、HTTP和FTP服务器配置案例Client-Server
linux·服务器·windows·http·华为·信息与通信
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05【STM32】HAL库 CubeMX 教程 --- 通用定时器 TIM2 定时06VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）07实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了08Oh My Codex 快速使用指南09CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南10MySQL表约束详解：8大核心约束实战指南