基于HarmonyOS 7.0 跨端开发的滴胶手工配方管理页面实战

前言

在手工 DIY 与树脂工艺类应用中，滴胶手工是一个充满晶莹质感、深受手工爱好者喜爱的创意主题功能。滴胶（UV胶/AB胶）能把干花、贝壳、标本等封存在晶莹剔透的树脂里，做成项链、杯垫、摆件等精美作品，而一个能管理胶水配方比例、选择模具、搭配添加剂、记录固化作品的应用，是滴胶玩家的配方助手。一个优秀的滴胶手工页面，需要切换胶水类型、调配 AB 胶比例（含可视化比例条）、选择模具和添加剂、并记录作品。这类页面在技术上的亮点是"配比可视化加类型切换加比例计算"——它需要用 Expanded 的 flex 实现可视化比例条、用类型切换展示不同配方。当我们把这样一个树脂工艺主题的页面放进 HarmonyOS 7.0 的跨端开发语境时，它就成为检验 Flutter 比例可视化与配方管理跨端一致性的合适样本。本文将以一个真实的 Flutter 滴胶手工页面为载体，结合 Flutter 与 HarmonyOS 7.0 的融合架构，深入剖析它的设计思路、核心代码与跨端落地路径。需要在开篇明确：本文涉及的鸿蒙适配全部基于 HarmonyOS 跨平台 SIG 维护的定制版 Flutter SDK，而非 flutter.dev 官方版本，这是所有讨论的前提。

背景

滴胶手工的关键在于"配方"和"封存"。胶水分两类——UV胶（紫外灯照射固化，3-10分钟，方便快速）和 AB胶（A液B液按比例混合固化，常需24小时，但适合大件和厚层）。AB 胶的配比很关键——通常A:B为3:1，比例错了会固化不良，因此精确调配和可视化比例很重要。模具决定作品形状（圆形、方形、长方体、六边形），材质有硅胶、亚克力。添加剂是创意来源——干花、金箔、色精、闪粉、贝壳、亮片等，封存进胶里形成独特效果。作品记录则保存配方和固化参数。从技术上看，这个页面的亮点是 AB 胶配比的可视化比例条（用 Expanded 的 flex 按比例分配宽度）、UV/AB 胶类型切换、添加剂 Chip 展示。在传统多端开发中，要在 Android、iOS、HarmonyOS 上分别实现这套配比可视化和管理，逻辑各写一套。这种"配比可视化准确、配方管理清晰"的要求，正是 Flutter 跨端价值的体现。我们的目标，是用一份 Dart 代码让手机、平板与鸿蒙设备上呈现一致的滴胶手工体验。

Flutter × Harmony7.0 跨端开发介绍

滴胶手工页面要在 HarmonyOS 7.0 上正确运行，需要理解 Flutter 在鸿蒙上的运行架构。Flutter 由 Framework、Engine、Embedder 三层组成。Framework 层用 Dart 编写，负责组件、状态、布局等，本页面里的配方调配器、添加剂色板、模具选择、作品展示都属于这一层。Engine 层是运行时核心，负责 Dart VM、AOT 产物加载、GPU 渲染、文本排版等；Flutter 在鸿蒙上的界面由其自绘引擎绘制，通过接入 HarmonyOS 的 ArkUI RenderingContext 获取 GPU 渲染上下文，再由 ArkTS 容器 FlutterAbility 承载输出，这保证了青绿的滴胶配色、配比条的 A/B 液双色、添加剂 Chip、模具图标在鸿蒙上的像素级还原。这里的配比条用 Expanded 的 flex 属性按 A、B 液比例分配宽度，是用 flex 做比例可视化的巧妙运用。Embedder 层是 Flutter 与鸿蒙系统的桥梁，由 @ohos/flutter_ohos 提供的 FlutterAbility 实现。在能力接入上，配方调配、添加剂、模具、作品都是纯 Framework 与 Dart 能力，可零适配复用；UV 固化倒计时可用 Timer（纯 Dart）。编译上，Release 模式的 AOT 提前编译保证了渲染的原生级流畅。

开发核心代码

