鸿蒙前端开发3-ArkTS语言基本语法

news/2024/10/6 14:33:55

官方文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-basic-syntax-0000001504650057-V2

1.基本语法

    

  •  装饰器 

     用于装饰类、结构、方法以及变量,并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器,@Component表示自定义组件,@Entry表示该自定义组件为入口组件,@State表示组件中的状态变量,状态变量变化会触发UI刷新。

  • UI描述

    以声明式的方式来描述UI的结构,例如build()方法中的代码块

  • 自定义组件

    可复用的UI单元,可组合其他组件,如上述被@Component装饰的struct Hello

    a.自定义组件特点

      1.可组合

      2.可重用

      3.数据驱动UI更新

    b.基本用法,如果在另外的文件中引用该自定义组件,需要使用export关键字导出,并在使用的页面import该自定义组件。  

@Component
struct HelloComponent {@State message: string = 'Hello, World!';build() {// HelloComponent自定义组件组合系统组件Row和TextRow() {Text(this.message).onClick(() => {// 状态变量message的改变驱动UI刷新,UI从'Hello, World!'刷新为'Hello, ArkUI!'this.message = 'Hello, ArkUI!';})}}
}

   c.基本结构  

@Entry
@Component
struct MyComponent {build() {}
}

    1.@Entry装饰的自定义组件将作为UI页面的入口,在单个UI页面中,最多可以使用@Entry装饰一个自定义组件。@Entry可以接受一个可选的LocalStorage的参数

    2.struct:自定义组件基于struct实现,struct + 自定义组件名 + {...}的组合构成自定义组件,不能有继承关系。对于struct的实例化,可以省略new

    3.@Component:@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力,需要实现build方法描述UI,一个struct只能被一个@Component装饰

    4.build()函数:build()函数用于定义自定义组件的声明式UI描述,自定义组件必须定义build()函数

      @Entry装饰的自定义组件,其build()函数下的根节点唯一且必要,且必须为容器组件,其中ForEach禁止作为根节点

      @Component装饰的自定义组件,其build()函数下的根节点唯一且必要,可以为非容器组件,其中ForEach禁止作为根节点

      不允许声明本地变量

      不允许在UI描述里直接使用console.info,但允许在方法或者函数里使用

      不允许创建本地的作用域

      不允许调用没有用@Builder装饰的方法,允许系统组件的参数是TS方法的返回值

      不允许switch语法,如果需要使用条件判断,请使用if

      不允许使用表达式

  • 系统组件

    ArkUI框架中默认内置的基础和容器组件,可直接被开发者调用,比如示例中的Column、Text、Divider、Button

  • 属性方法

    组件可以通过链式调用配置多项属性,如fontSize()、width()、height()、backgroundColor()等

    使用匿名函数表达式配置组件的事件方法,要求使用bind,以确保函数体中的this指向当前组件,使用声明的箭头函数,可以直接调用,不需要bind this

Button('add counter').onClick(function(){this.counter += 2;}.bind(this))
  • 成员函数/变量
    • 自定义组件的成员函数/变量为私有的,且不建议成静态函数/静态变量
    • 自定义的成员变量本地初始化有些是可选的,有些是必选的,具体是否需要本地初始化,是否需要从父组件通过参数传递初始化子组件的成员变量
  •  扩展语法
    • @Builder/@BuilderParam:特殊的封装UI描述的方法,细粒度的封装和复用UI描述
    • @Extend/@Styles:扩展内置组件和封装属性样式,更灵活地组合内置组件
    • stateStyles:多态样式,可以依据组件的内部状态的不同,设置不同样式   
  • 自定义组件通用样式
@Component
struct MyComponent2 {build() {Button(`Hello World`)}
}@Entry
@Component
struct MyComponent {build() {Row() {MyComponent2().width(200).height(300).backgroundColor(Color.Red)}}
}

 2.$r 形式引入应用资源,可应用于多语言场景

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

04-2个常用的文本属性

2个常用的文本属性01 text-decoration <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" c…

线程池的原理与C语言实现

这篇博客介绍了一个简单的线程池的C语言实现,详细解释了代码结构和工作流程,并附上了流程图。V1.0 2024年6月11日 发布于博客园目录 目录目录线程池原理线程池是什么线程池解决的问题动态创建子线程的缺点线程池相关接口线程池相关结构体struct task 任务节点线程池接口init_…

04- 2个常用的文本属性

2个常用的文本属性01-text-decoration点击查看代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="view…

【Docker系列】无法下载docker镜像的解决方法

近期因为网络问题,可能会遇到下载docker镜像失败的情况,可以尝试以下二种方法,来解决无法下载镜像的问题 如果会终端命令操作,建议使用 方法二、使用阿里云docker仓库下载镜像,因为国内仓库下载速度快方法一、改host文件指定域名的IP 如果拉取镜像遇到下面的错误: docker…

flutter 调用环信sdk 实现即时通讯

首先下载依赖 导包import package:im_flutter_sdk/im_flutter_sdk.dart;登录import package:flutter/material.dart;import package:test1/Do/UserDao.dart; // Make sure this path is correctimport package:test1/page/logined.dart;import register.dart; // Import your R…

mormot.core.threads.pas unit

mormot.core.threads.pas unit Purpose: Framework Core Multi-Threading Support - this unit is a part of the Open Source Synopse mORMot framework 2, licensed under a MPL/GPL/LGPL three license - see LICENSE.md 目的:框架核心多线程支持本单元是开源Synopse mORMo…

五笔:键名字练习.txt,250字

王土大木工目日口田山禾白月人金言立水火之已子女又纟王土大木工目日口田山禾白月人金言立水火之已子女又纟王纟禾子山水目又日土已大工言口之木立金白人女月火田目大子金之又白禾木山已口王人月日水言田工纟女土立火已火水纟王土金目田禾又日立山子大之白工口月人木女言已水白…

02-HTML知识点

HTML知识点01 元素的介绍02 元素的属性03 元素的嵌套关系04 HTML结构分析4.1 文档声明[这个不叫元素]