Flutter 框架跨平台鸿蒙开发 - 星空日记

星空日记应用

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

https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

星空日记是一款专为天文爱好者设计的观星记录应用,旨在帮助用户记录每晚观测到的星星、星座和天文现象,并逐步建立属于自己的个人星座图。应用以深邃的夜空蓝为主色调,营造宁静浪漫的观星氛围。

用户可以记录观测时间、地点、天气状况,标记看到的星星和星座,添加观测笔记和照片,应用会自动生成个人星座图,展示用户的观星历程和成就。无论是初学者还是资深天文爱好者,都能在这片数字星空中找到属于自己的星辰大海。

1.2 核心理念

仰望星空是人类最古老的浪漫。星空日记的设计理念基于以下原则:

设计原则	理论基础	应用体现
观测记录	天文观测学	详细记录观测数据
星图构建	星座学原理	建立个人星座图
成就激励	游戏化设计	解锁星座徽章
社区分享	社交学习	分享观测心得

1.3 核心功能

星空日记
核心功能
观测记录
时间地点
天气状况
星星标记
笔记照片
星座图
个人星图
星座连线
观测统计
成就展示
星座百科
星座介绍
观测指南
最佳时间
辅助功能
天气查询
提醒通知
社区分享
数据导出

1.4 星座分类

应用包含88个现代星座,按季节分类:

季节	星座数量	代表星座	最佳观测时间
春季	12	狮子座、室女座、大熊座	3-5月
夏季	16	天蝎座、人马座、天琴座	6-8月
秋季	15	飞马座、仙女座、英仙座	9-11月
冬季	14	猎户座、双子座、金牛座	12-2月
北天	18	小熊座、仙后座、天龙座	全年可见
南天	13	南十字座、半人马座	南半球

1.5 技术栈

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

1.6 项目结构

复制代码

lib/
└── main_star_diary.dart
    ├── StarDiaryApp              # 应用入口
    ├── Constellation             # 星座枚举
    ├── StarObservation           # 观测记录模型
    ├── Star                      # 星星模型
    ├── StarDiaryHomePage         # 主页面(底部导航)
    ├── _buildDiaryPage           # 日记页面
    ├── _buildStarMapPage         # 星图页面
    ├── _buildConstellationPage   # 星座页面
    └── _buildSettingsPage        # 设置页面

二、系统架构

2.1 整体架构图

Data Layer
Presentation Layer
主页面

StarDiaryHomePage
日记页
星图页
星座页
设置页
记录表单
观测列表
详情查看
个人星图
星座连线
统计图表
星座列表
星座详情
Constellation

星座枚举
StarObservation

观测记录模型
Star

星星模型
Weather

天气模型

2.2 类图设计

manages
tracks
contains
contains
StarDiaryApp
+Widget build()
<<enumeration>>
Constellation
+String name
+String latinName
+String symbol
+String season
+String description
+List<String> stars
+String mythology
+orion()
+ursaMajor()
+scorpius()
+leo()
Star
+String id
+String name
+String constellation
+double magnitude
+double rightAscension
+double declination
+String color
+bool observed
+DateTime? observedAt
StarObservation
+String id
+DateTime observedAt
+String location
+String weather
+int temperature
+List<String> stars
+List<String> constellations
+String notes
+List<String> photos
+int rating
StarDiaryHomePage
-int _selectedIndex
-List<StarObservation> _observations
-Map<String, int> _constellationCounts
-Set<String> _observedStars
+Widget build()
-_addObservation()
-_getConstellationProgress()

2.3 页面导航流程

日记
星图
星座
设置
应用启动
日记页面
底部导航
观测记录列表
个人星图
星座百科
设置页面
添加观测
填写表单
标记星星
保存记录
查看星座连线
查看统计
浏览星座
查看详情

2.4 观测记录流程

数据库星图表单日记页用户数据库星图表单日记页用户点击添加观测显示表单输入时间地点选择天气标记星星添加笔记照片保存记录更新星图显示新星星

三、核心模块设计

3.1 数据模型设计

3.1.1 星座枚举 (Constellation)

dart 复制代码

enum Constellation {
  orion('猎户座', 'Orion', '🏹', '冬季', 
    '冬季最显眼的星座,包含参宿四和参宿七',
    ['参宿四', '参宿七', '参宿一', '参宿二', '参宿三']),
  ursaMajor('大熊座', 'Ursa Major', '🐻', '春季',
    '北斗七星所在的星座,全年可见',
    ['天枢', '天璇', '天玑', '天权', '玉衡', '开阳', '摇光']),
  scorpius('天蝎座', 'Scorpius', '🦂', '夏季',
    '夏季南方天空的明亮星座',
    ['心宿二', '房宿四', '尾宿八']),
  leo('狮子座', 'Leo', '🦁', '春季',
    '春季星空的标志性星座',
    ['轩辕十四', '五帝座一', '轩辕十二']);

