Flutter 框架跨平台鸿蒙开发 - 决策硬币

李李李勃谦2026-04-08 15:46

决策硬币应用

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

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图



1.1 应用简介

决策硬币应用是一款专注于帮助用户做出选择的心理学工具类应用，旨在通过抛硬币这一简单行为，帮助用户发现内心真正的想法。应用以金色为主色调，传递智慧、决策的品牌形象。

应用的核心理念是：当硬币在空中翻转时，用户内心会希望它落在某一边，这反映了他们真正的选择。通过这一心理学原理，帮助纠结中的用户找到内心的答案。

1.2 核心功能

功能模块 功能描述 实现方式
抛硬币 输入选项并抛硬币 动画+随机结果
内心询问 询问用户希望的结果 选择按钮
结果展示 展示用户的真实想法 洞察文字
决策历史 查看历史决策记录 列表展示
决策智慧 关于选择的人生哲理 卡片列表

1.3 决策流程

阶段 步骤 说明
1 输入选项 输入两个纠结的选项
2 抛硬币 观看硬币翻转动画
3 内心询问 选择希望硬币落在哪一边
4 结果展示 揭示内心真正的想法

1.4 技术栈

技术领域 技术选型 版本要求
开发框架 Flutter >= 3.0.0
编程语言 Dart >= 2.17.0
设计规范 Material Design 3 -
动画控制 AnimationController -
目标平台 鸿蒙OS / Web API 21+

1.5 项目结构

复制代码 
lib/
└── main_decision_coin.dart
    ├── DecisionCoinApp        # 应用入口
    ├── CoinSide               # 硬币面枚举
    ├── DecisionPhase          # 决策阶段枚举
    ├── DecisionRecord         # 决策记录模型
    ├── DecisionCoinHomePage   # 主页面
    └── _DecisionCoinHomePageState # 状态管理

二、系统架构

2.1 整体架构图

Data Layer
Business Logic Layer
Presentation Layer
主页面

DecisionCoinHomePage
决策页
历史页
智慧页
输入阶段
抛硬币阶段
询问阶段
结果阶段
历史列表
智慧卡片
硬币动画
随机算法
洞察生成
DecisionRecord

决策记录
insights

洞察语录

2.2 类图设计

manages
manages
uses
uses
references
DecisionCoinApp
+Widget build()
<<enumeration>>
CoinSide
heads
tails
+String label
+String option
<<enumeration>>
DecisionPhase
input
tossing
asking
result
history
DecisionRecord
+String id
+String optionA
+String optionB
+CoinSide? coinResult
+CoinSide? userHope
+String? insight
+DateTime createdAt
+String get timeAgo
DecisionCoinHomePage
+Widget build()
_DecisionCoinHomePageState
-int _currentIndex
-List<DecisionRecord> _history
-DecisionPhase _phase
-CoinSide? _coinResult
-CoinSide? _userHope
-AnimationController _coinController
-AnimationController _glowController
+void _startToss()
+void _selectHope()
+void _reset()
+String _generateInsight()

2.3 页面导航流程

决策
历史
智慧
再来一次
确定选择
应用启动
主页面
底部导航
决策页面
历史页面
智慧页面
输入选项
抛硬币动画
询问内心
展示结果
用户操作
返回首页

2.4 决策流程图

结果展示 询问阶段 抛硬币动画 输入阶段 用户 结果展示 询问阶段 抛硬币动画 输入阶段 用户 输入选项A和B 点击抛硬币 播放动画 显示硬币结果 询问希望哪一边 选择希望的结果 揭示内心想法 显示洞察文字

三、核心模块设计

3.1 数据模型设计

3.1.1 硬币面枚举 (CoinSide)
dart 复制代码 
enum CoinSide {
  heads('正面', 'A'),
  tails('反面', 'B');

