devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ArkTS基础知识【含示例源码】

作者：小小林熬夜学编程 | 2024-02-16 09:12:47

赞

踩

arkts

ArkTS是HarmonyOS的一种应用开发语言，他在TypeScript的基础上，拓展了声明式UI、状态管理等相应的能力，让开发者以更简洁自然的方式开发高性能的应用。

千言万语不胜效果图来的直观，先看下示例的演示效果：

我们以其中一段代码来学习相关知识点：

  1. import {FontSize,FontWeight,ItemStyle,WEIGHT} from '../common/constants/Constants'
  2.  
  3. @Component
  4. export struct ListItemComponent{
  5.  
  6.   index:number
  7.   private name:Resource;
  8.   @Prop vote:string;
  9.   @Prop isSwitchDataSource:boolean;
  10.   @State isChange:boolean=false;
  11.  
  12.   build(){
  13.     Row(){
  14.       Column(){
  15.         if(this.isRenderCircleText()){
  16.           this.CircleText(this.index);
  17.         }else{
  18.           Text(this.index.toString())
  19.             .lineHeight(ItemStyle.TEXT_LAYOUT_SIZE)
  20.             .textAlign(TextAlign.Center)
  21.             .width(ItemStyle.TEXT_LAYOUT_SIZE)
  22.             .fontWeight(FontWeight.BOLD)
  23.             .fontSize(FontSize.SMALL)
  24.         }
  25.       }
  26.       .width(ItemStyle.LAYOUT_WEIGHT_LEFT)
  27.       .alignItems(HorizontalAlign.Start)
  28.  
  29.       Text(this.name)
  30.         .width(ItemStyle.LAYOUT_WEIGHT_CENTER)
  31.         .fontWeight(FontWeight.BOLDER)
  32.         .fontSize(FontSize.MIDDLE)
  33.         .fontColor(this.isChange?ItemStyle.COLOR_BLUE:ItemStyle.COLOR_BLACK)
  34.  
  35.       Text(this.vote)
  36.         .width(ItemStyle.LAYOUT_WEIGHT_RIGHT)
  37.         .fontWeight(FontWeight.BOLDER)
  38.         .fontSize(FontSize.SMALL)
  39.         .fontColor(this.isChange?ItemStyle.COLOR_BLUE:ItemStyle.COLOR_BLACK)
  40.     }
  41.     .height(ItemStyle.BAR_HEIGHT)
  42.     .width(WEIGHT)
  43.     .onClick(()=>{
  44.       this.isSwitchDataSource=!this.isSwitchDataSource
  45.       this.isChange=!this.isChange
  46.     })
  47.   }
  48.  
  49.   @Builder
  50.   CircleText(index:number){
  51.     Row(){
  52.       Text(this.index.toString())
  53.         .fontWeight(FontWeight.BOLD)
  54.         .fontSize(FontSize.SMALL)
  55.         .fontColor(Color.White);
  56.     }
  57.     .justifyContent(FlexAlign.Center)
  58.     .borderRadius(ItemStyle.CIRCLE_TEXT_BORDER_RADIUS)
  59.     .size({width:ItemStyle.CIRCLE_TEXT_SIZE,height:ItemStyle.CIRCLE_TEXT_SIZE})
  60.     .backgroundColor($r('app.color.circle_text_background'))
  61.   }
  62.  
  63.   isRenderCircleText():boolean{
  64.     return this.index===1||this.index===2||this.index===3;
  65.   }
  66. }

 @Component 这些带@的叫装饰器，装饰器用来装饰类、结构、方法和变量，赋予其特殊的含义和能力。

@Componet 代表的当前这个是一个自定义组件，组件名字就是ListItemComponent,他是可重用的UI单元，可以与其他组件组合

代码中的@State 也是一种装饰器，被它装饰的变量isChange的值发生变化的时候，就会触发该变量所对应的自定义组件的UI界面进行自动刷新。

build(){....} 是代表对该UI组件的描述，是基于声明式的结构，而它里边的比如 Row(),Text()这些属于内置组件，是系统提供的基础组件和容器组件，可以用来直接使用。

每个组件有自己的属性方法，使用点运算符进行链式调用；通过这些属性方法来设置对应组件的样式，绑定事件等操作。

  1.           Text(this.index.toString())
  2.             .lineHeight(ItemStyle.TEXT_LAYOUT_SIZE) //属性方法，设置行高
  3.             .textAlign(TextAlign.Center)//属性方法，设置文字对齐方式
  4.             .width(ItemStyle.TEXT_LAYOUT_SIZE)//属性方法，文本框宽度
  5.             .fontWeight(FontWeight.BOLD)//属性方法，设置字体粗细
  6.             .fontSize(FontSize.SMALL)//属性方法，设置字体大小

