自学鸿蒙HarmonyOS的ArkTS语言<一>基本语法

一、一个ArkTs的目录结构

在这里插入图片描述

二、一个页面的结构

在这里插入图片描述

A、装饰器

@Entry 装饰器 : 标记组件为入口组件,一个页面由多个自定义组件组成,但是只能有一个组件被标记
@Component : 自定义组件, 仅能装饰struct关键字声明的数据结构
@State:组件中的状态变量,就是ui绑定的数据,状态变量变化,ui中绑定的也会变

B、UI描述

整个build里面的,以声明式的方式来描述UI的结构,跟平常写的标签式的区别挺大
1)系统组件用的时候后面跟(), 分为有参数和无参数

Column() {Text('item 1') // 参数可选Text(`count: ${this.count}`) // 用变量赋值Divider()Image('https://xyz/test.jpg') // 参数必填}

2)css和事件都是以链式的方式挂在系统组件后面,每个单独一行(css可以做成函数式的,可复用,还没细看)

Text('test').fontSize(12) // 属性参数为常量
Text('hello').fontSize(this.size) // 属性参数为变量赋值或者表达式.fontColor(Color.Red) // 属性参数为可调用的枚举类型.fontWeight(FontWeight.Bold)

3)事件

// 形式1:
Button('Click me').onClick(() => {  // 箭头函数// do sth})
// 形式2:
Button('add counter').onClick(function(){ // 匿名函数表达式// do sth}.bind(this))  // 必须用bind, 确保函数体中this指向当前组件
// 形式3:
myClickHandler(): void {// do sth
}
...
Button('add counter').onClick(this.myClickHandler.bind(this)) // 组件的成员函数
// 形式4:
fn = () => {// do sth
}
...
Button('add counter').onClick(this.fn) // 声明的箭头函数,不需要bind this

4)布局有专门的系统组件,比如Column组件,Row组件、Flex组件、Grid组件, 这些都是容器组件,可以嵌套子组件

4)UI描述里面可以有自定义组件

C、自定义组件

可复用,可组合,数据驱动UI更新

  1. 结构
@Component
struct  组件名称 { // 组件名称用大驼峰@State  变量名称: 变量类型 = 变量值build() {// ui声明}
}
  • struct: 实例化,可以省略new
  • struct被@Component装饰后具备组件化的能力
  • 一个struct只能被一个@Component装饰,如果一个自定义组件设置为页面,必须用@Entry 装饰
  1. 成员函数/变量
  • 自定义组件的成员函数为私有的,且不建议声明成静态函数
  • 自定义组件的成员变量本地初始化有些是可选的,有些是必选的。 – 涉及到传参
  1. build()函数
  • @Entry装饰的自定义组件,其build()函数下的根节点唯一且必要,且必须为容器组件,其中ForEach禁止作为根节点。
  • @Component装饰的自定义组件,其build()函数下的根节点唯一且必要,可以为非容器组件,其中ForEach禁止作为根节点。
  • 自定义组件通用样式
@Entry
@Component
struct MyComponent {build() {Row() {MyComponent().width(200) // 这里的样式并不是直接加在MyComponent里面的根组件上的,而是根组件外部一个不可见的容器组件上的.height(300).backgroundColor(Color.Red)}}
}
  • 不允许做的
@Component
struct MyComponent{doSomeCalculations() {}calcTextValue(): string {return 'Hello World';}@Builder doSomeRender() {Text(`Hello World`)}build() {// 不允许声明本地变量let a: number = 1; // 不允许在UI描述里直接使用console.info,但允许在方法或者函数里使用console.info('print debug log'); // 不允许创建本地的作用域{...}// 不允许调用没有用@Builder装饰的方法,允许系统组件的参数是TS方法的返回值this.doSomeCalculations();// 可以调用@Builder装饰的方法this.doSomeRender()// 允许系统组件的参数是TS方法的返回值Text(this.calcTextValue())// 不允许switch语法,如果需要使用条件判断,请使用ifswitch (expression) {case 1:Text('...')break;case 2:Image('...')break;default:Text('...')break;}// 不允许使用表达式(this.aVar > 10) ? Text('...') : Image('...')}
}
  1. 被外部引用的自定义组件,需要使用export导出
@Component
exprot struct  组件名称 {private message: string= '123'build() {// ui声明}
}
  1. 使用自定义组件的地方用import引入
import { 组件名 } from '相对路径'
@Entry
@Component
struct ParentComponent {build() {Column() {Text('ArkUI message')组件名({ message: 'Hello, World!' }) // 传参,对象形式Divider()组件名({ message: '你好!' });}}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/30485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【JVM】触发 Full GC 的条件

在Java虚拟机(JVM)中,垃圾收集(Garbage Collection,简称GC)是管理内存的关键机制。Full GC(也称为Major GC或老年代GC)是一种较为耗时的垃圾收集过程,会对整个堆&#xf…

SpirngMVC面试题

说一下 SpringMVC 支持的转发和重定向的写法(必会) 1)转发: forward 方式:在返回值前面加"forward:",比如"”"forward:user.do?namemethod4" 2) 重定向: redirect 方式:在返回值前面加 redirect:, 比如"redi…

服务器雪崩的应对策略之----熔断机制

熔断机制(Circuit Breaker)是一种保护系统稳定性的重要手段。它的主要目的是防止系统在依赖的服务出现问题时,继续发送请求,从而保护系统免受进一步的影响。熔断机制通过监控请求的成功和失败率,在检测到故障率超过预设…

python全栈开发《10.数据类型之初识列表类型》

1.什么是列表 其实在生活中,有很多种排队的现象。比如看电影要排队买票,上地铁的时候要排队安检。在生活中,排队的是人,为了统一做一件事,而排成队伍,逐个的去等待执行这个任务,每个人都是执行这…

平衡查找树(数据结构篇)

数据结构之平衡查找树 平衡查找树(AVL树) 概念: 为了防止因为插入删除而导致的树结构不平衡(通常我们删除节点总是对右子树的最小值节点替代操作,而不是交替的利用左子树的最大值节点替代,这就将导致左子树的平均深度大于右子树平均深度&a…

基于Java的高校校园点餐系统

开头语: 你好,我是计算机专业的学长,如果你对高校校园点餐系统感兴趣或有相关开发需求,欢迎联系我。 开发语言:Java 数据库:MySQL 技术:JSP技术 工具:Eclipse、Tomcat 系统展示…

分布式用例执行

前言 这两天趁着有时间,我疯狂的码字了~~ 背景 我们公司是做人工智能平台的,什么是人工智能呢? 大数据 机器学习。大数据运行的基本就不快。机器学习算法运行起来也是慢的让人泪流满面。在我们的集群配置下,我使用一个 5M 的数…

基于IDEA的Maven(properties属性配置)

&#xff08;property &#xff1a;财产&#xff09;properties&#xff1a;它的复数。 同样也是基于上篇博客进行学习。&#xff08;具体的全部项目代码和结构可以去查看上篇...&#xff09; <properties><!--当前jdk版本 , 这一步可以完全省略--><maven.com…

【技巧】Leetcode 137. 只出现一次的数字 II【中等】

只出现一次的数字 II 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法且使用常数级空间来解决此问题。 示例 1&#xff1a; 输入&…

2024青海三支一扶招1910人7月6日笔试

&#x1f4e2;2024年青海省三支一扶计划招募1910人公告已发布&#xff01; 小&#x1f004;️帮大家整理好了考试关键时间点&#xff1a; ★ 报名时间&#xff1a;6月20日至6月25日 ★ 报名网站&#xff1a;青海省人事考试信息网&#xff08;www.qhpta.com&#xff09; ★ 网上…

android studio构建项目报错Could not create an instance of type com.android.build.api.variant.impl.Applicat

Could not create an instance of type com.android.build.api.variant.impl.ApplicationVariantImpl 这个错误通常是由于Gradle插件版本不兼容导致的。你可能正在使用的Gradle插件版本与你的Android Studio版本不兼容。 要解决这个问题&#xff0c;你可以尝试以下解决方法&a…

音视频入门基础:H.264专题(3)——EBSP, RBSP和SODB

音视频入门基础&#xff1a;H.264专题系列文章&#xff1a; 音视频入门基础&#xff1a;H.264专题&#xff08;1&#xff09;——H.264官方文档下载 音视频入门基础&#xff1a;H.264专题&#xff08;2&#xff09;——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…

行为树行为树行为树

行为树由一个个节点组成 结构&#xff1a;树状结构运行流程&#xff1a;从根节点开始自顶向下往下遍历&#xff0c;每经过一个节点就执行节点对应的功能。 我们规定&#xff0c;每个节点都提供自己的excute函数&#xff0c;返还执行失败/成功结果。 然后根据不同节点的执行结…

C++ Primer 学习 -- Day 2

第 3 章知识点总结 3.1 .1 命名空间的using 声明提醒 3.2.1 定义和初始化 string 对象直接初始化和拷贝初始化 3.2.2 string 对象上的操作提醒比较 string 对象( vector 也一样 )字面值和 string 对象相加提醒 3.2.3处理 string 对象中的字符建议处理每个字符&#xff1f;使用基…

国产数据库中读写分离实现机制

在数据库高可用架构下会存在1主多备的部署&#xff0c;备节点可以根据业务场景分发一部分流量以充分利用资源&#xff0c;并减轻主库的压力&#xff0c;因此在数据库的功能上需要读写分离来实现。 充分利用备节点的资源&#xff0c;提升业务的吞吐量&#xff1b;防止运维等非业…

《算法设计与分析》第五六章:回溯法与分支限界法

文章目录 回溯法分支限界法一、本章作业1.活动安排问题2.旅行商问题3.单源最短路径4.任务分配问题 二、算法积累1.回溯法求解01背包问题2.回溯法求解最大团问题3.回溯法求解n皇后问题4.回溯法求解地图着色5.回溯法求解哈密尔顿图6.回溯法求活动安排7.分支限界法求01背包问题8.分…

Flutter第十三弹 路由和导航

目标&#xff1a; 1.Flutter怎么创建路由&#xff1f; 2.怎么实现路由跳转&#xff1f;页面返回&#xff1f; 一、路由 1.1 什么是路由&#xff1f; 路由(Route)在移动开发中通常指页面&#xff08;Page&#xff09;&#xff0c;在Android中通常指一个Activity。所谓路由管…

小功率电机驱动方案中如何选择驱动IC

小功率电机驱动方案及驱动IC的选择 电机驱动作为工业4.0中工厂自动化整个闭环中的执行器环节&#xff0c;其性能好坏直接影响到整个闭环的性能。因此&#xff0c;工业4.0对电机驱动提出了更高的性能和功能要求&#xff0c;例如更快的响应速度、更高的带宽、更高精度的位置和速…

前端框架中的路由(Routing)和前端导航(Front-End Navigation)

聚沙成塔每天进步一点点 本文回顾 ⭐ 专栏简介前端框架中的路由&#xff08;Routing&#xff09;和前端导航&#xff08;Front-End Navigation&#xff09;1. 路由&#xff08;Routing&#xff09;1.1 定义1.2 路由的核心概念1.2.1 路由表&#xff08;Route Table&#xff09;1…

多模态大模型:基础架构

大模型技术论文不断&#xff0c;每个月总会新增上千篇。本专栏精选论文重点解读&#xff0c;主题还是围绕着行业实践和工程量产。若在某个环节出现卡点&#xff0c;可以回到大模型必备腔调或者LLM背后的基础模型重新阅读。而最新科技&#xff08;Mamba,xLSTM,KAN&#xff09;则…