ArkTS基础知识【含示例源码】
ArkTS是HarmonyOS的一种应用开发语言,他在TypeScript的基础上,拓展了声明式UI、状态管理等相应的能力,让开发者以更简洁自然的方式开发高性能的应用。
千言万语不胜效果图来的直观,先看下示例的演示效果:
我们以其中一段代码来学习相关知识点:
import {FontSize,FontWeight,ItemStyle,WEIGHT} from '../common/constants/Constants'@Componentexport struct ListItemComponent{ index:number private name:Resource; @Prop vote:string; @Prop isSwitchDataSource:boolean; @State isChange:boolean=false; build(){ Row(){ Column(){ if(this.isRenderCircleText()){ this.CircleText(this.index); }else{ Text(this.index.toString()) .lineHeight(ItemStyle.TEXT_LAYOUT_SIZE) .textAlign(TextAlign.Center) .width(ItemStyle.TEXT_LAYOUT_SIZE) .fontWeight(FontWeight.BOLD) .fontSize(FontSize.SMALL) } } .width(ItemStyle.LAYOUT_WEIGHT_LEFT) .alignItems(HorizontalAlign.Start) Text(this.name) .width(ItemStyle.LAYOUT_WEIGHT_CENTER) .fontWeight(FontWeight.BOLDER) .fontSize(FontSize.MIDDLE) .fontColor(this.isChange?ItemStyle.COLOR_BLUE:ItemStyle.COLOR_BLACK) Text(this.vote) .width(ItemStyle.LAYOUT_WEIGHT_RIGHT) .fontWeight(FontWeight.BOLDER) .fontSize(FontSize.SMALL) .fontColor(this.isChange?ItemStyle.COLOR_BLUE:ItemStyle.COLOR_BLACK) } .height(ItemStyle.BAR_HEIGHT) .width(WEIGHT) .onClick(()=>{ this.isSwitchDataSource=!this.isSwitchDataSource this.isChange=!this.isChange }) } @Builder CircleText(index:number){ Row(){ Text(this.index.toString()) .fontWeight(FontWeight.BOLD) .fontSize(FontSize.SMALL) .fontColor(Color.White); } .justifyContent(FlexAlign.Center) .borderRadius(ItemStyle.CIRCLE_TEXT_BORDER_RADIUS) .size({width:ItemStyle.CIRCLE_TEXT_SIZE,height:ItemStyle.CIRCLE_TEXT_SIZE}) .backgroundColor($r('app.color.circle_text_background')) } isRenderCircleText():boolean{ return this.index===1||this.index===2||this.index===3; }}
@Component 这些带@的叫装饰器,装饰器用来装饰类、结构、方法和变量,赋予其特殊的含义和能力。
@Componet 代表的当前这个是一个自定义组件,组件名字就是ListItemComponent,他是可重用的UI单元,可以与其他组件组合
代码中的@State 也是一种装饰器,被它装饰的变量isChange的值发生变化的时候,就会触发该变量所对应的自定义组件的UI界面进行自动刷新。
build(){....} 是代表对该UI组件的描述,是基于声明式的结构,而它里边的比如 Row(),Text()这些属于内置组件,是系统提供的基础组件和容器组件,可以用来直接使用。
每个组件有自己的属性方法,使用点运算符进行链式调用;通过这些属性方法来设置对应组件的样式,绑定事件等操作。
Text(this.index.toString()) .lineHeight(ItemStyle.TEXT_LAYOUT_SIZE) //属性方法,设置行高 .textAlign(TextAlign.Center)//属性方法,设置文字对齐方式 .width(ItemStyle.TEXT_LAYOUT_SIZE)//属性方法,文本框宽度 .fontWeight(FontWeight.BOLD)//属性方法,设置字体粗细 .fontSize(FontSize.SMALL)//属性方法,设置字体大小
比如Row()组件下的onClick就是事件方法,可以用来实现点击每一样数据的时候来触发调用。
.onClick(()=>{ this.isSwitchDataSource=!this.isSwitchDataSource this.isChange=!this.isChange
在ArkTS中,除了类似,Text、Button、Image、TextInput、Column、Row、Stack、List等等大量的内置组件外,我们为了满足某些效果,结合这些内置组件组合封装后的组件就都称为自定义组件。
我们一般的开发流程是先基于内置组件组合好一些自定义组件,然后再通过组合自定义组件形成一个个完整的页面。
我们自己写的自定义组件在使用上和内置组件是一样的,直接引用就可以了,当一个组件中使用另外一个组件的内容时,这个组件就被称为父组件
/* * Copyright (c) 2022 Huawei Device Co., Ltd. * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */import prompt from '@ohos.prompt';import { RankViewModel } from '../viewmodel/RankViewModel';import { RankData } from '../common/bean/RankData';import { ListHeaderComponent } from '../view/ListHeaderComponent';import { TitleComponent } from '../view/TitleComponent';import { ListItemComponent } from '../view/ListItemComponent';import { APP_EXIT_INTERVAL, Style, TAG, TIME, TITLE, WEIGHT } from '../common/constants/Constants';let rankModel: RankViewModel = new RankViewModel();@Entry@Component//相对于TitleComponent等自定义组件,Index就是父组件struct Index { @State dataSource1: RankData[] = []; @State dataSource2: RankData[] = []; // The State is used to decide whether to switch the data of RankList. @State isSwitchDataSource: boolean = true; // It will record the time of clicking back button of system navigation. private clickBackTimeRecord: number = 0; aboutToAppear() { console.log(`${TAG} aboutToAppear`); this.dataSource1 = rankModel.loadRankDataSource1(); this.dataSource2 = rankModel.loadRankDataSource2(); } aboutToDisappear() { console.log(`${TAG} aboutToDisappear`); } onPageShow() { console.log(`${TAG} onPageShow`); } onPageHide() { console.log(`${TAG} onPageHide`); } onBackPress() { if (this.isShowToast()) { prompt.showToast({ message: $r('app.string.prompt_text'), duration: TIME }); this.clickBackTimeRecord = new Date().getTime(); return true; } return false; } isShowToast(): boolean { return new Date().getTime() - this.clickBackTimeRecord > APP_EXIT_INTERVAL; } build() { Column() { //相对于Index,这个就是子组件 TitleComponent({ isRefreshData: $isSwitchDataSource, title: TITLE }) // The head style of List component. ListHeaderComponent({ paddingValue: { left: Style.RANK_PADDING, right: Style.RANK_PADDING }, widthValue: Style.CONTENT_WIDTH }).margin({ top: Style.HEADER_MARGIN_TOP, bottom: Style.HEADER_MARGIN_BOTTOM }) // The style of List component. this.RankList(Style.CONTENT_WIDTH) } .backgroundColor($r('app.color.background')) .height(WEIGHT) .width(WEIGHT) } @Builder RankList(widthValue: Length) { Column() { List() { ForEach(this.isSwitchDataSource ? this.dataSource1 : this.dataSource2, (item, index) => { ListItem() {ListItemComponent({ index: index + 1, name: item.name, vote: item.vote, isSwitchDataSource: this.isSwitchDataSource}) } }, (item, index) => item.id) } .width(WEIGHT) .height(Style.LIST_HEIGHT) .divider({ strokeWidth: Style.STROKE_WIDTH }) } .padding({ left: Style.RANK_PADDING, right: Style.RANK_PADDING }) .borderRadius(Style.BORDER_RADIUS) .width(widthValue) .alignItems(HorizontalAlign.Center) .backgroundColor(Color.White) }}
如上代码片段,Index就是TitleComponent的父组件,TitleComponent就是Index的子组件,了解父子组件的关系,对我们准确理解和掌握后面的数据绑定,影响关系很重要。
我们上面的Index.ets代码片段中,还使用了@Entry装饰器,被他装饰的自定义组件表示这个组件作为页面的默认入口,加载页面时,将首先创建并呈现@Entry装饰器修改的自定义组件。
一个页面有且仅能有个@Entry。
在代码工程中,自定义组件一般分布在不同的源码文件中,因此为了能够被别的组件引用使用,我们需要在自定义组件的关键字struct 前面使用关键字export来导出组件。在父组件使用子组件是,需要先在文件开头使用import关键字导入子组件,导入方式如下面代码片段:
import { ListHeaderComponent } from '../view/ListHeaderComponent';import { TitleComponent } from '../view/TitleComponent';import { ListItemComponent } from '../view/ListItemComponent';
下面我们再了解下自定义组件的生命周期相关内容。
自定义组件生命周期函数有:自定义组件的创建=>aboutToAppear()=> aboutToDisappear(),=>自定义组件销毁,我们通过两个生命周期回调函数,用于通知开发者当前组件所处的阶段。
在aboutToAppear中,我们可以用来初始化UI需要展示的数据,或者申请定时器资源等操作,这样在后续build函数中可以使用这些数据和资源来进行UI展示:
aboutToAppear() { console.log(`${TAG} aboutToAppear`); this.dataSource1 = rankModel.loadRankDataSource1(); this.dataSource2 = rankModel.loadRankDataSource2(); }
aboutToDisappear() 在自定义组件实例被销毁时调用,我们可以在该组件生命周期回调函数中释放不再使用的资源,避免资源泄露,比如释放在aboutToAppear()申请的定时器资源等。
aboutToDisappear() { console.log(`${TAG} aboutToDisappear`); }
我们需要注意和了解的是,这些生命周期回调函数都是私有的,是无法手动调用的,由系统在特定时刻自动调用执行。
对应页面的入口组件,也就是被@Entry装饰器修饰的自定义组件,系统还提供了另外的三个生命周期函数,分别是:页面展示时刻的onPageShow(),进行返回的时候的onBackPress(),页面消失时刻的onPageHide();
onPageShow() { console.log(`${TAG} onPageShow`); } onPageHide() { console.log(`${TAG} onPageHide`); } onBackPress() { if (this.isShowToast()) { prompt.showToast({ message: $r('app.string.prompt_text'), duration: TIME }); this.clickBackTimeRecord = new Date().getTime(); return true; } return false; }
其中当用点击返回按钮,触发的onBackPress()函数,是可以设置返回值的,当函数返回true时,表示页面自己处理返回逻辑,不进行页面返回,返回false,由系统处理返回逻辑,默认是返回false。
ArkTS支持条件渲染,使用if/else if/else进行条件渲染,我们看一段示例代码:
//ListItemComponent.ets 文件中的代码片段 Column(){ if(this.isRenderCircleText()){ this.CircleText(this.index); }else{ Text(this.index.toString()) .lineHeight(ItemStyle.TEXT_LAYOUT_SIZE) .textAlign(TextAlign.Center) .width(ItemStyle.TEXT_LAYOUT_SIZE) .fontWeight(FontWeight.BOLD) .fontSize(FontSize.SMALL) } }
通过条件渲染,我们可以对排名前三名的样式做特殊处理,让1,2,3前面带上圆形的底色。
使用Foreach循环渲染自定义组件,可以方便快速生成列表类展示
//代码片段来自Index.ets@Builder RankList(widthValue: Length) { Column() { List() { ForEach(this.isSwitchDataSource ? this.dataSource1 : this.dataSource2, (item, index) => { ListItem() {ListItemComponent({ index: index + 1, name: item.name, vote: item.vote, isSwitchDataSource: this.isSwitchDataSource}) } }, (item, index) => item.id) } .width(WEIGHT) .height(Style.LIST_HEIGHT) .divider({ strokeWidth: Style.STROKE_WIDTH }) } .padding({ left: Style.RANK_PADDING, right: Style.RANK_PADDING }) .borderRadius(Style.BORDER_RADIUS) .width(widthValue) .alignItems(HorizontalAlign.Center) .backgroundColor(Color.White) }
最后,我们在了解下组件的状态管理,掌握如何基于组件的数值变化而呈现不同效果。
效果1,当我们点击水果排行榜某一行数据的时候,被点击的行的字体颜色呈蓝色:
具体实现逻辑是通过@State装饰器修饰的变量isChange来完成的。 需要注意的是被@State修饰的变量是组件的内部数据,
Text(this.name) .width(ItemStyle.LAYOUT_WEIGHT_CENTER) .fontWeight(FontWeight.BOLDER) .fontSize(FontSize.MIDDLE) .fontColor(this.isChange?ItemStyle.COLOR_BLUE:ItemStyle.COLOR_BLACK) Text(this.vote) .width(ItemStyle.LAYOUT_WEIGHT_RIGHT) .fontWeight(FontWeight.BOLDER) .fontSize(FontSize.SMALL) .fontColor(this.isChange?ItemStyle.COLOR_BLUE:ItemStyle.COLOR_BLACK)
效果二:通过标题栏右侧的刷新按钮,刷新组件内容,看不同组件之间数据变化如何进行UI更新呢?
这个效果,我们可以使用@State和@Link装饰器配合使用,来实现这一效果,在TitleCommponent组件中用@Link修饰 isRrefeshData变量,来标识水果排行榜数据的切换标识,需要注意的是@Link装饰器修饰的变量需要父组件在创建TitleCommponent的时候进行初始化。@Link装饰的变量可以父组件的@State装饰的变量建立双向数据绑定,因此对子组件的变量值修改,会同步修改父组件对应的@State修饰的变量,这里对应的就是父组件里的isSwitchDataSource变量,从而自动触发父组件的UI刷新。
@Componentexport struct TitleComponent{ @Link isRefreshData: boolean; @State title:Resource=$r('app.string.app_name'); build(){ Row(){ Row(){
@Entry@Componentstruct Index { @State dataSource1: RankData[] = []; @State dataSource2: RankData[] = []; // The State is used to decide whether to switch the data of RankList. @State isSwitchDataSource: boolean = true; // It will record the time of clicking back button of system navigation. private clickBackTimeRecord: number = 0;
@Link修饰的变量在父组件中必须使用引用进行初始化,这里我们通过$操作符来创建“引用” 。
TitleComponent({ isRefreshData: $isSwitchDataSource, title: TITLE })
本帖是结合自己学习的过程的一个整理,如果您参考和学习的过程中有碰到问题,欢迎评论留言,一起学习一起进步成长!
源码下载:https://download.csdn.net/download/wangjianlong/87148688