滴胶手工页面的代码可分为三个核心部分。第一部分是胶水类型切换和配比显示。页面以 StatefulWidget 承载，入口类被统一命名为 SearchPage，状态类 _ResinCraftPageState 用 _resinType 切换胶水类型。

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

// 配比显示（按类型）
final ratioDisplay = _resinType == 'AB胶'
    ? 'A液:B液 = ${_ratioA.toStringAsFixed(1)}:${_ratioB.toStringAsFixed(1)}'
    : '无需调配，直接使用';

// 胶水类型切换
Row(children: [
  _resinToggle('AB胶', Icons.science),
  _resinToggle('UV胶', Icons.wb_sunny),
])
Widget _resinToggle(String name, IconData icon) {
  final active = _resinType == name;
  return GestureDetector(
    onTap: () => setState(() => _resinType = name),
    child: Container(
      decoration: BoxDecoration(
        color: active ? Colors.white.withOpacity(0.25) : Colors.white.withOpacity(0.08),
        border: Border.all(color: active ? Colors.white : Colors.white.withOpacity(0.2))),
      child: Row(children: [Icon(icon, color: Colors.white), Text(name)]),
    ),
  );
}

这段代码实现胶水类型切换和配比显示。_resinType 在 AB 胶和 UV 胶间切换，ratioDisplay 根据类型显示不同的配比信息——AB 胶显示"A液:B液 = 3.0:1.0"、UV 胶显示"无需调配"。_resinToggle 用半透明白色背景区分激活态（在青绿渐变背景上）。这种"类型切换+对应信息"的设计让两种胶水的不同配方需求清晰呈现。toStringAsFixed(1) 格式化比例，纯 Dart 跨端一致。

第二部分是配比可视化条，它用 Expanded 的 flex 按比例分配宽度。

if (_resinType == 'AB胶') ...[
  Row(children: [
    Expanded(
      flex: (_ratioA * 10).toInt(),  // A液比例 → flex
      child: Container(
        height: 20,
        decoration: const BoxDecoration(color: Colors.amber, borderRadius: BorderRadius.horizontal(left: Radius.circular(10))),
        child: const Text('A液'),
      ),
    ),
    Expanded(
      flex: (_ratioB * 10).toInt(),  // B液比例 → flex
      child: Container(
        height: 20,
        decoration: const BoxDecoration(color: Colors.orange, borderRadius: BorderRadius.horizontal(right: Radius.circular(10))),
        child: const Text('B液'),
      ),
    ),
  ]),
]

这段代码是配比可视化的精髓——用 Expanded 的 flex 属性实现按比例分配宽度的可视化条。A 液的 Expanded flex 设为 _ratioA * 10、B 液设为 _ratioB * 10，这样两段的宽度就严格按 A:B 的比例分配（如3:1时A段占3/4、B段占1/4）。A液用琥珀色、B液用橙色，左右拼成一个完整的比例条。这种"用 flex 做比例可视化"非常巧妙——Expanded 本就按 flex 比例分配空间，正好用来表达配比，无需任何计算或画图。这是 Flutter 布局系统的灵活运用，跨端一致。这让用户直观看到 A、B 液该放多少的比例关系。

第三部分是添加剂和模具，它用 Chip 和图标卡展示。

// 添加剂色板（Chip）
Wrap(
  spacing: 8, runSpacing: 8,
  children: _additives.map((a) => Chip(
    label: Text(a),  // 干花、金箔、色精...
    backgroundColor: Colors.teal[50],
    side: BorderSide(color: Colors.teal[100]!),
  )).toList(),
)
// 模具选择（图标卡）
ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: _molds.length,
  itemBuilder: (context, i) {
    final m = _molds[i];
    final shapeIcons = {'圆形': Icons.circle, '方形': Icons.square, '长方体': Icons.crop_16_9, '六边形': Icons.hexagon};
    return Container(child: Column(children: [
      Icon(shapeIcons[m['shape']] ?? Icons.circle, color: const Color(0xFF00695C)),  // 形状图标
      Text(m['shape'] as String),  // 形状名
      Text('${m['sizes']} · ${m['material']}'),  // 尺寸 + 材质
    ]));
  },
)

