ArkTS声明式UI,状态管理,使用声明式语法和组件化基础知识,搭建一个可刷新的排行榜页面。在排行榜页面中,使用循环渲染控制语法来实现列表数据渲染,使用@Builder创建排行列表布局内容,使用装饰器@State、@Prop、@Link来管理组件状态。最后我们点击系统返回按键,来学习自定义组件生命周期函数。
UI描述规范
@Component // 装饰器:装饰类,结构,方法和变量,赋予其特殊的含义
struct ListItemComponent{
@State isChange:boolean = false;
build(){ // UI描述:声明式的方式描述UI结构
Row(){ // 内置组件:系统提供的基础组件和容器组件等,可以直接调用
Text(this.name) // 内置组件
.width(ItemStyle.LAYOUT_WEIGHT_CENTER)
.fontSize(FontSize.MIDDLE)
Text(this.vote)
.width(ItemStyle.LAYOUT_WEIGHT_CENTER) // 属性方法:设置组件的属性
.fontSize(FontSize.SMALL)
}
.height(ItemStyle.BAR_HEIGHT)
.width(WEIGHT)
.onClick(()=>{ // 事件方法:设置组件对事件的响应逻辑
this.isChange = !this.isChange
})
}
}
常用装饰器@Component与@Entry
基础组件:text,button,image,textinput
容器组件:column,row,stack,list
自定义组件
子组件定义名为TitleComponent的自定义组件
@Component
export struct TitleComponent { // export 关键字导出子组件
...
build(){
}
...
}
父组件定义名为PankPage的自定义组件,并在其内部使用到TitleComponent组件
import {TitleComponent } from '../?/view/TitleComponent' // 使用import关键字导入子组件
@Entry
@Component
struct PankPage{
...
bulid(){
Column(){
TitleComponent() // 在Column 容器中,引入子组件
}
}
}
通过使用 @Component 的装饰器和 struct 关键字
struct是组件的数据结构
@Component装饰的struct表示该结构具有组件化能力,能够成为一个独立的组件
自定义组件必须定义
build方法,在其中进行UI描述
@Entry装饰的自定义组件用作页面的默认入口组件,加载页面时,将首先创建并呈现@Entry装饰的自定义组件
一个页面有且仅能有一个@Entry,只有被@Entry修饰的组件或者其子组件才会在页面上显示
自定义组件生命周期回调函数
页面跳转案例
import router from '@ohos.router'
@Entry // 装饰器 默认入口组件
@Component // 组件 万物皆组件
struct First {
// @State message: string = 'Hello World' // 变量
build() { // 构建界面的 dom js css 都在这里面 必须有一个根容器组件
Column(){
Text('鸿蒙harmony学习')
.fontSize(30)
Button('提交')
.width('50%')
.height(30)
.onClick(()=>{
// 去index页面
router.pushUrl({
url:'pages/Index'
})
})
}
.width('100%')
.height('100%')
}
}