基于HarmonyOS 7.0 跨端开发的流体画页面实战

前言

在艺术创作与现代手作类应用中，流体画（Fluid Art）是一个极具视觉冲击力、近年来在社交媒体爆火的抽象绘画主题功能。流体画是把丙烯颜料调入浇注介质后倾倒在画布上，让颜料自然流动、相互交融，形成行云流水般的纹理和迷人的"细胞"效果的绘画形式。它的魅力在于不可完全预测的随机美——每一幅都是独一无二的。一个流体画应用需要承载几类核心内容：倾倒技法的讲解（倾倒法、吹画法、环倒法、刮板法）、配色方案的展示、以及作品干燥过程的记录。其中两个技术亮点尤为突出：一是用可折叠面板展开每种技法的详细配比，二是用 CustomPainter 自定义绘制模拟流体的流动色条。一个优秀的流体画页面，需要用折叠面板呈现技法配比（介质比例、硅油用量、细胞效果等级）、用自绘流动色条预览配色方案、并用进度条追踪作品的干燥进度。这类页面在技术上的特点是"折叠面板加流体纹理自绘与进度追踪"——它需要用 ExpansionTile 折叠技法详情、用三角函数在 Canvas 上绘制流动曲线、用进度条映射干燥天数。当我们把这样一个流体画主题的页面放进 HarmonyOS 7.0 的跨端开发语境时，它就成为检验 Flutter 自绘曲线与折叠组件跨端一致性的合适样本。本文将以一个真实的 Flutter 流体画页面为载体，结合 Flutter 与 HarmonyOS 7.0 的融合架构，深入剖析它的设计思路、核心代码与跨端落地路径。需要在开篇明确：本文涉及的鸿蒙适配全部基于 HarmonyOS 跨平台 SIG 维护的定制版 Flutter SDK，而非 flutter.dev 官方版本，这是所有讨论的前提。

背景

流体画的核心是"技法配比与流动效果"。流体画的不同技法会产生截然不同的视觉效果——倾倒法（Dirty Pour，多色叠倒后倾泻，产生自然流动纹理）、吹画法（用风吹散颜料，形成放射状）、环倒法（Ring Pour，定点连续倾倒，形成同心圆环）、刮板法（Swipe，用刮板拖过表面，产生爆裂的细胞效果）。每种技法对颜料配比（丙烯与浇注介质的比例）、硅油用量（硅油是产生"细胞"的关键添加剂，滴数越多细胞越明显）有不同要求，因此应用需要详细记录这些参数。配色方案（海洋之眼的冷蓝、熔岩之心的暖红、银河之梦的梦幻紫）决定了作品的基调，需要直观预览。而流体画的特殊之处在于干燥过程漫长——倾倒后颜料还在缓慢流动，要经历"流动中→表干→全干"多个阶段、耗时数天，因此干燥记录是流体画创作不可或缺的一环。从技术上看，这个页面的特点是技法配比的折叠详情、配色方案的流动色条自绘、以及干燥进度的可视化追踪。在传统多端开发中，要在 Android、iOS、HarmonyOS 上分别实现这套折叠面板、流动曲线绘制和进度条，各写一套，难以保证视觉一致。这种"配比详尽、效果直观"的要求，正是 Flutter 跨端价值的体现。我们的目标，是用一份 Dart 代码让手机、平板与鸿蒙设备上呈现一致的流体画体验。

Flutter × Harmony7.0 跨端开发介绍

流体画页面要在 HarmonyOS 7.0 上正确运行，需要理解 Flutter 在鸿蒙上的运行架构。Flutter 由 Framework、Engine、Embedder 三层组成。Framework 层用 Dart 编写，负责组件、布局、自定义绘制等，本页面里的技法折叠面板、配色色条、干燥进度条都属于这一层，而流动色条用的 CustomPaint 与 _FluidStripePainter 也是 Framework 提供的自绘入口。Engine 层是运行时核心，负责 Dart VM、AOT 产物加载、GPU 渲染、文本排版与动画调度；尤其值得强调的是，流动色条里用 sin、cos 三角函数逐点构造的 Path 曲线，最终由 Flutter 的 Skia 渲染引擎在 GPU 上绘制，而 Skia 在鸿蒙平台已稳定支持。Flutter 在鸿蒙上的界面通过接入 HarmonyOS 的 ArkUI RenderingContext 获取 GPU 渲染上下文，再由 ArkTS 容器 FlutterAbility 承载输出，这保证了流动色条的曲线纹理、技法图标的紫色渐变、干燥进度条的橙绿状态色在鸿蒙设备上的像素级还原——同一套用数学函数生成的流动曲线，在鸿蒙、Android、iOS 上产生完全相同的纹理。Embedder 层是 Flutter 与鸿蒙系统的桥梁，由 @ohos/flutter_ohos 模块提供的 FlutterAbility 实现，负责引擎初始化、渲染上下文绑定与生命周期分发。在三方库适配上，本页面纯用 Material 组件与 CustomPaint（外加 dart:math 的三角函数，属 Dart 标准库），不依赖任何含原生代码的三方库，因此可以零适配直接复用。编译上，Release 模式下 Dart 代码经 AOT 提前编译为 ARM64 原生机器码，曲线绘制与折叠动画以原生性能完成。

