更多内容请访问:鸿蒙科技社区,与华为官方共建https://ost.51cto.com1.目标是利用OpenHarmony小系统支持的基础控件,实现一个类似toast提示的组件,toast组件会在指定时间消失隐藏。2.背景在OpenHarmony标准系统上,有一个系统提示符@system.prompt。在标准系统中,提示可以设置相应的参数来实现提示的显示内容和持续时间。代码如下:importpromptfrom'@system.prompt'exportdefault{visibilitychange(e){prompt.showToast({message:'提示信息',duration:3000,});},}message:要显示的提示内容。duration:显示时长,到达设定时间后提示视图消失。目前,小型系统上没有@system.prompt功能。目前的需求是在L1设备上实现类似提示信息提示的功能。我们先称它为吐司吧。3、环境设备:君正x2000开发板。系统:OpenHarmony3.0.0.0(LTS)。四、效果1、视频效果效果视频请前往:吐司视频。2.效果截图5.实现思路从效果图中我们可以看出toast信息提示视图可以有以下特点:可以单行或者多行显示提示信息(目前支持两行,可以自行修改自己多行)。显示超出限制范围后用“...”截取。根据需求,提示视图可以在指定时间内自动消失。快速切换不同提示内容时,显示最后触发的提示信息。提示视图显示在界面底部附近。工具提示的文本在半透明的黑色背景上是白色的。分析:在小系统支持的基础容器中。提示信息显示在最上层,容器可以通过stack进行堆叠,将要显示的内容封装在一个div容器中,最后添加到stack容器中。使用定时器:setTimeout设置提示视图在到达指定时间后隐藏。提示内容通过文本实现;4、半透明圆角背景可以通过设置文字的背景颜色和样式border-radius的角度值来实现。建议在定时器执行完成后清除定时器:clearTimeout(this.timer)。6、完整代码说明:组件代码包括html、css、js三部分。因为代码比较简单,就不写注释了。
