在开始上手写 Flutter 之前,我其实犹豫过一阵子:长度单位转换器这种应用,看起来不就是几个输入框加一个乘法公式吗?为什么非要把 Flutter、OpenHarmony、多字段联动这些东西揉在一起聊?
后来真做起来才发现,这个简单场景恰好把移动端表单开发里最不好处理的一批问题全压在一起了——多个输入框之间的数据同步、用户输入到一半的中间状态、程序化更新文本时光标位置的丢失、还有工程上如何让这套逻辑不只服务于“长度”这一个单位体系。再加上 OpenHarmony 平台自身的构建工具链和真机适配问题,一个“小工具”硬生生变成了教科书级的实战项目。这篇文章就从我实际构建这个智能长度单位转换器的过程出发,把多字段联动、输入同步、工程化表单设计这几个核心问题逐个拆开讲,顺带记录我在 RK3568 开发板上遇到的坑和解决办法。内容比较长,建议收藏了慢慢看。
1. 为什么在 OpenHarmony 上做 Flutter 项目:平台适配前的现实思考
1.1 这个选题不是拍脑袋,是跨端复用需求倒逼的
先说说为什么选 OpenHarmony 加 Flutter 这个组合。OpenHarmony 作为一个开源操作系统,出现的这些年里,不少团队都有过类似纠结:想覆盖这个平台,但又不想为它单独维护一套原生代码。iOS 一套、Android 一套、OpenHarmony 再一套,三个团队维护三份 UI,成本直接翻倍,这在大多数中小团队里根本不现实。
Flutter 的跨端能力在这里就成了一个很自然的答案。Dart 代码编译后可以直接跑在 OpenHarmony 的 Flutter 引擎上,业务逻辑、UI 布局、状态管理这些代码大部分可以复用。我选择做一个长度单位转换器,不是为了“玩具项目”,而是要验证一条完整链路:Flutter 工程在 OpenHarmony 上能不能正常构建、真机运行效果如何、以及 Flutter 的表单控件和输入框架在这个新平台上有没有什么水土不服。
更重要的是,这个项目麻雀虽小,五脏俱全。它包含了表单输入、实时校验、多字段联动、单元测试这几个 Flutter 开发里的核心能力点。拿它当试点,比一上来就迁移一个大型业务应用要稳妥得多。
1.2 OpenHarmony 开发环境配置:安装配置里最容易被绊倒的三个地方
OpenHarmony 的 Flutter 开发环境,配置流程和标准 Flutter 大同小异,但有几个细节非常容易踩坑,我一个个说。
第一个坑是 Flutter SDK 版本和 OpenHarmony SDK 的匹配问题。不是随便下一个最新的 Flutter 稳定版就能直接开发 OpenHarmony 应用的。OpenHarmony 的 Flutter 适配版通常是基于某个 Flutter 版本 fork 出来的,你需要使用 OpenHarmony 社区提供的 Flutter SDK,或者使用配置了 flutter_ohos 相关仓库的版本。安装完以后一定要跑一遍 flutter doctor,确认 device 和 toolchain 都识别正常。
第二个坑是构建产物的差异。OpenHarmony 应用最终的构建产物不是 APK 或 IPA,而是 HAP(HarmonyOS Ability Package)。这就意味着你在执行构建命令时,不能直接用传统的 flutter build apk 流程,而是要使用适配 OpenHarmony 的构建命令,比如 flutter build hap 或者通过 DevEco Studio 配合 Flutter 插件来打 HAP 包。这个步骤在官方文档里写得比较分散,我第一次构建的时候在 Gradle 配置上卡了很久,后面第 6 节会详细讲我当时遇到的报错。
第三个坑是设备连接方式。OpenHarmony 真机调试一般使用 hdc(HarmonyOS Device Connector)而不是 Android 的 adb。所以你的电脑上需要单独安装 hdc 工具,并配置好环境变量。连接开发板之后,用 hdc list targets 查看设备是否在线。如果设备列表为空,多半是驱动没装好或者开发板的调试模式没打开。
1.3 工程目录结构差异:不要用 Android 的惯性思维看 OpenHarmony 工程
标准的 Flutter 工程目录里,你会看到 android 和 ios 两个平台目录。而 OpenHarmony 版 Flutter 工程中,通常会多出一个类似 ohos 的目录,或者使用 OpenHarmony 的工程模板。这个目录里包含的是 OpenHarmony 应用的配置文件、模块描述等。
刚开始切换到 OpenHarmony 工程时最不习惯的一点是:很多 Android 里能用命令行直接完成的事情,在这里要借助 DevEco Studio 的图形界面完成,比如配置签名、设置 HAP 的 module 信息等。但好在我们日常开发的 90% 场景——写 Dart、调 UI、跑状态管理——是不受影响的,只要构建链路由 Flutter 的 OpenHarmony 工具接管,其他照常开发。
需要模型API调用? 免费领10W Token,多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 长度单位转换器的数据核心:单位体系建模与输入约束设计
2.1 单位之间的本质关系:基准单位加换算因子就够了
长度单位转换这个业务,表面上看起来公式很多:米和千米差 1000 倍,英里和公里是 1.609344 倍,英尺是 0.3048 米……但这些公式背后有一个共同的结构——几乎所有长度单位都可以通过一个“基准单位”来统一换算。我选择以米为基准单位,其他所有单位都只存一个 factorToBase 换算因子:
dart复制class UnitDef {
final String symbol; // 单位符号:mm、cm、m、km、in、ft、yd、mi
final double factorToBase; // 1 个当前单位 = factorToBase 米
const UnitDef(this.symbol, this.factorToBase);
}
const unitDefs = [
UnitDef('mm', 0.001),
UnitDef('cm', 0.01),
UnitDef('m', 1),
UnitDef('km', 1000),
UnitDef('in', 0.0254),
UnitDef('ft', 0.3048),
UnitDef('yd', 0.9144),
UnitDef('mi', 1609.344),
];
这样的设计有几个好处。第一,新增单位只需要加一行配置,不需要动任何换算逻辑,从米换算到任意单位都是一条公式:baseValue = inputValue * factorToBase,反向就是除以因子。第二,避免了单位之间两两换算的组合爆炸,不需要维护一张 8x8 的换算表。第三,出 bug 的几率低,你只需要保证每个单位到基准单位的因子是对的,而不需要担心 A 到 B、B 到 C 的链条误差累积。
2.2 小数、负号、空输入:输入框的规则必须一开始就定死
表单输入设计里最忌讳的是“用户随便输,代码到处兜底”。这次我对输入框的规则做了三层约束:
第一层是输入过滤器层。我在 TextInputFormatter 里拦截非法字符,只允许输入数字、一个小数点和一个可选的负号:
dart复制TextInputFormatter.withFunction((oldValue, newValue) {
final regex = RegExp(r'^-?\d*\.?\d*$');
return regex.hasMatch(newValue.text) ? newValue : oldValue;
});
这样用户根本输不进去字母、空格和特殊符号,比输入之后再弹错误提示舒服得多。
第二层是解析层。用户输入 -、1.、.5 这些“半成品”字符串时,直接 double.tryParse 会得到 null 或者异常。我的处理方式是:解析失败时保持当前字段不变,也不触发联动更新,等其他字段继续显示上一次的有效转换结果。这个策略非常关键,稍后在第 4 节还会展开。
第三层是格式化层。转换结果算出来以后,不能直接拿 toString() 往输入框里塞,不然会出现 0.30000000000000004 这种浮点位错。我会用 toStringAsFixed 去掉多余的尾数,再用正则去掉末尾多余的零:
dart复制String formatNumber(double value) {
if (value == value.roundToDouble()) {
return value.toStringAsFixed(0);
}
final text = value.toStringAsFixed(6);
return text.replaceFirst(RegExp(r'\.?0+$'), '');
}
2.3 精度问题:double 够用,但别把显示和运算混为一谈
长度转换这个场景,double 的精度是完全够用的,毕竟用户不可能真拿 0.123456789 米去量东西。但有两个地方要特别注意。
一是不要在显示层做精度运算。每次用户输入变化都重新从原始输入解析,再通过基准单位换算到其他单位,而不是拿上一次的显示结果继续乘除。连续运算会把浮点误差越滚越大,比如 0.1 * 1000 * 1000 得 100000.00000000001,显示出来非常难看。
二是要注意舍入时机。我在计算时保留 double 原始精度,只在显示层格式化到 6 位小数。这样既保证了换算的准确性,又避免了界面上出现一长串小数。
3. 多字段联动设计:从 Controller 监听走向单一数据源
3.1 每个输入框一个监听器为什么必然失控
我最开始做这个项目时,用的是最朴素的办法:给每个 TextField 挂一个 onChanged,监听哪个字段变了就把其他字段挨个更新一遍。
听起来没问题,但很快会遇到一个经典死循环:用户在“米”输入 1,onChanged 触发,更新“千米”为 0.001;“千米”的 onChanged 又自动触发,把“米”更新回 1;“米”的 onChanged 再次触发……在 Flutter 里,如果你直接在 onChanged 里用 controller.text = ... 更新另一个输入框,而另一个输入框的监听器又反过来更新当前输入框,轻则光标乱跳,重则界面卡死、数据在两个值之间反复横跳。
这就是典型的“多数据源互相驱动”引发的同步风暴。每个输入框都把自己当成数据源,要么是 A 说了算,要么是 B 说了算,结果谁都不服谁。
3.2 单一数据源加重算:联动逻辑的正确打开方式
要打破这个局面,必须把架构改成“单一数据源派发”。也就是说,不管用户在哪个输入框敲了数字,都先从那个输入框解析出一个基准值(米),然后基于这个基准值重新计算所有其他输入框的值。
我把这套逻辑封装到一个 UnitConverterController 里,它继承自 ChangeNotifier,持有所有 TextField 的 TextEditingController,并对外提供一个统一的入口方法:
dart复制class UnitConverterController extends ChangeNotifier {
final List<String> unitIds;
final Map<String, TextEditingController> _controllers = {};
bool _isSyncing = false;
double? _lastValidBaseValue;
void onInputChanged(String sourceId, String raw) {
if (_isSyncing) return;
final baseValue = parseToBase(sourceId, raw);
if (baseValue == null) {
// 输入处于中间状态,暂时不联动
return;
}
_lastValidBaseValue = baseValue;
_syncAllTargets(sourceId, baseValue);
}
void _syncAllTargets(String sourceId, double baseValue) {
_isSyncing = true;
try {
for (final unitId in unitIds) {
if (unitId == sourceId) continue;
final converted = baseValue / unitDefFor(unitId).factorToBase;
final text = formatNumber(converted);
_controllers[unitId]?.value = TextEditingValue(
text: text,
selection: TextSelection.collapsed(offset: text.length),
);
}
} finally {
_isSyncing = false;
}
notifyListeners();
}
}
_isSyncing 这个标志位是防循环的重中之重。在批量更新其他字段期间,置为 true,这样即使某个字段的监听器被触发,进到 onInputChanged 一看 _isSyncing 是 true 就立刻返回,不会再去反向更新源头。等这一轮同步结束再恢复 false。
3.3 防循环同步的三个手段:重入标志、值比较、光标保护
上面代码里的 _isSyncing 是第一个手段,叫“重入标志”。实际项目中还会叠加另外两个保险。
第二个手段是“值比较”。即使 _isSyncing 标志位因为某些异常没能拦住重入,每次更新目标字段之前,先比较一下新算出来的值和当前值是否相同,如果相同就直接跳过 TextEditingController.value 的赋值。这样可以减少无谓的 setState 和重建。
第三个手段是“光标保护”。程序化更新 TextField 的文本时,如果直接写 controller.text = convertedText,Flutter 会默认把光标丢到文本开头,体验非常糟。正确的做法是用 TextEditingValue 同时指定文本和光标位置。
dart复制controller.value = TextEditingValue(
text: text,
selection: TextSelection.collapsed(offset: text.length),
);
这行代码在批量同步时尤其重要,因为目标输入框通常是聚焦状态(用户正在这个框里输入并触发联动),如果把光标扔到开头,用户还没输完的数字会瞬间变得无法继续编辑。
3.4 焦点问题:联动更新会不会抢走当前输入框的焦点
做多字段联动时还有一个隐藏问题:当你更新其他 TextField 的文本时,会不会触发焦点转移?答案是不会。TextEditingController.value 的赋值只改变文本内容,不会改变系统的焦点归属,只要你不主动调用 FocusScope.of(context).requestFocus,当前输入框的焦点就是安全的。
但如果你的联动逻辑里包含“输入完成后自动跳转下一个输入框”这类需求,那就需要额外管理 FocusNode 的链表关系了。我在这个项目里没有做自动跳焦,因为长度转换器的场景是用户可能会来回切换不同单位输入框,而不是一行接一行地顺序填写。
4. 输入同步的实战细节:onChanged、格式化与焦点体验
4.1 onChanged 还是 controller listener:实时转换场景怎么选
Flutter 里监听输入变化有两种主流方式:TextField.onChanged 回调和 TextEditingController.addListener。
在这个项目里我选择了 onChanged。原因是它的回调参数直接给最新的字符串,不需要再从 controller 里读一次。更重要的是,onChanged 只在用户真正改变文本时触发,而 controller listener 会在 controller.value 被程序化修改时也触发。虽然我用 _isSyncing 挡住了大部分重入,但减少触发链路本身就是一种降低心智负担的手段。
实际开发中,我的原则是:如果 UI 只需要输入框的最新值,用 onChanged;如果需要在输入框之外的地方(比如搜索框配一个清空按钮)监听并控制 controller 的赋值,用 addListener。两者可以混用,但一定要搞清各自的触发时机,否则很容易写出“监听器里改 controller 又触发监听器”的嵌套地狱。
4.2 程序化更新 TextField 时如何保住光标位置
这一节值得单独拎出来说,因为很多初学者在这里吃了哑巴亏。现象是:用户输入很顺畅,但一旦程序自动更新了其他输入框,自己正在输入的这个框里光标会莫名跳到最前面,输入顺序完全被打乱。
原因就是我在 3.3 里提到的 TextEditingController.value 赋值没有指定 selection。默认情况下,文本变化后光标会重置。解决办法就是那句 TextSelection.collapsed(offset: text.length)。
不过如果你处理的是“当前输入框自身格式化”的场景,比如用户输入 1234567.89,你希望自动把它格式化成 1,234,567.89,那就不能简单地把光标丢到结尾了。此时要记录用户原来光标的位置,计算新文本和旧文本的前缀匹配长度,再把光标尽量保持在原相对位置上。这个属于更进阶的输入格式化,本次项目没有用到,但思路供后面做金额输入框的朋友参考。
4.3 输入过程中的“半成品”状态:解析不到就保持原值
这个点是我在整个项目里踩得最深的坑之一。用户输入一个数字不是一蹴而就的,他可能先输入 1.,再输入 1.5;可能先输入 -,再输入 -3。你在 onChanged 里拿到的中间字符串,比如 1.、-、.,用 double.tryParse 解析出来全是 null。
如果解析到 null 就清空所有其他输入框,界面会疯狂闪烁:用户输入 1. 的瞬间,其他单位全空了;输入 1.5 之后,其他单位又瞬间跳出一堆数字。这种“闪空”体验非常差。
我的策略是:解析失败时保持其他输入框不变,等待下一个有效输入。只有解析成功才做联动更新。同时,维护一个 _lastValidBaseValue,用户清空当前输入框时,其他单位可以保持住上一次的换算结果,不会全部归零。只有当用户明确输入了新的有效数字时,才重新换算。
这样就实现了“稳定的联动”:有效输入立刻响应,无效输入不打扰,清空不造成全盘归零。这套逻辑在真实 App 里非常有用,比如计算器、汇率转换、尺寸测量工具,几乎都是这个套路。
4.4 Form 校验与实时联动如何共存
Flutter 自带的 Form 和 TextFormField 有很强的校验能力,但很多人发现,Form 的校验逻辑和实时联动放在一起很容易打架:Form 的 validator 是在保存或手动触发 formKey.currentState.validate() 时才执行,而实时联动是在每次输入变化时执行,两个机制同时存在会让人困惑。
我的做法是:用 Form 管理那些“必须在提交时才知道对不对”的校验,比如“总长度不能超过 99999999”这种业务规则;而输入格式合法性的判断,完全交给 TextInputFormatter 在输入层拦截,不进入 Form 的 validator。这样分工明确:输入层过滤器保证“能输入什么”,业务层 validator 保证“输入了什么才合法”。
5. 工程化表单设计:让转换器不只服务于长度单位
5.1 用字段配置表驱动表单生成,而不是手写 8 个 TextField
如果这个项目只做长度单位,写死 8 个 TextField 也就罢了。但工程化的思维是:今天能接长度,明天就能接重量、温度、面积,到时候难道要复制粘贴再改一遍?
我用的方案是“配置驱动”。把每个单位的元信息定义成配置项,用 ListView.builder 按配置动态生成输入行:
dart复制ListenableBuilder(
listenable: _controller,
builder: (context, _) {
return ListView.builder(
itemCount: _controller.unitIds.length,
itemBuilder: (context, index) {
final unitId = _controller.unitIds[index];
final spec = unitSpecFor(unitId);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: TextField(
controller: _controller.controllerFor(unitId),
keyboardType: const TextInputType.numberWithOptions(decimal: true, signed: true),
inputFormatters: [numberInputFormatter],
decoration: InputDecoration(
labelText: spec.symbol,
suffixText: spec.name,
border: const OutlineInputBorder(),
),
onChanged: (value) => _controller.onInputChanged(unitId, value),
),
);
},
);
},
)
这样做的好处非常多:新增一个单位,只需要在配置列表里加一行 UnitDef('海里', 1852),UI 自动多出一行输入框,逻辑代码一行都不用动。删除单位也是一样。整个表单的行数、顺序、标签,全部由数据驱动。
5.2 抽象 UnitFamily:长度、重量、温度之间的扩展设计
真正让表单体系具备通用性的,是抽象出“单位族”这个概念。长度单位族是线性换算,每个重量单位(千克、磅、盎司)和温度单位(摄氏度、华氏度、开尔文)则各有各的特点——温度不是纯倍数换算,摄氏度到华氏度要加一个偏移量。
因此我定义了一个抽象接口:
dart复制abstract class UnitFamily {
String get name;
List<UnitSpec> get units;
double toBase(double value, String unitId); // 从指定单位换算成基准单位
double fromBase(double baseValue, String unitId); // 从基准单位换算成指定单位
}
长度、重量、温度分别实现这个接口。UnitConverterController 不关心后面是什么单位族,它只面向 UnitFamily 编程。当你切换单位族时,只需要把 controller 内部的 unit family 换掉,表单自动重建,联动逻辑完全复用。
这也是为什么我强调“工程化表单设计”而不只是“画几个输入框”——真正的工程化,是让 View 层、Controller 层、领域模型层各司其职,彼此独立又通过接口协作。这样后续无论是接面积、体积还是速率转换,都只写一个新的 UnitFamily 实现类就够了。
5.3 状态管理与依赖取舍:不引 Bloc 也能做好这件事
关于状态管理,项目里我只用了 Flutter 原生的 ChangeNotifier 加 ListenableBuilder,没有引入 Provider、Riverpod、Bloc 这些重量级框架。
原因很直接:这个场景的状态是“多字段联动”,本质上是一个中等复杂度的内部状态控制器。ChangeNotifier 能天然表达“数据变化了,通知所有监听它的 Widget 重建”这个意图,代码量少,也没有多余的样板代码。引入 Bloc 反而要写一堆 Event、State、Bloc 类的映射,对这个体量的项目来说纯属过度设计。
当然,如果你所在团队已经全面使用 Riverpod 或 Bloc,把这个 UnitConverterController 包一层也不是什么难事。我比较建议的方式是:核心的“单一数据源重算”逻辑放在一个纯 Dart 类里,不依赖任何 Flutter 框架,这样无论你用哪种状态管理方案,都能挂载上去。
5.4 键盘弹起与底部弹窗:被很多人忽略的输入体验细节
表单里只要有 TextField,就逃不开键盘遮挡的问题。普通页面还好,键盘弹起时 Scaffold 默认会 resizeToAvoidBottomInset,把可滚动区域往上顶。但如果你在 showModalBottomSheet 里放 TextField,底部弹窗会被键盘顶出屏幕,或者出现输入框被挡住的情况。
当时我为了做单位选择的底部弹窗,调试了半天。最终方案是给 showModalBottomSheet 设置 isScrollControlled: true,然后在弹窗内容外层包一个 Padding,用 MediaQuery.of(context).viewInsets.bottom 作为下边距,确保键盘弹起时弹窗内容能完整显示:
dart复制showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (context) => Padding(
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
child: _UnitPickerSheet(),
),
);
这个细节很多人容易忘,但它直接决定了用户在底部弹窗里输入单位名称或数值时会不会被键盘挡住。表单工程化从来不只是逻辑拆分,交互体验同样重要。
6. OpenHarmony 打包与真机适配:RK3568 上的实测记录
6.1 默认 Android 构建脚本与 OpenHarmony 的冲突怎么解决
把 Flutter 工程往 OpenHarmony 设备上部署时,第一个拦路虎就是构建系统的冲突。社区里常见的两个报错,一个是:
code复制You are applying Flutter's main Gradle plugin imperatively using the apply script method...
另一个是:
code复制Flutter error resolving plugin [id: 'dev.flutter.flutter-plugin-loader', version: '...']
这两个问题的根源都在于:OpenHarmony 工程的 Gradle 构建脚本原本是给 Android 生态设计的,而 OpenHarmony 的 Flutter 工具链在解析依赖时,会去加载 Flutter Gradle 插件。当你在 build.gradle 里用 apply 按脚本方式命令式地应用插件,或者插件解析仓库配置缺失时,就会报出这类错误。
我的解决思路有两步:
- 检查工程的根
build.gradle,把 Flutter Gradle 插件的应用方式改成声明式插件 DSL,并在settings.gradle的pluginManagement.repositories里加上所需的仓库地址。 - 如果确认配置无误,就清理 Gradle 缓存,重新拉取依赖,避免旧缓存里残留了不兼容的插件元数据。
这类问题没有放之四海而皆准的代码片段,因为 OpenHarmony 的 Flutter 适配工具链版本迭代很快。我的建议是:优先使用官方模板创建工程,不要手动从 Android 工程改造过来,官方模板里已经把常见的版本匹配问题处理好了。
6.2 RK3568 和 RK3588 设备树怎么选、devudid 和 serial 怎么拿
说到 OpenHarmony 真机测试,很多开发板玩家都遇到过这个困惑:RK3568 明明只有一块板,为什么设备树文件却有一堆?什么 evb1、evb2、rockchip 参考设计、第三方定制版,每个厂商的板子布局和硬件配置各不相同,选错了设备树,轻则屏幕不亮、外设不识别,重则直接起不来系统。
我的经验是:先别管设备树文件名长什么样,先确定你手里开发板的具体型号和厂商,然后去 OpenHarmony 官方 kernel 或 vendor 仓里找对应厂商的配置文件。比如 RK3568 的标准 OpenHarmony 版本里,最常见的几个设备树是根据不同开发板定制版命名的。如果你不知道手头板子的具体型号,可以先烧一个通用镜像,进入系统后用 hdc shell 查看 /proc/device-tree/model 文件:
bash复制hdc shell cat /proc/device-tree/model
这个文件的内容会直接告诉你当前运行的内核认为这块板子是什么型号,然后反向去查对应的设备树配置即可。
另外,调试 OpenHarmony 开发板时经常需要区分设备标识。devudid 是 OpenHarmony 设备的唯一标识,类似 Android 的 Android ID,获取方式一般是:
bash复制hdc shell bm get -u
serial 序列号则可以通过:
bash复制hdc shell param get const.product.serialnumber
或者直接在系统设置里的“关于本机”查看。这两个标识在申请调试证书、绑定设备白名单的时候经常要用到,建议一开始就记下来。
6.3 主题色与图标库的适配:showLicensePage 和 lucide 图标
真机跑起来之后,我又遇到一个开屏级的问题:用 showLicensePage 展示开源协议时,页面配色和整体主题不一致,看起来特别突兀。研究后发现,showLicensePage 在 OpenHarmony 的 Flutter 引擎里会读取当前应用的 ThemeData.colorScheme。所以只需要在 MaterialApp 里设置好全局主题,就能让它自动统一:
dart复制MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
),
...
)
另外,OpenHarmony 生态里有一个官方维护的 Lucide 图标库,补全了系统自带 Material Icons 里的部分缺失图标。我把它集成到了项目的依赖里,用起来和普通 Flutter 包没什么区别,在 pubspec.yaml 声明依赖后,直接 import 就能用。它比手写一堆 SVG 路径要省事得多,而且图标的风格统一,观感很好。
6.4 低配开发板上的性能表现:纹理内存和首帧渲染的优化建议
OpenHarmony 的开发板配置差距很大,从 RK3568 到 RK3588 性能差了好几倍。我的实际感受是:RK3568 上跑 Flutter 应用,基础 UI 渲染没问题,但在纹理内存和列表滚动上会感觉到明显的压力。
针对这种情况,我有三个优化建议。第一,减少阴影和模糊特效的使用,这些效果在 GPU 不强的板子上会拖慢帧率。第二,对静态列表项使用 const 构造函数,减少不必要的 rebuild。第三,如果列表内容很多,考虑用 ListView.builder 懒加载,而不是一次性把所有行都 build 出来。这些优化在模拟器上可能看不出差别,但在 RK3568 这种入门级开发板上,体感差异非常明显。
最后再分享几个实际调试中的小技巧
整个项目做下来,有几个零散的经验我觉得比代码本身更有价值,就放在最后说。
第一个是关于“多字段联动”调试的。如果你发现某个输入框在联动时值不对,先不要急着改换算公式,先确认是不是 _isSyncing 标志位没有正确复位。我在开发中遇到过一种情况:某次更新中抛了个异常,导致 finally 块没执行,_isSyncing 一直停留在 true,之后所有联动都失效了。所以我会在 notifyListeners() 之后打印一次当前 baseValue,快速定位问题。
第二个是关于“输入同步”测试的。不要光在模拟器里手点点点,建议写几个单元测试覆盖最核心的换算场景:1 米 = 1000 毫米、1 英里 = 1609.344 米、输入 0.1 米时其他单位的显示值是否等于 0.1 对应的换算。这些测试能帮你守住精度和联动逻辑的底线。
第三个是关于“工程化表单”的后续扩展空间。我目前已经做了长度、重量、温度三个单位族,接面积、体积、速率时只需要新增一个 UnitFamily 实现类,加配置,表单 UI 不需要改动。如果你也想做一个全能的单位转换器,我的建议是先把这个架构搭好,单纯堆单位是没有技术含量的。
做这个项目的过程中,我最大的体会是:越是看起来简单的功能,越能暴露对状态管理、输入交互和工程抽象的理解深度。一个长度单位转换器在代码量上可能只有几百行,但如果你认真对待它,它能教给你的东西,远远超过几百行这个数字。
