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变量建立双向数据绑定。任何一方所做的修改都会反映给另一方。#
双向绑定操作
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库