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

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

黑白之间，万色归一 ⚫⚪

相关推荐
liulian09161 天前
Flutter for OpenHarmony 跨平台开发：BMI计算器功能实战指南
flutter·华为
jinanwuhuaguo1 天前
（第二十七篇）OpenClaw四月的演化风暴：OpenClaw 2026年4月全版本更新的文明级解读
大数据·人工智能·架构·kotlin·openclaw
我命由我123451 天前
Kotlin 开发 - lateinit 关键字
android·java·开发语言·kotlin·android studio·android-studio·android runtime
xmdy58661 天前
Flutter+开源鸿蒙实战｜智安盾电商溯源平台Day1 项目搭建与整体方案拆解
flutter·开源·harmonyos
nashane1 天前
HarmonyOS 6学习：应用签名文件丢失处理与更新完全指南
学习·华为·harmonyos·harmonyos 5
笔触狂放1 天前
【项目】基于ArkTS的老年人智能应用开发（1）
harmonyos·arkts·鸿蒙
小书房1 天前
Kotlin的by
android·开发语言·kotlin·委托·by
jinanwuhuaguo1 天前
（第二十八篇）OpenClaw成本与感知的奇点——从“Token封建制”到“全民养虾”的本体论地基
android·人工智能·kotlin·拓扑学·openclaw
24白菜头1 天前
【无标题】
c++·笔记·学习·harmonyos
LeesonWong1 天前
Neo 构建鸿蒙应用【二】：技术路线全解
harmonyos
热门推荐
01要裂开了！ChatGPT要手机号验证了？注册Codex要求验证电话号码怎么办？2026年登陆Codex要手机号验证的解决办法02GitHub 镜像站点03Codex 接入 DeepSeek API 完整配置文档04【AI】2026 年具身智能模型和世界模型总结05裂开！ChatGPT 居然开始要手机号验证，附详细解决方法06零基础教你claude code 接入 deepseek V4072026年AI前瞻：量子AI、具身智能与科学发现的新纪元08CC-Switch & Claude 基于 Linux 服务器安装使用指南09在Windows 11上安装Docker的踩坑记录10CVE-2026-31431 (Copy Fail) 漏洞复现与验证记录