  final String name;
  final String latinName;
  final String symbol;
  final String season;
  final String description;
  final List<String> stars;
}

3.1.2 星星模型 (Star)

dart 复制代码

class Star {
  final String id;              // 唯一标识
  final String name;            // 星名
  final String constellation;   // 所属星座
  final double magnitude;       // 星等(亮度)
  final double rightAscension;  // 赤经
  final double declination;     // 赤纬
  final String color;           // 颜色
  bool observed;                // 是否观测过
  DateTime? observedAt;         // 观测时间
}

3.1.3 观测记录模型 (StarObservation)

dart 复制代码

class StarObservation {
  final String id;              // 唯一标识
  final DateTime observedAt;    // 观测时间
  final String location;        // 观测地点
  final String weather;         // 天气状况
  final int temperature;        // 温度
  final List<String> stars;     // 观测到的星星
  final List<String> constellations; // 观测到的星座
  final String notes;           // 观测笔记
  final List<String> photos;    // 照片列表
  final int rating;             // 观测评分(1-5)
}

3.1.4 观测统计

26% 21% 17% 14% 11% 10% 观测星座分布猎户座大熊座天蝎座狮子座仙女座其他

3.2 页面结构设计

3.2.1 主页面布局

StarDiaryHomePage
IndexedStack
日记页
星图页
星座页
设置页
NavigationBar
日记 Tab
星图 Tab
星座 Tab
设置 Tab

3.2.2 日记页面结构

日记页面
SliverAppBar
统计卡片
观测列表
添加按钮
渐变背景
标题
观测次数
总观测次数
观测星星数
解锁星座
观测卡片
时间地点
星星列表
评分

3.2.3 星图页面结构

星图页面
Canvas画布
星座连线
星星标记
统计信息
深蓝背景
网格线
连线绘制
星座名称
已观测星星
未观测星星
观测进度
成就徽章

3.3 观测记录生成

是
否
是
否
开始记录
选择时间
输入地点
选择天气
标记星星
是否添加笔记?
输入观测笔记
选择评分
是否添加照片?
上传照片
保存记录
更新星图
更新统计
检查成就

3.4 星图绘制算法

dart 复制代码

void _drawStarMap(Canvas canvas, Size size) {
  // 绘制背景
  final paint = Paint()
    ..color = Color(0xFF0A0E27)
    ..style = PaintingStyle.fill;
  canvas.drawRect(Offset.zero & size, paint);
  
  // 绘制网格
  _drawGrid(canvas, size);
  
  // 绘制星座连线
  for (var constellation in _constellations) {
    _drawConstellationLines(canvas, constellation);
  }
  
  // 绘制星星
  for (var star in _stars) {
    _drawStar(canvas, star);
  }
  
  // 绘制星座名称
  for (var constellation in _constellations) {
    _drawConstellationName(canvas, constellation);
  }
}

四、UI设计规范

4.1 配色方案

应用采用深邃的夜空蓝为主色调,营造宁静浪漫的观星氛围:

颜色类型	色值	用途
主色	#0A0E27 (深蓝)	背景、星空
星星色	#FFD700 (金色)	亮星标记
星星色	#87CEEB (天蓝)	暗星标记
强调色	#9C27B0 (紫色)	导航、按钮
文字色	#FFFFFF (白色)	主要文字
辅助色	#B0BEC5 (灰蓝)	次要文字

4.2 字体规范

元素	字号	字重	颜色
星座名称	20px	Bold	#FFFFFF
星星名称	14px	Medium	#FFD700
观测时间	12px	Regular	#B0BEC5
笔记内容	14px	Regular	#FFFFFF
统计数字	32px	Bold	#FFD700

4.3 组件规范

4.3.1 观测卡片

复制代码

┌─────────────────────────────────────────────────┐
│  🌙 2024年1月15日 21:30                         │
│                                                 │
│  📍 北京怀柔 · 晴朗 · -5°C                      │
│                                                 │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━  │
│                                                 │
│  ⭐ 猎户座 · 大熊座 · 狮子座                    │
│                                                 │
│  今晚观测条件极佳,看到了猎户座的...             │
│                                                 │
│  ⭐⭐⭐⭐⭐                              ❤️ 12  │
│                                                 │
└─────────────────────────────────────────────────┘

