Flutter for OpenHarmony 实战：粒子背景效果：使用 CustomPaint绘制或 particles库。
在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
前言：跨生态开发的新机遇
在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。
Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。将现有的Flutter应用适配到鸿蒙，听起来像是一个“跨界”任务，但它本质上是一次有价值的技术拓展：让产品触达更多用户，也让技术栈覆盖更广。
不过，这条路走起来并不像听起来那么简单。Flutter和鸿蒙，从底层的架构到上层的工具链，都有着各自的设计逻辑。会遇到一些具体的问题：代码如何组织？原有的功能在鸿蒙上如何实现？那些平台特有的能力该怎么调用？更实际的是，从编译打包到上架部署，整个流程都需要重新摸索。
这篇文章想做的，就是把这些我们趟过的路、踩过的坑，清晰地摊开给你看。我们不会只停留在“怎么做”，还会聊到“为什么得这么做”，以及“如果出了问题该往哪想”。这更像是一份实战笔记，源自真实的项目经验，聚焦于那些真正卡住过我们的环节。
无论你是在为一个成熟产品寻找新的落地平台，还是从一开始就希望构建能面向多端的应用，这里的思路和解决方案都能提供直接的参考。理解了两套体系之间的异同，掌握了关键的衔接技术，不仅能完成这次迁移，更能积累起应对未来技术变化的能力。
混合工程结构深度解析
项目目录架构
当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是经过ohos_flutter插件初始化后的项目结构：
my_flutter_harmony_app/
├── lib/ # Flutter业务代码（基本不变）
│ ├── main.dart # 应用入口
│ ├── home_page.dart # 首页
│ └── utils/
│ └── platform_utils.dart # 平台工具类
├── pubspec.yaml # Flutter依赖配置
├── ohos/ # 鸿蒙原生层（核心适配区）
│ ├── entry/ # 主模块
│ │ └── src/main/
│ │ ├── ets/ # ArkTS代码
│ │ │ ├── MainAbility/
│ │ │ │ ├── MainAbility.ts # 主Ability
│ │ │ │ └── MainAbilityContext.ts
│ │ │ └── pages/
│ │ │ ├── Index.ets # 主页面
│ │ │ └── Splash.ets # 启动页
│ │ ├── resources/ # 鸿蒙资源文件
│ │ │ ├── base/
│ │ │ │ ├── element/ # 字符串等
│ │ │ │ ├── media/ # 图片资源
│ │ │ │ └── profile/ # 配置文件
│ │ │ └── en_US/ # 英文资源
│ │ └── config.json # 应用核心配置
│ ├── ohos_test/ # 测试模块
│ ├── build-profile.json5 # 构建配置
│ └── oh-package.json5 # 鸿蒙依赖管理
└── README.md
目录
展示效果图片
flutter 实时预览 效果展示
运行到鸿蒙虚拟设备中效果展示
功能代码实现
粒子背景组件
粒子背景组件是一个使用Flutter内置的CustomPaint绘制的动态背景效果，具有粒子随机运动、鼠标交互和连线效果等特性。
核心代码实现
组件结构
import 'dart:math';
import 'package:flutter/material.dart';
class ParticleBackground extends StatefulWidget {
final double width;
final double height;
final Color particleColor;
final int particleCount;
final double particleSize;
final double particleSpeed;
const ParticleBackground({
Key? key,
required this.width,
required this.height,
this.particleColor = Colors.blue,
this.particleCount = 50,
this.particleSize = 2.0,
this.particleSpeed = 1.0,
}) : super(key: key);
State<ParticleBackground> createState() => _ParticleBackgroundState();
}
class _ParticleBackgroundState extends State<ParticleBackground> with SingleTickerProviderStateMixin {
late AnimationController _controller;
List<Particle> _particles = [];
Offset _mousePosition = Offset.zero;
bool _isMouseMoving = false;
void initState() {
super.initState();
_initParticles();
_controller = AnimationController(
duration: const Duration(seconds: 1),
vsync: this,
)..repeat();
_controller.addListener(() {
setState(() {
_updateParticles();
});
});
}
void _initParticles() {
_particles = List.generate(
widget.particleCount,
(index) {
return Particle(
x: Random().nextDouble() * widget.width,
y: Random().nextDouble() * widget.height,
size: widget.particleSize,
speedX: (Random().nextDouble() - 0.5) * widget.particleSpeed,
speedY: (Random().nextDouble() - 0.5) * widget.particleSpeed,
color: widget.particleColor.withOpacity(Random().nextDouble() * 0.5 + 0.5),
);
},
);
}
void _updateParticles() {
for (var particle in _particles) {
// 更新粒子位置
particle.x += particle.speedX;
particle.y += particle.speedY;
// 边界检测
if (particle.x < 0 || particle.x > widget.width) {
particle.speedX *= -1;
}
if (particle.y < 0 || particle.y > widget.height) {
particle.speedY *= -1;
}
// 鼠标交互
if (_isMouseMoving) {
double dx = _mousePosition.dx - particle.x;
double dy = _mousePosition.dy - particle.y;
double distance = sqrt(dx * dx + dy * dy);
if (distance < 100) {
double force = (100 - distance) / 100;
particle.x -= dx * force * 0.02;
particle.y -= dy * force * 0.02;
}
}
}
}
void dispose() {
_controller.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return GestureDetector(
onPanUpdate: (details) {
setState(() {
_isMouseMoving = true;
_mousePosition = details.localPosition;
});
},
onPanEnd: (_) {
setState(() {
_isMouseMoving = false;
});
},
child: CustomPaint(
size: Size(widget.width, widget.height),
painter: _ParticlePainter(
particles: _particles,
mousePosition: _mousePosition,
isMouseMoving: _isMouseMoving,
),
),
);
}
}
class _ParticlePainter extends CustomPainter {
final List<Particle> particles;
final Offset mousePosition;
final bool isMouseMoving;
_ParticlePainter({
required this.particles,
required this.mousePosition,
required this.isMouseMoving,
});
void paint(Canvas canvas, Size size) {
// 绘制粒子之间的连线
for (int i = 0; i < particles.length; i++) {
for (int j = i + 1; j < particles.length; j++) {
double dx = particles[i].x - particles[j].x;
double dy = particles[i].y - particles[j].y;
double distance = sqrt(dx * dx + dy * dy);
if (distance < 100) {
double opacity = (100 - distance) / 100 * 0.3;
canvas.drawLine(
Offset(particles[i].x, particles[i].y),
Offset(particles[j].x, particles[j].y),
Paint()
..color = particles[i].color.withOpacity(opacity)
..strokeWidth = 0.5,
);
}
}
}
// 绘制粒子
for (var particle in particles) {
canvas.drawCircle(
Offset(particle.x, particle.y),
particle.size,
Paint()..color = particle.color,
);
}
// 绘制鼠标交互效果
if (isMouseMoving) {
canvas.drawCircle(
mousePosition,
30,
Paint()
..color = Colors.blue.withOpacity(0.1)
..blendMode = BlendMode.overlay,
);
}
}
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
class Particle {
double x;
double y;
double size;
double speedX;
double speedY;
Color color;
Particle({
required this.x,
required this.y,
required this.size,
required this.speedX,
required this.speedY,
required this.color,
});
}
组件开发实现详解
1. 粒子系统设计
实现原理：
粒子背景组件的核心是一个粒子系统，由多个粒子组成。每个粒子具有位置、大小、速度和颜色等属性。我们通过以下步骤实现：
- 数据结构定义：创建
Particle类封装粒子的属性 - 粒子初始化：在
_initParticles方法中生成指定数量的粒子，随机设置初始位置和速度 - 动画控制：使用
AnimationController实现粒子运动的动画效果 - 位置更新：在
_updateParticles方法中更新粒子位置，处理边界碰撞
核心代码：
// 粒子类定义
class Particle {
double x;
double y;
double size;
double speedX;
double speedY;
Color color;
Particle({
required this.x,
required this.y,
required this.size,
required this.speedX,
required this.speedY,
required this.color,
});
}
// 粒子初始化
void _initParticles() {
_particles = List.generate(
widget.particleCount,
(index) {
return Particle(
x: Random().nextDouble() * widget.width,
y: Random().nextDouble() * widget.height,
size: widget.particleSize,
speedX: (Random().nextDouble() - 0.5) * widget.particleSpeed,
speedY: (Random().nextDouble() - 0.5) * widget.particleSpeed,
color: widget.particleColor.withOpacity(Random().nextDouble() * 0.5 + 0.5),
);
},
);
}
2. 绘制实现
实现原理：
使用CustomPaint和CustomPainter实现粒子和连线的绘制，这是实现高性能粒子效果的关键。我们通过以下步骤实现：
- 自定义绘制器：创建
_ParticlePainter类继承自CustomPainter - 连线绘制：绘制距离较近的粒子之间的连线，形成网络效果
- 粒子绘制：绘制每个粒子的圆形效果
- 交互效果：绘制鼠标交互时的影响范围
核心代码：
class _ParticlePainter extends CustomPainter {
void paint(Canvas canvas, Size size) {
// 绘制粒子之间的连线
for (int i = 0; i < particles.length; i++) {
for (int j = i + 1; j < particles.length; j++) {
double dx = particles[i].x - particles[j].x;
double dy = particles[i].y - particles[j].y;
double distance = sqrt(dx * dx + dy * dy);
if (distance < 100) {
double opacity = (100 - distance) / 100 * 0.3;
canvas.drawLine(
Offset(particles[i].x, particles[i].y),
Offset(particles[j].x, particles[j].y),
Paint()
..color = particles[i].color.withOpacity(opacity)
..strokeWidth = 0.5,
);
}
}
}
// 绘制粒子
for (var particle in particles) {
canvas.drawCircle(
Offset(particle.x, particle.y),
particle.size,
Paint()..color = particle.color,
);
}
}
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
3. 鼠标交互实现
实现原理：
为了增强用户体验，我们添加了鼠标交互效果，当鼠标移动时，粒子会受到鼠标的斥力影响。我们通过以下步骤实现：
- 手势检测：使用
GestureDetector捕获鼠标移动和结束事件 - 状态管理：维护
_mousePosition和_isMouseMoving状态 - 力场计算：在
_updateParticles方法中计算鼠标对粒子的斥力 - 位置调整：根据斥力调整粒子位置，实现交互效果
核心代码：
Widget build(BuildContext context) {
return GestureDetector(
onPanUpdate: (details) {
setState(() {
_isMouseMoving = true;
_mousePosition = details.localPosition;
});
},
onPanEnd: (_) {
setState(() {
_isMouseMoving = false;
});
},
child: CustomPaint(
size: Size(widget.width, widget.height),
painter: _ParticlePainter(
particles: _particles,
mousePosition: _mousePosition,
isMouseMoving: _isMouseMoving,
),
),
);
}
// 鼠标交互计算
if (_isMouseMoving) {
double dx = _mousePosition.dx - particle.x;
double dy = _mousePosition.dy - particle.y;
double distance = sqrt(dx * dx + dy * dy);
if (distance < 100) {
double force = (100 - distance) / 100;
particle.x -= dx * force * 0.02;
particle.y -= dy * force * 0.02;
}
}
在主应用中的集成
以下是在主应用中集成粒子背景组件的代码：
import 'package:flutter/material.dart';
import 'components/particle_background.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter for openHarmony',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(title: 'Flutter for openHarmony'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
return Stack(
children: [
// 粒子背景
ParticleBackground(
width: constraints.maxWidth,
height: constraints.maxHeight,
particleColor: Colors.blue,
particleCount: 80,
particleSize: 2.0,
particleSpeed: 1.2,
),
// 上层内容
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Flutter for OpenHarmony',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.5),
offset: Offset(2, 2),
blurRadius: 4,
),
],
),
),
SizedBox(height: 16),
Text(
'粒子背景效果演示',
style: TextStyle(
fontSize: 18,
color: Colors.white,
shadows: [
Shadow(
color: Colors.black.withOpacity(0.5),
offset: Offset(1, 1),
blurRadius: 2,
),
],
),
),
SizedBox(height: 32),
Text(
'提示：移动鼠标查看粒子交互效果',
style: TextStyle(
fontSize: 14,
color: Colors.white.withOpacity(0.8),
shadows: [
Shadow(
color: Colors.black.withOpacity(0.5),
offset: Offset(1, 1),
blurRadius: 2,
),
],
),
),
],
),
),
],
);
},
),
);
}
}
使用方法
基本使用
import 'components/particle_background.dart';
// 在需要的地方使用
ParticleBackground(
width: 300,
height: 500,
)
自定义配置
// 自定义配置
ParticleBackground(
width: screenWidth,
height: screenHeight,
particleColor: Colors.blue,
particleCount: 80,
particleSize: 2.0,
particleSpeed: 1.2,
)
开发中需要注意的点
- 性能优化：粒子数量不宜过多，建议控制在100个以内，以保证流畅的动画效果
- 资源管理：在组件销毁时，记得调用
_controller.dispose()释放动画控制器资源 - 布局适配：使用
LayoutBuilder获取父容器的尺寸，确保粒子背景充满整个屏幕 - 交互体验：鼠标交互的力场范围和强度需要适当调整，以获得最佳的视觉效果
- 颜色处理：使用
withOpacity方法设置粒子颜色的透明度，创建层次感 - 边界处理：确保粒子在边界处正确反弹，避免粒子丢失
- 代码组织：将粒子逻辑、绘制逻辑和交互逻辑分离，提高代码可读性和可维护性
本次开发中容易遇到的问题
-
性能问题：粒子数量过多会导致动画卡顿，特别是在性能较弱的设备上。解决方案是根据设备性能动态调整粒子数量，一般建议控制在100个以内。
-
资源泄漏：忘记在组件销毁时释放
AnimationController资源，可能导致内存泄漏。解决方案是在dispose方法中调用_controller.dispose()。 -
布局溢出：粒子背景组件的尺寸设置不当，可能导致布局溢出。解决方案是使用
LayoutBuilder获取父容器的尺寸，确保粒子背景与父容器尺寸一致。 -
交互不流畅：鼠标交互的力场计算过于复杂，可能导致交互不流畅。解决方案是优化力场计算逻辑，减少不必要的计算。
-
边界处理错误：粒子在边界处可能会出现穿透或丢失的情况。解决方案是确保边界检测逻辑正确，粒子速度在边界处正确反弹。
-
颜色显示异常：粒子颜色透明度设置不当，可能导致颜色显示异常。解决方案是合理设置颜色透明度，确保在不同背景下都能正常显示。
-
绘制性能问题：粒子连线的绘制逻辑过于复杂，可能导致绘制性能下降。解决方案是限制连线的绘制范围，只绘制距离较近的粒子之间的连线。
-
动画控制器配置错误：动画控制器的配置不当，可能导致动画效果不理想。解决方案是合理设置动画控制器的 duration 和 repeat 模式。
-
状态管理问题：粒子状态更新逻辑不当，可能导致界面不刷新或刷新不及时。解决方案是确保在
setState方法中正确更新粒子状态。 -
代码可读性问题：粒子逻辑、绘制逻辑和交互逻辑混杂在一起，可能导致代码可读性差。解决方案是将不同逻辑分离到不同的方法或类中，提高代码的模块化程度。
总结本次开发中用到的技术点
-
CustomPaint绘制：使用
CustomPaint和CustomPainter实现高性能的粒子和连线绘制，这是实现粒子背景效果的核心技术。 -
动画控制器：使用
AnimationController实现粒子运动的动画效果，通过控制动画的速度和重复模式，创建流畅的视觉效果。 -
粒子系统设计：设计了完整的粒子系统，包括粒子的属性定义、初始化、位置更新和边界碰撞检测。
-
鼠标交互：使用
GestureDetector实现鼠标交互，通过力场计算实现粒子与鼠标的动态交互效果。 -
布局管理：使用
Stack布局实现粒子背景与上层内容的叠加效果，使用LayoutBuilder实现自适应布局。 -
性能优化：通过限制粒子数量、优化绘制逻辑和减少不必要的计算，提高粒子背景的性能。
-
资源管理：正确管理动画控制器等资源，避免内存泄漏。
-
颜色处理：使用
withOpacity方法设置颜色透明度，创建具有层次感的视觉效果。 -
状态管理：使用
setState方法管理组件状态，确保界面与数据保持同步。 -
代码模块化：将粒子逻辑、绘制逻辑和交互逻辑分离到不同的方法或类中，提高代码的可读性和可维护性。
-
响应式设计：粒子背景组件支持自定义配置，能够适应不同的屏幕尺寸和使用场景。
-
数学计算：使用三角函数和距离计算实现粒子运动和交互效果，如边界碰撞检测和力场计算。
-
Flutter基础：熟练运用Flutter的基础组件和API，如
StatefulWidget、StatelessWidget、Canvas和Paint等。
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
25
0- 0
已为社区贡献11条内容
所有评论(0)