#深入浅出学习eTs#(十一)别忘了吃药喔 原创
程皖Orz
发布于 2022-12-29 10:20
浏览
0收藏
本项目Gitee仓地址:深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com)
一、需求分析
我们本章节要实现一个闹钟功能,实现闹钟定时,提醒大家吃药(最好不需要吃药喔),功能分析:
- 时间选择控件
- 类似手机的闹钟UI
- 滚动条播放消息
- 设定后进行提示
二、控件介绍
这里我们要用到的是时间选择控件:
TimePicker:官方文档
滚动选择时间的组件。
说明: 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
简单使用样例:
Marquee:官方文档
说明: 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
跑马灯组件,用于滚动展示一段单行文本,仅当文本内容宽度超过跑马灯组件宽度时滚动。
接口
Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })
-
参数
参数名 参数类型 必填 默认值 参数描述 start boolean 是 - 控制是否进入播放状态。 step number 否 6 滚动动画文本滚动步长。 loop number 否 -1 设置重复滚动的次数,小于等于零时无限循环。 fromStart boolean 否 true 设置文本从头开始滚动或反向滚动。 src string 是 - 需要滚动的文本。
三、UI设计
(1)背景颜色
我想实现一个纯白好看的界面,这次选择使用灰色打底
并且我们本次要做一个横屏下的开发,如何在预览器中切换横竖屏(看下图)
(2)滚动条
在这里引入了圆角的属性borderRadius:可以把矩形变为圆角矩形,更贴近圆形的UI更符合当前的科技发展与生活
(3)时间选择条
这里放置了提示按钮,中间间距放置了空的内容,后面为时间选择器,之后是之前学过的开关器件
(4)消息提示
我们这里选择使用Toast来实现交互提示
在本系统中,当选择好时间以后,点击开关,此时提示闹钟已经设置好
四、系统演示
如上图,已经实现了全部内容
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
赞
收藏
回复
2
相关推荐
你这个文本宽度,比跑马灯组件小,是怎么实现滚动的
有源码的可以进gitee