【鸿蒙HarmonyOS学习笔记-04-ArkTS基础知识-01】_arkts 自定义组件生命周期

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
		})
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

常用装饰器@Component与@Entry

基础组件:text,button,image,textinput
容器组件:column,row,stack,list

自定义组件

子组件定义名为TitleComponent的自定义组件

@Component
export struct TitleComponent {   //  export 关键字导出子组件
	...
	build(){
	}
	...
}
1
2
3
4
5
6
7

父组件定义名为PankPage的自定义组件,并在其内部使用到TitleComponent组件

import {TitleComponent } from '../?/view/TitleComponent' // 使用import关键字导入子组件
@Entry
@Component
struct PankPage{
	...
	bulid(){
		Column(){
			TitleComponent()   // 在Column 容器中,引入子组件
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11

通过使用 @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%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24