当前位置:网站首页>【ARK UI】HarmonyOS ETS的引导页的实现
【ARK UI】HarmonyOS ETS的引导页的实现
2022-08-10 17:45:00 【华为开发者论坛】
参考资料
代码实现
1、准备资料,准备三个引导图片
2、绘画ETS的布局
新建一个WelcomePage的page界面,在改ETS文件添加引导页和启动按钮,具体注释事件,代码如下
import router from '@system.router';@[email protected] WelcomePage { private swiperController: SwiperController = new SwiperController()/** * 控制启动按钮显示还是隐藏 */ @State flag:boolean=false; build() { Column({ space: 5 }) { Stack({ alignContent: Alignment.TopEnd }) { Swiper(this.swiperController) { //todo 引导页图片内容 //todo 引导页一 Stack({ alignContent: Alignment.Center }){ Image($r("app.media.icon")).width(100).height(100) Text("引导页一").fontSize(20).fontColor(Color.White).margin({top:150}) }.width('100%').height("100%").backgroundColor(Color.Red).align(Alignment.Center) //todo 引导页 二 Stack({ alignContent: Alignment.Center }){ Image($r("app.media.icon")).width(100).height(100) Text("引导页二").fontSize(20).fontColor(Color.White).margin({top:150}) }.width('100%').height("100%").backgroundColor(Color.Orange).align(Alignment.Center) //todo 引导页三 Stack({ alignContent: Alignment.Center }){ Image($r("app.media.icon")).width(100).height(100) Text("引导页三").fontSize(20).fontColor(Color.White).margin({top:150}) }.width('100%').height("100%").backgroundColor(Color.Green).align(Alignment.Center) } .index(0)//todo 当前索引为0 开始 .autoPlay(false)//todo 停止自动播放 .indicator(true) // todo 默认开启指示点 .loop(false) // todo 停止自动播放 默认开启循环播放 .vertical(false) //todo 横向切换 默认横向切换 .onChange((index: number) => { /** * 根据Index 进行判断 当引导页播放到最后一个页面时候 * 让启动按钮显示 否则的话 不显示 */ if(index==2){//todo 最后一个 设置flag 为true this.flag=true }else{//todo 不是最后一个 设置flag为false this.flag=false } }) if(this.flag)//todo 当flag 为true 则显示启动按钮 为false的时候不显示 Text('启动').width('300px').height('150px') .textAlign(TextAlign.Center).fontSize(20) .backgroundColor(Color.White) .margin({right:20,top:20}) .onClick(function(){//todo 实现按钮点击事件 进入到主界面 router.push({ uri:"pages/index" }) }) } } }}
运行效果
欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh
边栏推荐
猜你喜欢
【接入指南 之 直接接入】手把手教你快速上手接入HONOR Connect平台(上)
机器人控制器编程实践指导书旧版-实践四 步进电机(执行器)
Toronto Research Chemicals萜烯分析丨(+)-柠檬烯
CDH6.3.2之Kerberos安全认证_大数据培训
瑞虎8 PRO产品性能分析,一文读懂究竟何为“全域动力科技旗舰”
Toronto Research Chemicals BTK抑制剂丨ACP-5197
Word里表格跨页时自动断开,表格后留有空白部分,未布满整页,如何操作让表格上下页均匀布满?
FFmpeg extract H264 nalu from the mp4
烟雾、空气质量、温湿度…自己徒手做个环境检测设备
Talk about cloud native data platform
随机推荐
装饰者模式
[JMeter]Beanshell解析Json格式的接口响应数据
兼具外观、性能、屏幕!华硕灵耀X 14火热抢购中
【2015】【论文笔记】等离子光混合器THz辐射的光谱——
const的自己理解
老板加薪!看我做的WPF Loading!!!
【接入指南 之 直接接入】手把手教你快速上手接入HONOR Connect平台(中)
背景视频铺满盒子
FlexSim仿真软件入门笔记:基本操作、快捷键
Toronto Research Chemicals萜烯分析丨反式植物醇
Making Pre-trained Language Models Better Few-Shot Learners
【燃】是时候展现真正的实力了!一文看懂2022华为开发者大赛技术亮点
文档标题能否支持公式
三坐标雷达显示软件 SPx Viewer-3D
R语言ggplot2可视化:使用ggpubr包的text_grob函数和as_ggplot函数可视化文本段落(将指定文本段落可视化出来、指定文本段可视化为图像)、face参数指定文本的字体样式
验算移位距离和假设的通用性
Toronto Research Chemicals萜烯分析丨(+)-柠檬烯
Allegro软件Shape菜单下的每个命令的含义
欧洲核子研究中心首次在量子机器学习研究中取得实效
微服务架构-实现技术之六大基础组件:服务通信+事件驱动+负载均衡+服务路由+API网关+配置管理