这段代码展示添加剂和模具。添加剂用 Chip 加 Wrap 展示成一组标签（干花、金箔、色精等），像调色板供用户参考搭配。模具用横向图标卡展示，shapeIcons 用 Map 把形状名映射为对应图标（圆形→circle、六边形→hexagon），加尺寸和材质信息。Chip 加 Wrap 是展示标签组的标准方式、Map 映射图标是常用技巧，都纯 Dart 实现跨端一致。三部分代码合在一起，构成了一个配比直观、添加剂丰富、模具齐全的滴胶手工页面，其类型切换、配比条、添加剂、模具都不依赖任何平台特性可零适配跨端。

心得

把这个滴胶手工页面落地到 HarmonyOS 7.0，让我学到了一个用布局做比例可视化的绝妙技巧。第一点核心体会是用 Expanded 的 flex 做配比可视化。AB 胶的配比条用两个 Expanded，flex 分别设为 A、B 液比例值，这样两段宽度就严格按配比分配——这太巧妙了！Expanded 本就是按 flex 比例瓜分剩余空间的，正好天然适合表达"比例"这种数据，无需任何计算或 CustomPaint。这与上一篇热缩片用 Container 尺寸做对比可视化异曲同工，都是"用布局本身表达数据"。这让我深刻体会到，Flutter 的布局系统不仅用于排版，还能巧妙地用于数据可视化——Expanded 的 flex 做比例、Container 的尺寸做对比，这些都比画图表更轻量，且跨端一致。掌握这种思路能用最简单的方式实现可视化。第二点体会是类型切换驱动的配方差异。AB 胶和 UV 胶配方需求不同（一个要调配比、一个不用），用 _resinType 切换并条件显示对应信息，这种"类型驱动差异化展示"纯 Dart 跨端一致。第三点体会是 Chip 展示添加剂、Map 映射模具图标——这些是我反复用到的成熟模式，跨端可靠。第四点体会是 UV 固化的倒计时——UV 胶固化3-10分钟，可用 Timer 做倒计时提醒，纯 Dart 跨端一致。第五点是工程规律的印证：类型切换、配比条、添加剂、模具零成本跨端，用 Expanded flex 做比例可视化巧妙轻量，都跨端一致。

总结

通过滴胶手工配方管理页面在 HarmonyOS 7.0 上的实践，我们看到了 Flutter 跨端方案在"配方管理类应用"上的可靠表现。架构上，Framework、Engine、Embedder 三层在鸿蒙平台协同运转，Expanded 的 flex 比例分配由 Flutter 布局系统精确控制保证了配比可视化的跨端一致，自绘渲染保证了青绿配色、配比条双色、添加剂 Chip、模具图标的视觉一致，AOT 编译保证了渲染的流畅，FlutterAbility 承载了与鸿蒙系统的交互。代码上，页面通过胶水类型切换、Expanded flex 的配比可视化条、Chip 的添加剂色板、以及 Map 映射图标的模具选择，把滴胶手工干净地映射成了直观专业的界面，整份 Dart 代码无需修改即可在鸿蒙运行，充分印证了高复用率优势。

这次实践学到一个绝妙技巧：用 Expanded 的 flex 属性做比例可视化——两个 Expanded 的 flex 设为各自比例值，宽度就严格按比例分配，无需计算或画图，因为 Expanded 本就按 flex 瓜分空间。这与用 Container 尺寸做对比可视化同属"用布局本身表达数据"的思路，比画图表更轻量且跨端一致。滴胶手工的类型切换、配比条、添加剂、模具零成本跨端。这提示我们，数据可视化不必都用 CustomPaint，巧用布局（flex 比例、尺寸对比）能更轻量地实现。因此，对准备进入鸿蒙生态的 Flutter 团队，对这类应用完全可以放心地巧用 Expanded flex 等布局特性做轻量可视化、用成熟组件构建配方管理 UI，信赖其跨端一致，并始终以 HarmonyOS 跨平台 SIG 维护的定制版 Flutter SDK 作为一切工作的起点。唯有如此，才能既享受一次开发、多端部署的红利，又借助巧妙的布局可视化思路，让滴胶手工这样晶莹的创意功能真正直观、专业地陪伴每一位手作爱好者。