#创作者激励##深入浅出学习eTs#(二十)“活性”组件 原创 精华
程皖Orz
发布于 2023-3-2 23:06
浏览
1收藏
【本文正在参加2023年第一期优质创作者激励计划】
本项目Gitee仓地址:深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com)
一、需求分析
本章节我们来制作一个程序猿笑话,《项目经理要求这里运行缓慢,好让客户给钱优化》,在这里选择使用OpenAtom OpenHarmony新上的一个组件来实现,并且通过动态式更新组件宽度和高度的方式,在同一个页面实现不同的呈现效果
- 页面跳转
- 动态调整组件
- 实现反应快慢的调节
- 本章节于#深入浅出学习eTs#(七)判断密码是否正确上修改
二、控件介绍
(1)LoadingProgressOpenAtom OpenHarmony
用于显示加载进展。
说明:
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
接口
LoadingProgress()
创建加载进展组件。
属性
名称 | 参数类型 | 描述 |
---|---|---|
color | ResourceColor | 设置加载进度条前景色。 |
// xxx.ets
@Entry
@Component
struct LoadingProgressExample {
build() {
Column({ space: 5 }) {
Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
LoadingProgress()
.color(Color.Blue)
}.width('100%').margin({ top: 5 })
}
}
(2)页面路由
- 本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。
- 页面路由需要在页面渲染完成之后才能调用,在onInit和onReady生命周期中页面还处于渲染阶段,禁止调用页面路由方法。
1、导入模块
import router from '@ohos.router'
2、router.push(跳转到应用内的指定页面。)
router.push({ // 使用push入栈一个新页面
url: "pages/USED" // 通过url指定新打开的页面
})
3、router.replace(用应用内的某个页面替换当前页面,并销毁被替换的页面)
// 在当前页面中
export default {
replacePage() {
router.replace({
url: 'pages/detail/detail',
params: {
data1: 'message',
},
});
}
}
4、router.back(返回上一页面或指定的页面)
export default {
indexPushPage() {
router.push({
url: 'pages/detail/detail',
});
}
}
(3)定时器实现
private Run_Get() {
var T = setInterval(() => {
if (this.Num == 0) {
clearTimeout(T)
}
}, 1000)
}
三、UI设计
(1)动态组件
这里选择使用变量来充当组件宽度和高度的方式,首先新建变量
@State LO_H: string = '400'
@State LO_W: string = '400'
@State SEC: number = 5
@State B_H: string = '0'
@State B_w: string = '0'
此时在页面内放置一个LoadingProgress和一个Text
Row() {
Column({ space: 5 }) {
Text("欢迎VIP用户")
.fontSize('50')
.width(this.B_H)
.height(this.B_w)
LoadingProgress()
.color(Color.Blue)
.width(this.LO_H)
.height(this.LO_W)
}.width('100%').margin({ top: 5 })
}
.height('100%')
(2)放置定时器
private Run_Get() {
var T = setInterval(() => {
if (this.SEC == 0) {
this.LO_H = '0';
this.LO_W = '0';
this.B_H = '200';
this.B_w = '200';
clearTimeout(T)
}else
{
this.SEC -= 1;
}
}, 1000)
}
onPageShow(){
this.Run_Get()
}
在5s后,实现一个TXT文档显示
(3)页面跳转
if(this.QQ == "11066")
{
this.Password = '登录成功'
router.push({ // 使用push入栈一个新页面
url: "pages/USED" // 通过url指定新打开的页面
})
}else
{
this.Password = '登录失败'
}
四、动态显示
(1)5秒测试
(2)2秒测试
(3)总结
现在程序效率优化了60%,是不是一定会给我涨工资呀
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2023-3-3 10:42:22修改
赞
3
收藏 1
回复
相关推荐
每天一个优化小技巧
满足了技术,产品,客户,三赢!