比如Row()组件下的onClick就是事件方法，可以用来实现点击每一样数据的时候来触发调用。

  1.     .onClick(()=>{
  2.       this.isSwitchDataSource=!this.isSwitchDataSource
  3.       this.isChange=!this.isChange

在ArkTS中，除了类似，Text、Button、Image、TextInput、Column、Row、Stack、List等等大量的内置组件外，我们为了满足某些效果，结合这些内置组件组合封装后的组件就都称为自定义组件。

我们一般的开发流程是先基于内置组件组合好一些自定义组件，然后再通过组合自定义组件形成一个个完整的页面。

我们自己写的自定义组件在使用上和内置组件是一样的，直接引用就可以了，当一个组件中使用另外一个组件的内容时，这个组件就被称为父组件

  1. /*
  2.  * Copyright (c) 2022 Huawei Device Co., Ltd.
  3.  * Licensed under the Apache License, Version 2.0 (the "License");
  4.  * you may not use this file except in compliance with the License.
  5.  * You may obtain a copy of the License at
  6.  *
  7.  *     http://www.apache.org/licenses/LICENSE-2.0
  8.  *
  9.  * Unless required by applicable law or agreed to in writing, software
  10.  * distributed under the License is distributed on an "AS IS" BASIS,
  11.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12.  * See the License for the specific language governing permissions and
  13.  * limitations under the License.
  14.  */
  15.  
  16. import prompt from '@ohos.prompt';
  17. import { RankViewModel } from '../viewmodel/RankViewModel';
  18. import { RankData } from '../common/bean/RankData';
  19. import { ListHeaderComponent } from '../view/ListHeaderComponent';
  20. import { TitleComponent } from '../view/TitleComponent';
  21. import { ListItemComponent } from '../view/ListItemComponent';
  22. import { APP_EXIT_INTERVAL, Style, TAG, TIME, TITLE, WEIGHT } from '../common/constants/Constants';
  23.  
  24. let rankModel: RankViewModel = new RankViewModel();
  25.  
  26. @Entry
  27. @Component
  28.  
  29. //相对于TitleComponent等自定义组件，Index就是父组件
  30. struct Index {
  31.   @State dataSource1: RankData[] = [];
  32.   @State dataSource2: RankData[] = [];
  33.   // The State is used to decide whether to switch the data of RankList.
  34.   @State isSwitchDataSource: boolean = true;
  35.   // It will record the time of clicking back button of system navigation.
  36.   private clickBackTimeRecord: number = 0;
  37.  
  38.   aboutToAppear() {
  39.     console.log(`${TAG} aboutToAppear`);
  40.     this.dataSource1 = rankModel.loadRankDataSource1();
  41.     this.dataSource2 = rankModel.loadRankDataSource2();
  42.   }
  43.  
  44.   aboutToDisappear() {
  45.     console.log(`${TAG} aboutToDisappear`);
  46.   }
  47.  
  48.   onPageShow() {
  49.     console.log(`${TAG} onPageShow`);
  50.   }
  51.  
  52.   onPageHide() {
  53.     console.log(`${TAG} onPageHide`);
  54.   }
  55.  
  56.   onBackPress() {
  57.     if (this.isShowToast()) {
  58.       prompt.showToast({ message: $r('app.string.prompt_text'), duration: TIME });
  59.       this.clickBackTimeRecord = new Date().getTime();
  60.       return true;
  61.     }
  62.     return false;
  63.   }
  64.  
  65.   isShowToast(): boolean {
  66.     return new Date().getTime() - this.clickBackTimeRecord > APP_EXIT_INTERVAL;
  67.   }
  68.  
  69.   build() {
  70.     Column() {
  71.       //相对于Index，这个就是子组件
  72.       TitleComponent({ isRefreshData: $isSwitchDataSource, title: TITLE })
  73.       // The head style of List component.
  74.       ListHeaderComponent({
  75.         paddingValue: { left: Style.RANK_PADDING,
  76.           right: Style.RANK_PADDING },
  77.         widthValue: Style.CONTENT_WIDTH
  78.       }).margin({ top: Style.HEADER_MARGIN_TOP,
  79.         bottom: Style.HEADER_MARGIN_BOTTOM })
  80.       // The style of List component.
  81.       this.RankList(Style.CONTENT_WIDTH)
  82.     }
  83.     .backgroundColor($r('app.color.background'))
  84.     .height(WEIGHT)
  85.     .width(WEIGHT)
  86.   }
  87.  
  88.   @Builder RankList(widthValue: Length) {
  89.     Column() {
  90.       List() {
  91.         ForEach(this.isSwitchDataSource ? this.dataSource1 : this.dataSource2,
  92.           (item, index) => {
  93.             ListItem() {
  94.               ListItemComponent({ index: index + 1, name: item.name, vote: item.vote,
  95.                 isSwitchDataSource: this.isSwitchDataSource
  96.               })
  97.             }
  98.           }, (item, index) => item.id)
  99.       }
  100.       .width(WEIGHT)
  101.       .height(Style.LIST_HEIGHT)
  102.       .divider({ strokeWidth: Style.STROKE_WIDTH })
  103.     }
  104.     .padding({ left: Style.RANK_PADDING,
  105.       right: Style.RANK_PADDING })
  106.     .borderRadius(Style.BORDER_RADIUS)
  107.     .width(widthValue)
  108.     .alignItems(HorizontalAlign.Center)
  109.     .backgroundColor(Color.White)
  110.   }
  111. }

如上代码片段，Index就是TitleComponent的父组件，TitleComponent就是Index的子组件，了解父子组件的关系，对我们准确理解和掌握后面的数据绑定，影响关系很重要。

我们上面的Index.ets代码片段中，还使用了@Entry装饰器，被他装饰的自定义组件表示这个组件作为页面的默认入口，加载页面时，将首先创建并呈现@Entry装饰器修改的自定义组件。

一个页面有且仅能有个@Entry。

在代码工程中，自定义组件一般分布在不同的源码文件中，因此为了能够被别的组件引用使用，我们需要在自定义组件的关键字struct 前面使用关键字export来导出组件。在父组件使用子组件是，需要先在文件开头使用import关键字导入子组件，导入方式如下面代码片段：

  1. import { ListHeaderComponent } from '../view/ListHeaderComponent';
  2. import { TitleComponent } from '../view/TitleComponent';
  3. import { ListItemComponent } from '../view/ListItemComponent';

下面我们再了解下自定义组件的生命周期相关内容。

自定义组件生命周期函数有：自定义组件的创建=>aboutToAppear()=> aboutToDisappear(),=>自定义组件销毁，我们通过两个生命周期回调函数，用于通知开发者当前组件所处的阶段。

在aboutToAppear中，我们可以用来初始化UI需要展示的数据，或者申请定时器资源等操作，这样在后续build函数中可以使用这些数据和资源来进行UI展示：

  1.   aboutToAppear() {
  2.     console.log(`${TAG} aboutToAppear`);
  3.     this.dataSource1 = rankModel.loadRankDataSource1();
  4.     this.dataSource2 = rankModel.loadRankDataSource2();
  5.   }

aboutToDisappear() 在自定义组件实例被销毁时调用，我们可以在该组件生命周期回调函数中释放不再使用的资源，避免资源泄露，比如释放在aboutToAppear()申请的定时器资源等。

  1.   aboutToDisappear() {
  2.     console.log(`${TAG} aboutToDisappear`);
  3.   }

我们需要注意和了解的是，这些生命周期回调函数都是私有的，是无法手动调用的，由系统在特定时刻自动调用执行。

对应页面的入口组件，也就是被@Entry装饰器修饰的自定义组件，系统还提供了另外的三个生命周期函数，分别是：页面展示时刻的onPageShow(),进行返回的时候的onBackPress(),页面消失时刻的onPageHide();

  1.   onPageShow() {
  2.     console.log(`${TAG} onPageShow`);
  3.   }
  4.  
  5.   onPageHide() {
  6.     console.log(`${TAG} onPageHide`);
  7.   }
  8.  
  9.   onBackPress() {
  10.     if (this.isShowToast()) {
  11.       prompt.showToast({ message: $r('app.string.prompt_text'), duration: TIME });
  12.       this.clickBackTimeRecord = new Date().getTime();
  13.       return true;
  14.     }
  15.     return false;
  16.   }

其中当用点击返回按钮，触发的onBackPress()函数，是可以设置返回值的，当函数返回true时，表示页面自己处理返回逻辑，不进行页面返回，返回false，由系统处理返回逻辑，默认是返回false。

ArkTS支持条件渲染，使用if/else if/else进行条件渲染，我们看一段示例代码：

  1. //ListItemComponent.ets 文件中的代码片段
  2.  
  3.       Column(){
  4.         if(this.isRenderCircleText()){
  5.           this.CircleText(this.index);
  6.         }else{
  7.           Text(this.index.toString())
  8.             .lineHeight(ItemStyle.TEXT_LAYOUT_SIZE)
  9.             .textAlign(TextAlign.Center)
  10.             .width(ItemStyle.TEXT_LAYOUT_SIZE)
  11.             .fontWeight(FontWeight.BOLD)
  12.             .fontSize(FontSize.SMALL)
  13.         }
  14.       }

通过条件渲染，我们可以对排名前三名的样式做特殊处理，让1，2，3前面带上圆形的底色。

使用Foreach循环渲染自定义组件，可以方便快速生成列表类展示

  1. //代码片段来自Index.ets
  2.  
  3. @Builder RankList(widthValue: Length) {
  4.     Column() {
  5.       List() {
  6.         ForEach(this.isSwitchDataSource ? this.dataSource1 : this.dataSource2,
  7.           (item, index) => {
  8.             ListItem() {
  9.               ListItemComponent({ index: index + 1, name: item.name, vote: item.vote,
  10.                 isSwitchDataSource: this.isSwitchDataSource
  11.               })
  12.             }
  13.           }, (item, index) => item.id)
  14.       }
  15.       .width(WEIGHT)
  16.       .height(Style.LIST_HEIGHT)
  17.       .divider({ strokeWidth: Style.STROKE_WIDTH })
  18.     }
  19.     .padding({ left: Style.RANK_PADDING,
  20.       right: Style.RANK_PADDING })
  21.     .borderRadius(Style.BORDER_RADIUS)
  22.     .width(widthValue)
  23.     .alignItems(HorizontalAlign.Center)
  24.     .backgroundColor(Color.White)
  25.   }

最后，我们在了解下组件的状态管理，掌握如何基于组件的数值变化而呈现不同效果。 

效果1，当我们点击水果排行榜某一行数据的时候，被点击的行的字体颜色呈蓝色：

具体实现逻辑是通过@State装饰器修饰的变量isChange来完成的。 需要注意的是被@State修饰的变量是组件的内部数据，

  1.   Text(this.name)
  2.         .width(ItemStyle.LAYOUT_WEIGHT_CENTER)
  3.         .fontWeight(FontWeight.BOLDER)
  4.         .fontSize(FontSize.MIDDLE)
  5.         .fontColor(this.isChange?ItemStyle.COLOR_BLUE:ItemStyle.COLOR_BLACK)
  6.  
  7.       Text(this.vote)
  8.         .width(ItemStyle.LAYOUT_WEIGHT_RIGHT)
  9.         .fontWeight(FontWeight.BOLDER)
  10.         .fontSize(FontSize.SMALL)
  11.         .fontColor(this.isChange?ItemStyle.COLOR_BLUE:ItemStyle.COLOR_BLACK)

效果二：通过标题栏右侧的刷新按钮，刷新组件内容,看不同组件之间数据变化如何进行UI更新呢？

这个效果，我们可以使用@State和@Link装饰器配合使用，来实现这一效果，在TitleCommponent组件中用@Link修饰 isRrefeshData变量，来标识水果排行榜数据的切换标识，需要注意的是@Link装饰器修饰的变量需要父组件在创建TitleCommponent的时候进行初始化。@Link装饰的变量可以父组件的@State装饰的变量建立双向数据绑定，因此对子组件的变量值修改，会同步修改父组件对应的@State修饰的变量，这里对应的就是父组件里的isSwitchDataSource变量，从而自动触发父组件的UI刷新。

  1. @Component
  2. export struct TitleComponent{
  3.   @Link isRefreshData: boolean;
  4.   @State title:Resource=$r('app.string.app_name');
  5.  
  6.   build(){
  7.  
  8.     Row(){
  9.       Row(){
  1. @Entry
  2. @Component
  3. struct Index {
  4.   @State dataSource1: RankData[] = [];
  5.   @State dataSource2: RankData[] = [];
  6.   // The State is used to decide whether to switch the data of RankList.
  7.   @State isSwitchDataSource: boolean = true;
  8.   // It will record the time of clicking back button of system navigation.
  9.   private clickBackTimeRecord: number = 0;

@Link修饰的变量在父组件中必须使用引用进行初始化，这里我们通过$操作符来创建“引用” 。

 TitleComponent({ isRefreshData: $isSwitchDataSource, title: TITLE })

本帖是结合自己学习的过程的一个整理，如果您参考和学习的过程中有碰到问题，欢迎评论留言，一起学习一起进步成长！

源码下载：https://download.csdn.net/download/wangjianlong/87148688

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/92147
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号