当前位置:网站首页>【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
边栏推荐
猜你喜欢
随机推荐
Selenium - 如何操作下拉框、弹出框、滚动条?
基于AWS构建云上数仓第二步:AWS常见服务简介
组合模式
Talking about Taishan crowdfunding system development technical description and dapp chain crowdfunding system development analysis
机器人控制器编程实践指导书旧版-实践七 无线通信(网络)
【独立站运营】做社交媒体营销的两大关键点
「业务架构」业务能力的热图是什么,有啥用?
欧洲核子研究中心首次在量子机器学习研究中取得实效
R语言检验时间序列的平稳性:使用fUnitRoots包中的adfTest函数检验时间序列数据是否具有平稳性(设置参数type为nc时、既不去除趋势也不进行中心化处理)
关于奉加微PHY62xx系列如何选型?PHY6222/PHY6212/PHY6252
【图像去雾】基于颜色衰减先验的图像去雾附matlab代码
函数柯里化(curry)
产品说明丨Android端使用MobPush快速集成方法
JNDI and RMI, LDAP
设置iptables规则来保护CS服务器
网络可观测性:让您的网络监控更上一层楼|TechGenix
FFmpeg extract H264 nalu from the mp4
requires ‘angle‘ attribute to be a multiple of 45
20220810
Wuling Hongguang MINI EV, the only drawback is safety