4.3.2 星座卡片

复制代码

┌───────────────────────┐
│                       │
│         🏹            │
│                       │
│       猎户座          │
│      Orion            │
│                       │
│    已观测: 5/7颗      │
│                       │
│    ███████░░░ 71%    │
│                       │
└───────────────────────┘

4.3.3 统计卡片

复制代码

┌─────────────────────────────────────────────────┐
│                                                 │
│  📊 观测统计                                    │
│                                                 │
│  ┌─────┐  ┌─────┐  ┌─────┐                    │
│  │  42 │  │ 156 │  │  12 │                    │
│  │观测 │  │星星 │  │星座 │                    │
│  └─────┘  └─────┘  └─────┘                    │
│                                                 │
└─────────────────────────────────────────────────┘

4.3.4 星星标记

复制代码

        ★
       /|\
      / | \
     /  |  \
    ●───●───●
     \  |  /
      \ | /
       \|/
        ★

五、核心功能实现

5.1 观测记录添加

dart 复制代码

void _addObservation({
  required String location,
  required String weather,
  required int temperature,
  required List<String> stars,
  required List<String> constellations,
  required String notes,
  required int rating,
}) {
  final observation = StarObservation(
    id: DateTime.now().millisecondsSinceEpoch.toString(),
    observedAt: DateTime.now(),
    location: location,
    weather: weather,
    temperature: temperature,
    stars: stars,
    constellations: constellations,
    notes: notes,
    photos: [],
    rating: rating,
  );

  setState(() {
    _observations.insert(0, observation);
    
    // 更新星座统计
    for (var constellation in constellations) {
      _constellationCounts[constellation] = 
          (_constellationCounts[constellation] ?? 0) + 1;
    }
    
    // 更新观测星星
    _observedStars.addAll(stars);
  });
}

5.2 星座进度计算

dart 复制代码

Map<String, double> _getConstellationProgress() {
  final progress = <String, double>{};
  
  for (var constellation in Constellation.values) {
    final totalStars = constellation.stars.length;
    final observedCount = constellation.stars
        .where((star) => _observedStars.contains(star))
        .length;
    
    progress[constellation.name] = observedCount / totalStars;
  }
  
  return progress;
}

5.3 星图绘制

dart 复制代码

class StarMapPainter extends CustomPainter {
  final List<Star> stars;
  final List<Constellation> constellations;
  final Set<String> observedStars;

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制背景
    _drawBackground(canvas, size);
    
    // 绘制星座连线
    for (var constellation in constellations) {
      _drawConstellationLines(canvas, constellation, size);
    }
    
    // 绘制星星
    for (var star in stars) {
      _drawStar(canvas, star, size);
    }
  }

  void _drawStar(Canvas canvas, Star star, Size size) {
    final position = _getStarPosition(star, size);
    final radius = _getStarRadius(star.magnitude);
    final color = observedStars.contains(star.id)
        ? Color(0xFFFFD700)
        : Color(0xFF87CEEB);

    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    canvas.drawCircle(position, radius, paint);
    
    // 绘制光晕效果
    if (observedStars.contains(star.id)) {
      final glowPaint = Paint()
        ..color = color.withOpacity(0.3)
        ..maskFilter = MaskFilter.blur(BlurStyle.normal, 5);
      canvas.drawCircle(position, radius * 2, glowPaint);
    }
  }
}

5.4 成就解锁

dart 复制代码

List<String> _checkAchievements() {
  final achievements = <String>[];
  
  // 首次观测
  if (_observations.length == 1) {
    achievements.add('🌟 初次观星');
  }
  
  // 观测10次
  if (_observations.length >= 10) {
    achievements.add('🔭 观星达人');
  }
  
  // 完成一个星座
  final progress = _getConstellationProgress();
  for (var entry in progress.entries) {
    if (entry.value >= 1.0) {
      achievements.add('✨ ${entry.key}大师');
    }
  }
  
  // 观测100颗星
  if (_observedStars.length >= 100) {
    achievements.add('💫 星空猎人');
  }
  
  return achievements;
}

5.5 数据统计

dart 复制代码

Map<String, dynamic> _getStatistics() {
  return {
    'totalObservations': _observations.length,
    'totalStars': _observedStars.length,
    'totalConstellations': _constellationCounts.length,
    'favoriteConstellation': _getFavoriteConstellation(),
    'averageRating': _getAverageRating(),
    'monthlyTrend': _getMonthlyTrend(),
  };
}

