ArkTs基础语法-声明式UI-基本概念

基本概念

  • 装饰器:用于装饰类、结构、方法及变量,并赋予其特殊的含义。

    例如:
    @Entry 有该装饰器的自定义组件,可以在UIAbility中使用,作为页面入口。该装饰器配合@Component装饰器使用
    @Component 自定义组件
    @State 表示组件中的状态变量,状态变化会出发UI刷新。
    @L

  • UI描述:以声明式的方式来描述UI的结构,在组件的build方法中。

  • 自定义组件:可复用的UI单元,可组合其他组件。

  • 系统组件:ArkUI框架中默认内置的基础和容器组件。例如:Column、Row、Text、Image、Button等。

  • 属性方法:ArkTs中,使用链式调用的方式来配置组件属性。

  • 事件方法:事件响应逻辑,也是使用链式调用的方式,设置如onclick方法等,在方法内部进行实现。

基础的组件一般就是由上述部分组成,如下图:
在这里插入图片描述
当然,也有一些其他的语法范式方便我们进行封装复用,如:

除此之外,ArkTS扩展了多种语法范式来使开发更加便捷:

  • @Builder/@BuilderParam:特殊的封装UI

### HarmonyOS ArkTS 基础语法与实例 #### 类型定义 ArkTS继承了TypeScript的强大类型系统,在变量声明时需指定其数据类型,这有助于编译器提前发现潜在错误并优化执行效率。例如: ```typescript let message: string = "Hello, world!"; ``` 对于复杂的数据结构如对象字面量,当遇到`Object literals cannot be used as type declarations`这样的错误提示时[^3],可以通过重构代码来绕开此限制。一种方法是先创建接口或类型别名再基于它们构建具体的对象。 #### 函数声明 函数参数同样支持详细的类型标注,返回值也可以被显式说明。下面是一个简单的例子展示如何定义带参函数以及使用箭头表达式的简洁写法: ```typescript function greet(name: string): void { console.log(`Hello ${name}`); } const add = (a: number, b: number): number => a + b; ``` 针对特定场景下的装饰器模式(Decorator),比如用于UI组件的构造,可以采用如下方式处理: ```typescript @Builder class MyComponent extends Component { constructor(props?: Props) { super(); // Initialization code here... } } ``` 需要注意的是,如果某些情况下确实存在无法满足严格类型的状况,并且开发者已经验证这些部分逻辑无误,则可考虑利用`// @ts-ignore`指令暂时忽略该处警告,不过这种做法应谨慎对待以维护整体代码质量[^2]。 #### 接口与类 为了增强模块化编程能力,ArkTS允许用户自定义接口和抽象基类作为其他实体遵循的标准模板。这里给出一段关于界面布局管理的小片段: ```typescript interface LayoutProps { width: number; height: number; } abstract class BaseLayout implements LayoutProps { protected _width: number; protected _height: number; public setDimensions(width: number, height: number): void { this._width = width; this._height = height; } abstract render(): Element; // Must implement in derived classes. } ``` 以上就是一些基础概念介绍及其应用案例,希望可以帮助到正在学习HarmonyOS应用程序开发的朋友。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值