开发核心代码

流体画页面的代码可分为三个核心部分。第一部分是技法配比的折叠详情。页面以 StatefulWidget 承载，入口类被统一命名为 ProfilePage，状态类 _FluidArtPageState 用 ExpansionTile 展开技法参数。

class ProfilePage extends StatefulWidget {
  const ProfilePage({super.key});
  @override
  State<ProfilePage> createState() => _FluidArtPageState();
}

// 技法折叠面板：标题显示技法名与效果，展开后是详细配比
..._techniques.asMap().entries.map((e) {
  final t = e.value;
  return Card(child: ExpansionTile(
    leading: Container(  // 紫色渐变图标
      decoration: BoxDecoration(gradient: const LinearGradient(colors: [Color(0xFFE1BEE7), Color(0xFFCE93D8)])),
      child: Center(child: Text(t['icon'] as String)),
    ),
    title: Text(t['name'] as String),
    subtitle: Text(t['effect'] as String),  // 该技法的效果描述
    children: [Padding(padding: const EdgeInsets.fromLTRB(16, 0, 16, 14), child: Column(children: [
      _fluidRow('🧪 配比', t['medium'] as String),    // 颜料配比
      _fluidRow('🫧 硅油', t['silicone'] as String),  // 硅油用量
      _fluidRow('🫧 细胞', t['cells'] as String),     // 细胞效果等级
    ]))],
  ));
}),

这段代码用 ExpansionTile 把每种技法渲染为可折叠面板——收起时只显示技法名和效果，展开后才呈现配比、硅油、细胞等详细参数。这种"概览—详情"的折叠设计很适合参数较多的内容，既保持列表简洁，又能按需查看细节。展开内容用复用的 _fluidRow 方法渲染"标签—值"对，统一了参数展示的样式。技法图标用紫色渐变背景，呼应流体画梦幻的主题色调。ExpansionTile 内置的展开动画在跨端时由 Engine 统一驱动，鸿蒙上与其他端一致。这种用内置折叠组件组织详情的方式，前面 Git 命令页也用过，是组织密集信息的通用手法。

第二部分是流动色条的自定义绘制，它用三角函数模拟流体纹理。

class _FluidStripePainter extends CustomPainter {
  final List<Color> colors;
  _FluidStripePainter({required this.colors});