  final String label;
  final String option;
}
3.1.2 决策阶段枚举 (DecisionPhase)
dart 复制代码 
enum DecisionPhase {
  input,    // 输入阶段
  tossing,  // 抛硬币阶段
  asking,   // 询问阶段
  result,   // 结果阶段
  history,  // 历史阶段
}
3.1.3 决策记录模型 (DecisionRecord)
dart 复制代码 
class DecisionRecord {
  final String id;              // 唯一标识
  final String optionA;         // 选项A
  final String optionB;         // 选项B
  final CoinSide? coinResult;   // 硬币结果
  final CoinSide? userHope;     // 用户希望
  final String? insight;        // 洞察文字
  final DateTime createdAt;     // 创建时间
}
3.1.4 决策阶段分布

开始
抛硬币
动画结束
选择希望
重置
确定
input
tossing
asking
result

3.2 页面结构设计

3.2.1 主页面布局

DecisionCoinHomePage
IndexedStack
决策页
历史页
智慧页
NavigationBar
决策 Tab
历史 Tab
智慧 Tab

3.2.2 决策页面结构

input
tossing
asking
result
决策页
头部区域
阶段内容
应用图标
标题描述
当前阶段
输入表单
硬币动画
询问卡片
结果展示
选项A输入框
选项B输入框
抛硬币按钮

3.2.3 硬币动画结构

硬币动画
旋转动画
缩放动画
位移动画
10圈旋转
弹跳缩放
上下浮动

3.3 心理学原理

希望正面
希望反面
无所谓
抛硬币决策法
硬币在空中翻转
用户内心反应
内心选择A
内心选择B
两个选项都可行
硬币只是工具
答案一直在心里

3.4 洞察生成机制

预设洞察语录库
随机选择
生成洞察
保存到记录
展示给用户

四、UI设计规范

4.1 配色方案

应用采用金色为主色调，传递智慧、决策的品牌形象：

颜色类型 色值 用途
主色 #FFD700 (Gold) 导航、强调元素
渐变起始 #FFD700 金色渐变
渐变结束 #FFA000 橙色渐变
正面颜色 #FFD700 硬币正面
反面颜色 #C0C0C0 硬币反面
成功色 #4CAF50 结果一致
提示色 #FF9800 结果不同

4.2 字体规范

元素 字号 字重 颜色
页面标题 28px Bold #FFA000
阶段标题 20px Bold #FFA000
选项文字 16px Medium #000000
洞察文字 14px Italic #424242
提示文字 12px Regular #9E9E9E

4.3 组件规范

4.3.1 硬币组件
复制代码 
        ┌─────────────────┐
       ╱                   ╲
      │                     │
     │      ┌─────────┐     │
     │      │         │     │
     │      │    ?    │     │  ← 翻转中
     │      │         │     │
     │      └─────────┘     │
      │                     │
       ╲                   ╱
        └─────────────────┘
        
        金色渐变 + 发光效果
4.3.2 选项输入框
复制代码 
┌─────────────────────────────────────────────────┐
│ ┌────┐  选项 A（正面）                           │
│ │ 正 │  ┌─────────────────────────────────────┐ │
│ └────┘  │ 输入你的选择...                      │ │
│         └─────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
4.3.3 结果展示卡片
复制代码 
┌─────────────────────────────────────────────────┐
│              ✓ 命运与心意一致！                  │
│                                                 │
│         你内心真正想要的是：                     │
│              [选项内容]                          │
│                                                 │
│  ✨ 在硬币落下的那一刻，你的心已经告诉你答案了   │
│                                                 │
│     [再来一次]           [确定选择]             │
└─────────────────────────────────────────────────┘

五、核心功能实现

5.1 硬币动画实现

dart 复制代码 
AnimatedBuilder(
  animation: _coinAnimation,
  builder: (context, child) {
    final value = _coinAnimation.value;
    final rotation = value * 10 * pi;      // 旋转10圈
    final scale = 1.0 + sin(value * pi * 4) * 0.2;  // 弹跳缩放
    final yOffset = sin(value * pi) * -100;  // 上下浮动

    return Transform.translate(
      offset: Offset(0, yOffset),
      child: Transform.scale(
        scale: scale,
        child: Transform.rotate(
          angle: rotation,
          child: _buildCoin(),
        ),
      ),
    );
  },
)

