鸿蒙动态组件

一、需求背景

不同用户对同类型的密码文档有不同的输入要求,

例如一个开发服务器可能既想要保存服务器账号密码还想同时存储数据库帐号密码。

因此需要动态地添加输入组件,例如纯数字、日期、邮箱、网站、密码等输入组件。

二、实现过程

在实现动态组件之前,首先需要定义一个用于装载动态组件的变量。

接着,定义一个按钮事件,用于动态更新webFieldList中的组件。

接下来开始享用我们的主食啦,主要的界面代码部分如下:

其中,有一段代码非常重要,客观别急容我慢慢道来。

ForEach(array, itemGenerator, keyGenerator);

首先我在itemGenerator函数声明index参数,这个是用来处理一些需要排序或者密码输入框是否显示或隐藏时用到的,

例如下面这段代码,由于应用支持动态添加多个密码框,在用密码生成器的时候涉及到数值回填以及控制是否展示密码。

然后,我又定义了ForEach的第三个参数------keyGenerator函数,并在其中声明了index参数。

这里所做的,就是定义主键生成器,此时主键的值就是keyGenerator返回值。

因为鸿蒙系统的每个组件在渲染时都需要一个唯一值。如果您不设置生成规则,系统就会按照默认的生成机制去生成。

如果根据默认规则生成的值不是唯一的,就可能导致程序报错或其他不可预期的结果,例如组件位置添加不正确、UI 渲染性能降低等。

我总结了这个机制一共有5条:

1.如果没有定义keyGenerator,那生成规则就是:字符串index + '__' + JSON.stringify(item);

2.如果已定义keyGenerator函数,且keyGenerator函数和itemGenerator函数都未声明index,

那生成规则就是:keyGenerator函数的返回值;

3.如果已定义keyGenerator函数,且keyGenerator函数和itemGenerator函数都已声明index,

那生成规则就是:keyGenerator函数的返回值;(本文案例中的方式,声明了个寂寞除非确实需要用到index)

4.如果已定义keyGenerator函数且已声明index,但itemGenerator函数未声明index,

那生成规则就是:keyGenerator函数的返回值;

5.如果已定义keyGenerator函数且未声明index,但itemGenerator函数已声明index,

那生成规则就是:keyGenerator返回值与index的拼接字符串;(本案例如果采用此方式会导致渲染性能降低)

总而言之,言而总之,这样做的好处就一个字------能让您的应用跑得更快且不出毛病。

鸿蒙8月学习班:https://developer.huawei.com/consumer/cn/training/classDetail/35d902ec70a146f7a922cda1e714a8d8?type=1?ha_source=hmosclass\&ha_sourceId=89000248

相关推荐
2301_822703207 小时前
渐变壁纸生成:基于鸿蒙Flutter的跨平台壁纸创建工具
flutter·华为·harmonyos·鸿蒙
2301_8227032011 小时前
开源鸿蒙跨平台Flutter开发:幼儿疫苗全生命周期追踪系统:基于 Flutter 的免疫接种档案与状态机设计
算法·flutter·华为·开源·harmonyos·鸿蒙
2301_8227032011 小时前
鸿蒙flutter三方库实战——教育与学习平台:Flutter Markdown
学习·算法·flutter·华为·harmonyos·鸿蒙
2301_8227032014 小时前
开源鸿蒙跨平台Flutter开发:蛋白质序列特征提取:氨基酸组成与理化性质计算
flutter·华为·开源·harmonyos·鸿蒙
钛态14 小时前
Flutter 三方库 ethereum_addresses 的鸿蒙化适配指南 - 掌控区块链地址资产、精密校验治理实战、鸿蒙级 Web3 专家
flutter·harmonyos·鸿蒙·openharmony·ethereum_addresses
Industio_触觉智能15 小时前
触觉智能Purple Pi OH开发板已适配OpenHarmony6.1,将作为LTS长期支持版,附API参考说明
鸿蒙·鸿蒙系统·openharmony·lts·开源鸿蒙·鸿蒙开发板·openharmony6.1
2301_8227032017 小时前
鸿蒙Flutter三方库适配:Flutter Markdown适配实战-鸿蒙平台的Markdown渲染解决方案
flutter·华为·信息可视化·开源·harmonyos·鸿蒙·三方库
_waylau18 小时前
鸿蒙架构师修炼之道-B/S与C/S架构
华为·架构·harmonyos·鸿蒙·鸿蒙系统
雷帝木木18 小时前
Flutter 组件 http_interop 的适配 鸿蒙Harmony 深度进阶 - 驾驭多级拦截器链、实现鸿蒙端标准化通讯审计与流量路由中继方案
flutter·harmonyos·鸿蒙·openharmony·http_interop
2301_8227032018 小时前
鸿蒙Flutter第三方库FlutterUnit组件百科适配与具体功能演示
flutter·华为·开源·harmonyos·鸿蒙