《HarmonyOS应用开发基础》 课件知识点2-2 认识ArkTS声明式开发.pptx

认识ArkTS声明式开发

01

02

03

ArkTS简介

ArkUI框架

ArkTS声明式开发范式的基本组成

04

ArkTS中的尺寸单位

05

ArkTS中组件的公共样式

ArkTS简介

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS基于TypeScript（简称TS）语言扩展而来，是TS的超集。

ArkTS继承了TS的所有特征

ArkTS在TS的基础上扩展了声明式UI能力，当前扩展的声明式UI能力包括如下特征：

基本UI描述

状态管理

动态构建UI元素

渲染控制

使用限制与扩展

ArkUI框架

ArkUI是基于ArkTS的UI框架，基于ArkTS提供的扩展语法，如下图所示。

ArkTS声明式开发范式的基本组成

ArkTS声明式开发范式的基本组成：

装饰器

自定义组件

UI描述

内置组件

属性方法

事件方法

ArkTS中的尺寸单位

ArkTS提供了4种像素单位，分别是px、vp、fp和lpx，框架采用vp为基准数据单位。

px：屏幕物理像素单位。

vp：屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素

fp：字体像素，与vp类似适用屏幕密度变化

lpx：视窗逻辑像素单位

在设置组件和容器宽高的字体大小使用固定值时，使用number值不需要用单位，ArkTS会默认给单位。

例如：width(200)fontSize(50)

ArkTS还可以使用百分比字符串来设置组件或布局的宽高。

例如：width(‘100%’)表示宽度与父容器宽度相等。

ArkTS中组件的公共样式

公共样式：

宽高（width/height/size）

宽高比（aspectRatio）

边距（padding/margin）

权重（layoutWeight）

...

示例：组件的宽高设置

Column()

{

Text(你好).width(100).height(120)

.fontSize(50px)

//设置Text文字显示组件的字体大小为50px

}.width(100%)

//设置Column的宽为100%，占满屏幕宽度

ArkTS中组件的公共样式

内外边距

Text()…

.margin({bottom:30})//设置底部外边距，底部距离下一个组件30

Text()…

//.padding(20)

//设置相同的边距值

.padding({left:

20,

top:

30,

right:

40,

bottom:

50})//设置不同的边距值

示例：设置组件的内外边距