  @override
  void paint(Canvas canvas, Size size) {
    final w = size.width / colors.length;  // 每种颜色的色条宽度
    for (int i = 0; i < colors.length; i++) {
      final paint = Paint()..color = colors[i];
      final path = Path();
      // 用 sin/cos 逐点构造流动曲线边界
      for (double y = 0; y <= size.height; y += 2) {
        final x = i * w + sin(y * 0.3 + i) * 6 + cos(y * 0.15 + i * 2) * 4;
        if (y == 0) { path.moveTo(x, y); } else { path.lineTo(x, y); }
      }
      path.lineTo((i + 1) * w, size.height);
      path.lineTo((i + 1) * w, 0);
      path.close();
      canvas.drawPath(path, paint);  // 填充该色条
    }
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

这段代码是流动效果的核心。它继承 CustomPainter，把配色的每种颜色绘制成一条带波浪边界的色条。关键在于用 sin(y * 0.3 + i) * 6 + cos(y * 0.15 + i * 2) * 4 计算每个 y 坐标对应的 x 偏移——叠加两个不同频率、不同相位的三角函数，生成自然又不规则的波动曲线，逐点用 lineTo 连成色条的边界，再闭合填充。这种用数学函数生成有机曲线的手法，正是模拟流体流动纹理的精髓——纯靠计算就产生了仿佛颜料自然流动的视觉效果，无需任何图片素材。每条色条的相位用索引 i 错开，让相邻色条的波动不同步，更显自然。这套绘制由 Skia 在 GPU 上执行，在鸿蒙、Android、iOS 上产生像素级相同的曲线纹理。

第三部分是干燥进度的可视化追踪，它用进度条映射干燥天数。

..._drying.map((d) {
  final progress = (d['days'] as int) / (d['total'] as int);  // 干燥进度比例
  return Container(child: Column(children: [
    Row(children: [
      Text(d['work'] as String),
      Container(  // 干燥阶段标签：全干绿、其余橙
        decoration: BoxDecoration(color: d['stage'] == '全干' ? Colors.green[50] : Colors.orange[50]),
        child: Text(d['stage'] as String, style: TextStyle(color: d['stage'] == '全干' ? Colors.green[700] : Colors.orange[700])),
      ),
      const Spacer(),
      Text('${d['days']}/${d['total']}天'),
    ]),
    ClipRRect(child: LinearProgressIndicator(
      value: progress.clamp(0.0, 1.0),
      color: progress >= 1.0 ? Colors.green : Colors.orange,  // 完成变绿
    )),
  ]));
}),

这段代码用 LinearProgressIndicator 追踪每幅作品的干燥进度。进度比例由已干燥天数除以总需天数得到，用 clamp 钳制在合理区间。关键的视觉巧思是进度条颜色随完成度变化——progress >= 1.0 ? Colors.green : Colors.orange，干燥中是橙色、全干变绿色，配合干燥阶段标签（流动中/表干/全干）的颜色，让用户一眼看出作品到了哪个阶段。这种"进度条颜色随状态切换"的设计，比单一颜色更有反馈感。流体画干燥周期长达数天，这个进度追踪正好满足创作者随时查看的需求。

心得

开发这个流体画页面，我最深的体会是用数学函数生成有机视觉效果的魅力。流体画的纹理是颜料自然流动形成的，看似随机、难以用图形精确描述；但用 sin 和 cos 三角函数叠加，逐点构造曲线，竟然就能模拟出仿佛流动的有机纹理。这让我深刻体会到 CustomPainter 的强大——它不只是画固定的矩形圆形，而是可以用任意数学逻辑生成复杂、自然的图形。通过调整三角函数的频率、振幅、相位，我可以控制波动的疏密和起伏，创造出各种流体感。更妙的是，这种用代码生成的纹理无需任何图片素材，包体积零增加，且可以任意缩放而不失真。而这一切计算和绘制都由 Skia 在 GPU 上执行，在鸿蒙、Android、iOS 上产生完全相同的纹理——数学是确定的，Skia 的渲染是一致的，所以跨端效果像素级统一。这是 Flutter 自绘相比图片素材的根本优势：用算法描述视觉，而非用像素堆砌。

第二个心得是状态驱动的颜色反馈。干燥进度条的颜色随完成度从橙变绿，这个小设计让进度条不只是展示数字，还传达了"是否完成"的状态。用户不需要细看天数，扫一眼颜色就知道作品干了没。这种"颜色编码状态"的设计在 Flutter 里实现成本极低，只需一个三元表达式切换颜色，却显著提升了信息传达的效率。我也再次体会到 ExpansionTile 折叠面板在组织密集信息上的价值——流体画技法的参数很多（配比、硅油、细胞），全平铺会很冗长，折叠起来按需展开，列表既简洁又不丢失信息。这个组件我在 Git 命令页也用过，可见好的内置组件在不同主题间高度可复用。第三个心得是这些能力的纯粹性——无论是三角函数自绘、折叠面板还是进度条，全都是纯 Dart 与 Framework 能力，不依赖任何含原生代码的三方库。这意味着把这个页面迁移到鸿蒙时，我不需要做任何适配，一份 Dart 代码直接运行，鸿蒙上的流动纹理、折叠交互、进度反馈与 Android、iOS 完全一致。这种"零适配复用"正是 Flutter 跨端开发最吸引人的地方。

总结

本文以一个流体画页面为样本，完整走过了"艺术主题理解—Flutter 鸿蒙架构梳理—核心代码剖析—开发心得提炼"的全过程。从技术构成看，这个页面集中体现了三个 Flutter 跨端开发的关键能力：一是用 ExpansionTile 折叠面板组织技法的密集配比参数，做到概览简洁、详情按需；二是用 CustomPainter 配合三角函数自绘流动色条，用算法生成有机纹理、借助 Skia 实现跨端像素级一致；三是用状态驱动颜色的 LinearProgressIndicator 追踪干燥进度，让进度条同时传达数值与状态。这三者都是纯 Framework 与 Dart 层能力，不依赖任何含原生代码的三方库，因此在迁移到 HarmonyOS 7.0 时可以零适配直接复用，一份 Dart 代码即可在手机、平板与鸿蒙设备上呈现一致的流体画体验。

从更宏观的视角看，流体画页面虽小，却特别突出了 Flutter × HarmonyOS 7.0 跨端方案中算法自绘的价值。借助 HarmonyOS 跨平台 SIG 维护的定制版 Flutter SDK，开发者可以把熟悉的 CustomPaint 自绘、数学生成纹理、折叠交互原封不动地带入鸿蒙生态，而 Flutter Engine 接入 ArkUI RenderingContext、由 Skia 在 GPU 上执行绘制、再由 FlutterAbility 承载的运行机制，则在底层保证了用算法生成的复杂图形跨端一致。对于需要丰富视觉效果的艺术、创意、可视化类应用而言，这种"用代码描述视觉、一次实现多端一致"的能力极具吸引力。对于已经拥有 Flutter 技术栈的团队而言，这意味着无需为鸿蒙重写绘制逻辑，就能快速进入鸿蒙生态，实现"一次开发、多端部署"。当这样的能力被复制到众多功能页面上时，跨端开发的整体效率与一致性优势便会被成倍放大——这正是 Flutter 与 HarmonyOS 7.0 结合给企业级应用研发带来的长远意义。