HarmonyOS ArkTS基础语法

风陵南·2023-03-25 21:06·1866 次阅读

HarmonyOS ArkTS基础语法

前提:安装开发工具 

      教程:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387

基本代码中的各种组件#

// 前三行代码为 装饰器:装饰类、结构、方法和变量,富裕其特殊含义
@Component // 自定义组件
struct ListItemComponent { // 自定义的结构体
@State isChange: boolean = false; //@State也是自定义组件 当isChange的值发生改变时,就会触发对应的自定义组件@Component的UI界面的刷新
build() { // UI描述:声明式的方式描述UI结构
Row() { // 内置组件:系统提供的基础组件和容器组件等,可以直接调用
Text(this.name) // Row 表示一个水平布局组件 Text 表示一个文本组件
.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;
})
}
}

效果图 

组件类别#

基础组件#

  • Text
  • Button
  • Image
  • TextInput

容器组件#

  • Column
  • Row
  • Stack
  • List
  • ......

自定义组件#

  • 将多个基础组件或容器组件结合,抽象成为一个自定义组件,方便在其他页面中进行更加灵活的调用

 

创建一个自定义组件#

定义名为TitleComponent的自定义组件

@Component // @Component装饰的struct表示该结构体具有组件化能力,能够成为一个独立的组件
struct TitleComponent {
...
build() { // 自定义组件必须定义build方法,在其中进行UI描述
...
}
}

定义名为RankPage的自定义组件,在其中使用TitleComponent组件( !! 一个页面有且仅有一个@Entry装饰的组件

@Entry // @Entry装饰的自定义组件用作页面的默认入口组件,在页面加载时,将首先创建并呈现@Entry装饰的自定义组件
@Component
struct RankPage { // 父组件
...
build() {
Column() {
TitleComponent() // 子组件
}
}
}

 

 组件的模块化与导入#

首先要将组件使用export关键字导出

@Component // @Component装饰的struct表示该结构体具有组件化能力,能够成为一个独立的组件
export struct TitleComponent { // 首先要将组件使用export关键字导出
...
build() { // 自定义组件必须定义build方法,在其中进行UI描述
...
}
}

使用import组件导入TitleComponent组件

improt { TitleComponent } from '../view/TitleComponent'
@Entry // @Entry装饰的自定义组件用作页面的默认入口组件,在页面加载时,将首先创建并呈现@Entry装饰的自定义组件
@Component
struct RankPage { // 父组件
...
build() {
Column() {
TitleComponent() // 子组件
}
}
}

自定义组件生命周期回调#

@Component装饰的自定义组件#

  •  aboutToAppear() :   组件创建之后,build方法执行之前触发
  • aboutToDisappear() :  组件实例被销毁之前触发,用于释放一些不再使用的资源
    @Component
    struct RankPage {
    @state dataSource1: RankData[] = [];
    @state dataSource2: RankData[] = [];
    ...
    aboutToAppear() { // 组件创建之后,执行build方法之前触发
    console.log( ${TAG} aboutToAppear );
    this.dataSource1 = rankModel.loadRankDataSource1();
    this.dataSource2 = rankModel.loadRankDataSource2();
    }
    aboutToDisappear() { // 组件实例被销毁之前触发的 用于释放一些不再使用到的资源
    console.log( ${TAG} aboutToDisappear );
    }
    }

@Entry装饰的自定义组件#

  • 在@Component组件基础上多了三个生命周期回调
  • onPageShow():页面展示时(build执行之后)触发
  • onPageHide():页面消失时触发
  • onBackPress():按下返回键时触发
@Entry
@Component
struct RankPage {
...
onPageShow() {
console.log( ${TAG} onPageShow );
}
onPageHide() {
console.log( ${TAG} onPageHide );
}
onBackPress() {
return false;
}
}

 

渲染控制语法#

条件渲染:使用if/else#

Column() {
if (this.count > 0) {
Text('count is positive')
}
}

       

循环渲染:使用ForEach迭代数组,并为每个数组项创建相应的组件#

ForEach(
arr: any[], // 用于迭代的数组
itemGenerator: (item: any, index?: number) => void, // 生成子组件的lambda函数
keyGenerator?: (item: any, index?: number) => string // 用于给定数组项生成唯一且稳定的键值
)

 

组件状态管理#

@State装饰的变量是组件内部的状态数据,当状态数据被修改时,会自动进行UI刷新#

@Component
struct ListItemComponent {
@State isChange: boolean = false; //@State装饰的变量是组件内部的状态数据,当状态数据被修改时,会自动进行UI刷新
build() {
Row() {
Text(this.name)
.fontColor(this.isChange ? ItemStyle.COLOR_BLUE : ItemStyle.COLOR_BLACK) // 点击一下即变色
Text(this.vote)
.fontColor(this.isChange ? ItemStyle.COLOR_BLUE : ItemStyle.COLOR_BLACK)
}
.height(ItemStyle.BAR_HEIGHT)
.width(WEIGHT)
.onClick(() => { // 事件方法:设置组件对事件的响应逻辑
this.isChange = !this.isChange;
})
}
}

 所示代码实现了选中变色的功能

 

@Link装饰的变量可以和父组件的@State变量建立双向数据绑定。任何一方所做的修改都会反映给另一方。#

双向绑定操作

 

posted @   风陵南  阅读(1866)  评论(1编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示
目录