5.2 随机结果生成

dart 复制代码 
void _startToss() {
  setState(() {
    _phase = DecisionPhase.tossing;
    _coinResult = null;
    _userHope = null;
  });

  _coinController.reset();
  _coinController.forward().then((_) {
    setState(() {
      _coinResult = Random().nextBool() ? CoinSide.heads : CoinSide.tails;
      _phase = DecisionPhase.asking;
    });
  });
}

5.3 内心选择处理

dart 复制代码 
void _selectHope(CoinSide side) {
  setState(() {
    _userHope = side;
    _phase = DecisionPhase.result;
  });

  final insight = _generateInsight();
  final record = DecisionRecord(
    id: DateTime.now().millisecondsSinceEpoch.toString(),
    optionA: _optionAController.text.trim(),
    optionB: _optionBController.text.trim(),
    coinResult: _coinResult,
    userHope: side,
    insight: insight,
    createdAt: DateTime.now(),
  );

  setState(() {
    _history.insert(0, record);
  });
}

5.4 洞察生成实现

dart 复制代码 
final List<String> _insights = [
  '在硬币落下的那一刻，你的心已经告诉你答案了。',
  '当你希望硬币落在某一边时，那就是你内心真正的选择。',
  '犹豫不决时，抛硬币不是为了决定，而是为了看清自己的内心。',
  '硬币只是工具，答案一直在你心里。',
  // ...
];

String _generateInsight() {
  final random = Random();
  return _insights[random.nextInt(_insights.length)];
}

5.5 发光动画实现

dart 复制代码 
AnimatedBuilder(
  animation: _glowAnimation,
  builder: (context, child) {
    return Container(
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        boxShadow: [
          BoxShadow(
            color: color.withValues(alpha: _glowAnimation.value * 0.6),
            blurRadius: 20,
            spreadRadius: 5,
          ),
        ],
      ),
    );
  },
)

5.6 时间格式化实现

dart 复制代码 
String get timeAgo {
  final diff = DateTime.now().difference(createdAt);
  if (diff.inMinutes < 1) return '刚刚';
  if (diff.inMinutes < 60) return '${diff.inMinutes}分钟前';
  if (diff.inHours < 24) return '${diff.inHours}小时前';
  if (diff.inDays < 7) return '${diff.inDays}天前';
  return '${createdAt.month}月${createdAt.day}日';
}

六、交互设计

6.1 抛硬币交互流程

询问卡片 硬币动画 输入框 用户 询问卡片 硬币动画 输入框 用户 输入选项A 输入选项B 点击抛硬币 启动动画 旋转3秒 显示结果 询问内心选择

6.2 阶段切换流程

验证通过
验证失败
再来一次
确定选择
input阶段
点击抛硬币
tossing阶段
动画播放完成
asking阶段
用户选择
result阶段
用户操作
结束

6.3 结果判断逻辑

是
否
获取用户选择
硬币结果 == 用户希望?
命运与心意一致
绿色标识
显示check图标
听从你的内心
橙色标识
显示heart图标
展示用户希望的选择

七、扩展功能规划

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 抛硬币功能 心理询问 历史记录 更多硬币样式 分享功能 统计分析 多选项决策 AI建议 社交功能 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本 决策硬币应用开发计划

7.2 功能扩展建议

7.2.1 更多决策工具

决策方式扩展：

  • 骰子决策（多选项）
  • 转盘决策
  • 抽签决策
  • 随机数决策
7.2.2 统计分析

数据可视化：

  • 决策次数统计
  • 选择倾向分析
  • 时间分布图表
  • 心情标签
7.2.3 社交功能

分享与互动：

  • 分享决策结果
  • 匿名讨论
  • 决策投票
  • 好友建议