String _getFavoriteConstellation() {
  if (_constellationCounts.isEmpty) return '暂无';
  
  var maxCount = 0;
  var favorite = '';
  
  for (var entry in _constellationCounts.entries) {
    if (entry.value > maxCount) {
      maxCount = entry.value;
      favorite = entry.key;
    }
  }
  
  return favorite;
}

六、交互设计

6.1 观测记录交互

星图表单日记页用户星图表单日记页用户点击添加按钮显示表单输入观测信息标记星星添加笔记保存记录更新星图显示新星星

6.2 星图浏览流程

是
否
是
否
进入星图页面
查看个人星图
选择星座?
点击星座
显示星座详情
查看观测记录
浏览全部星星
点击星星
显示星星信息
添加观测?
跳转记录页
继续浏览

6.3 页面切换状态

点击星图Tab
点击星座Tab
点击设置Tab
点击日记Tab
点击星座Tab
点击设置Tab
点击日记Tab
点击星图Tab
点击设置Tab
点击日记Tab
点击星图Tab
点击星座Tab
日记页面
星图页面
星座页面
设置页面

七、星座数据示例

7.1 猎户座

中文名 : 猎户座
拉丁名 : Orion
符号 : 🏹
季节 : 冬季
最佳观测: 12月-2月

描述: 猎户座是冬季最显眼的星座,包含多颗明亮恒星,是天文爱好者的入门星座。

主要星星:

星名	星等	颜色	特点
参宿四	0.5	红色	红超巨星
参宿七	0.1	蓝色	蓝超巨星
参宿一	1.7	蓝色	腰带三星
参宿二	1.7	蓝色	腰带三星
参宿三	2.2	蓝色	腰带三星

神话: 希腊神话中的猎人俄里翁,被月神阿尔忒弥斯误杀后升上天空。

7.2 大熊座

中文名 : 大熊座
拉丁名 : Ursa Major
符号 : 🐻
季节 : 春季
最佳观测: 全年可见

描述: 大熊座包含著名的北斗七星,是北半球最容易辨认的星座之一。

主要星星:

星名	星等	颜色	特点
天枢	1.8	橙色	北斗一
天璇	2.4	白色	北斗二
天玑	2.4	白色	北斗三
天权	3.3	白色	北斗四
玉衡	1.8	白色	北斗五
开阳	2.1	白色	北斗六
摇光	1.9	蓝色	北斗七

八、扩展功能规划

8.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 观测记录星图展示星座百科数据持久化照片上传天气查询 AR观星社区分享数据同步 V1.0 基础版本 V1.1 增强版本 V1.2 进阶版本星空日记应用开发计划

8.2 功能扩展建议

8.2.1 AR观星

增强现实功能:

实时星座识别
星星信息标注
观测辅助引导
虚拟星座连线

8.2.2 社区功能

社交互动:

分享观测记录
观星活动组织
天文知识交流
专家在线答疑

8.2.3 智能推荐

个性化服务:

最佳观测时间推荐
天气预报提醒
星座观测指南
个性化星图

九、注意事项

9.1 开发注意事项

星图绘制: 使用Canvas绘制,注意性能优化
数据存储: 使用SharedPreferences或SQLite持久化
位置服务: 集成GPS获取观测地点
天气API: 接入天气服务获取实时天气

9.2 常见问题

问题	原因	解决方案
星图不显示	Canvas未初始化	检查CustomPainter
星星位置错误	坐标转换错误	检查赤经赤纬转换
记录保存失败	数据未持久化	检查存储逻辑
成就不解锁	条件判断错误	检查成就逻辑

9.3 使用建议

🌟 星空日记使用小贴士 🌟

选择晴朗无月的夜晚观测

远离城市光污染的地方

准备好星图和红光手电

耐心寻找,享受过程

记录每一次观测的感动

十、运行说明

10.1 环境要求

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

10.2 运行命令

bash 复制代码

# 查看可用设备
flutter devices

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

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

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

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

十一、总结

星空日记应用通过记录每晚的观星体验,帮助用户建立属于自己的个人星座图。应用包含88个现代星座,每个星座都有详细的介绍、主要星星和观测指南。用户可以记录观测时间、地点、天气,标记看到的星星,添加观测笔记和照片。

核心功能涵盖观测记录、星图展示、星座百科三大模块。观测记录支持详细的观测信息输入;星图展示以可视化方式呈现用户的观星历程;星座百科提供丰富的天文知识。

应用采用Material Design 3设计规范,以深邃的夜空蓝为主色调,营造宁静浪漫的观星氛围。通过本应用,希望能够帮助天文爱好者记录观星的美好时光,探索浩瀚星空的无限魅力。

仰望星空,记录每一颗星辰