OpenHarmony JS UI小型系统自定义控件(3)—toast提示 原创 精华
NL_AIDC_XJS
发布于 2022-4-2 15:23
浏览
3收藏
一、目标
使用OpenHarmony 小型系统支持的基础控件实现类似toast提示组件,在指定时间toast组件消失隐藏。
二、背景
在OpenHarmony 标准系统上有系统提示@system.prompt,在标准系统中prompt可以设置相应的参数实现提示的显示内容和时长,代码如下:
- message:需要展示的提示内容
- duration:显示时长,到达设置的时间后提示视图消失
目前在小型系统上没有@system.prompt能力,目前的需求是在L1设备上实现类似于prompt信息提示的功能,我们先称其为toast。
三、环境
设备:君正x2000开发板
系统:OpenHarmony 3.0.0.0(LTS)
四、效果
4.1视频效果
效果视频请移步:toast视频
4.2效果截图
五、实现思路
从效果图中我们可以看出,toast信息提示视图可以有以下几个特点:
1、可以单行或多行(目前支持两行,可以自行修改多行)显示提示信息;
2、显示超出限制范围后使用"…"进行截取;
3、根据需求可以在指定时间内自动消失提示视图;
4、快速切换不同提示内容时,显示最后一次触发的提示信息;
5、提示视图在界面靠近底部的位置显示;
6、提示信息的文本为白色,背景为半透明的黑色。
分析:小型系统所支持的基础容器中
1、提示信息显示在最上层,可以通过stack堆叠容器,将需要显示的内容使用div容器封装,最后加入stack容器中;
2、使用定时器:setTimeout,到达指定时间后设置提示视图隐藏;
3、提示的内容使用text实现;
4、圆角半透明的背景可以通过设置text的背景颜色和样式border-radius的角度值实现;
5、在定时器执行完成时建议清除定时器:clearTimeout(this.timer);
六、完整代码
说明:组件的代码包括三个部分:hml、css、js,因为代码比较简单,所以没有写注释,如果有不明白的地方可以留言。
七、感谢
如果您能看到最后,还希望您能动动手指点个赞,一个人能走多远关键在于与谁同行,我用跨越山海的一路相伴,希望得到您的点赞。
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-4-6 08:47:57修改
赞
5
收藏 3
回复
5
1
3
相关推荐
楼主最近产能爆表了