八、注意事项

8.1 开发注意事项

  1. 动画性能：硬币动画使用AnimatedBuilder避免重建

  2. 状态管理：使用DecisionPhase枚举管理阶段切换

  3. 随机算法：使用Random().nextBool()生成随机结果

  4. 洞察语录：预设多条语录随机选择

8.2 常见问题

问题 原因 解决方案
动画卡顿 动画时间过长 调整duration
状态混乱 阶段切换错误 检查_phase状态
结果不显示 数据未传递 检查_userHope赋值
历史丢失 未正确保存 检查_history操作

8.3 使用提示

🪙 决策硬币使用指南 🪙

输入选项：在输入框中填写两个让你纠结的选择。

抛硬币：点击按钮，观察硬币翻转动画。

倾听内心：在硬币落下时，注意你的第一反应。

选择希望：选择你希望硬币落在哪一边。

发现答案：你希望的那一边，就是你内心真正的选择。

九、运行说明

9.1 环境要求

环境 版本要求
Flutter SDK >= 3.0.0
Dart SDK >= 2.17.0
鸿蒙OS API 21+

9.2 运行命令

bash 复制代码 
# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_decision_coin.dart --web-port 8117

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

# 运行到Windows
flutter run -d windows -t lib/main_decision_coin.dart

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

十、总结

决策硬币应用通过心理学原理，为用户提供了一个发现内心真实想法的工具。应用的核心理念是：当硬币在空中翻转时，用户内心会希望它落在某一边，这反映了他们真正的选择。

核心功能涵盖抛硬币、内心询问、结果展示、历史记录、决策智慧五大模块。抛硬币通过精美的动画展示硬币翻转过程；内心询问让用户选择希望的结果；结果展示揭示用户内心真正的想法；历史记录保存所有决策过程；决策智慧提供关于选择的人生哲理。

应用采用Material Design 3设计规范，以金色为主色调，界面智慧优雅。通过本应用，希望能够帮助纠结中的用户找到内心的答案，做出真正属于自己的选择。

硬币只是工具，答案一直在你心里

相关推荐
2501_921930832 小时前
Flutter for OpenHarmony三方库适配实战：webview_flutter 网页视图
flutter
里欧跑得慢2 小时前
Flutter 导航路由：构建流畅的应用导航体验
前端·css·flutter·web
samroom2 小时前
【鸿蒙应用开发 Dev ECO Studio 5.0版本】从0到1！从无到有！最全！计算器------按钮动画、滑动退格、中缀表达式转后缀表达式、UI设计
数据结构·ui·华为·typescript·harmonyos·鸿蒙
李李李勃谦3 小时前
Flutter 框架跨平台鸿蒙开发 - 废话生成器
flutter·华为·harmonyos
2301_822703203 小时前
开源鸿蒙跨平台Flutter开发：非侵入式血压预估：基于 HRV 与脉搏波的建模与实现
flutter·开源·harmonyos
一直在想名4 小时前
Flutter 框架跨平台鸿蒙开发 - 胶片相机模拟
数码相机·flutter·华为·harmonyos
枫叶丹44 小时前
【HarmonyOS 6.0】ArkUI 弹出菜单的精准定位革命：深入解析 `anchorPosition` 属性
华为·harmonyos
想你依然心痛4 小时前
HarmonyOS 5.0运动健康APP开发实战：基于多传感器融合与AI教练的智能运动训练系统
人工智能·华为·harmonyos
2301_780356704 小时前
鸿蒙生态智慧医院专业品牌厂家-珠海全视通
华为·harmonyos
热门推荐
01GitHub 镜像站点02OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程03AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南04Qwen3.5-Omni与Qwen3.6模型全面解析（含测评/案例/使用教程）05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06Claude Code 未登录 使用第三方模型07Oh My Codex 快速使用指南08UV安装并设置国内源09【技术干货】Gemma 4 上手深度指南：本地多模态大模型的新基线10Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services