《HarmonyOS应用开发基础》 课件全套 知识点+实操 单元1-3 HarmonyOS应用开发准备 - Stage模型下的业务能力开发

HarmonyOS简介了解鸿蒙鸿蒙发展历史了解OpenHarmonyOpenHarmony是由开放原子开源基金会（OpenAtomFoundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。OpenHarmony提供一个智能终端设备的操作系统底座框架和平台，参与者只要遵循开源协议和法律，就可以持续为OpenHarmony开源项目贡献代码，共同促进万物全场景、全连接、全智能的互联产业的繁荣发展。项目地址为：/openharmony。

了解HarmonyOSHarmonyOS就是鸿蒙操作系统，是商用版本，是华为基于OpenHarmony、AOSP(AndroidOpenSourceProject)等开源项目推出的新一代智能终端操作系统，HarmonyOS手机和平板也能运行Android应用，是因为HarmonyOS遵循了Android的AOSP。HarmonyOS系统架构HarmonyOS整体遵从分层设计，从下向上依次为：内核层、系统服务层、框架层和应用层。1+8+N全场景应用HarmonyOS是一个支持多设备的操作系统，“一生万物，万物归一”。HarmonyOS以手机为核心，将生活场景中的各类终端进行能力整合，构建1+8+N全场景应用，实现不同终端设备之间的快速连接、服务流转、能力互助、资源共享，匹配合适的设备、提供流畅的全场景体验。开发前准备了解DevEcoStudioHUAWEIDevEcoStudio（简称DevEcoStudio）是面向华为终端全场景多设备的一站式集成开发环境（IDE），除了创建工程、开发、编译、调试、发布等功能外，DevEcoStudio还可以支持多设备开发，实时预览器/模拟器等。DevEcoStudio支持多设备预览、模拟器运行、真机运行三种方式。开发者可以在DevEcoStudio中使用远程模拟器（RemoteEmulator）运行应用，也可以下载本地模拟器（LocalEmulator）运行应用，开发者还可以使用超级终端模拟器（SuperDevice）调测跨设备的应用。搭建开发环境流程DevEcoStudio支持Windows系统和macOS系统，在开发HarmonyOS应用/服务前，需要配置HarmonyOS应用/服务的开发环境。Node.js与npmNode.js是什么?Node.js是一个基于GoogleV8引擎开发的C++程序Javascript运行环境(runtime)，具有事件驱动、非阻塞I/O的特点。Node.js的优点响应速度快易于扩展适合在分布式设备上运行数据密集型的实时应用npm

是

NodePackageManager的缩写，意思是Node.js的包管理系统。安装了Node.js后，自动会安装npm。认识DevEcoStudio界面认识TypeScript01020304JavaScript和TypeScript概述TypeScript程序的编译与运行TypeScript语法说明TypeScript变量声明JavaScript与ES6JavaScript语言（简称“JS”）解释型脚本语言广泛应用在Web端、移动端、小程序端、桌面端、服务端动态类型语言ES6（全称“ECMAScript6.0”）JavaScript的一个版本标准2015年6月，ES6版本正式成为国际标准TypeScript简介TypeScript（简称“TS”）微软开发的一种开放源代码语言JS的一个超集提供编译时的静态类型检查ArkTS鸿蒙生态的一种应用开发语言TS的一个超集扩展了声明式UI、状态管理等相应的能力JS、TS、ArkTS三者关系TypeScript程序的编译和运行编译使用tsc命令将TS文件.ts编译成JS文件例如：tsctest.ts运行使用node命令执行编译生成的JS文件例如：nodetest.jsTypeScript语法说明TypeScript是面向对象语言，与C＃或Java类似。相同之处：可以使用数据类型定义变量具有函数、类、接口、枚举等类型。不同之处：TS结束语句可以使用分号也可以不使用分号TS字符串可以使用单引号也可以使用双引号示例：TypeScript变量声明TypeScript变量的命名规则：变量名称可以包含数字和字母；除了下划线_和美元$符号外，不能包含其他特殊字符，包括空格；变量名不能以数字开头；不能是关键字，例如let、const等示例：正确的变量命名：message、$name、_init错误的变量命名：123、123message、user/name!fruit1amilk%$age_value思考一下：以下哪些变量命名是正确的:TypeScript变量声明声明变量使用的关键字：var或let（建议使用let）TypeScript声明变量方式的几种情况：let[变量名]:[类型]=值;

使用示例：letuname:string="hello";let[变量名]:[类型];

使用示例：letuname:string;let[变量名]=值;

使用示例：letuname="hello";let[变量名];

使用示例：letuname;TypeScript变量声明TypeScript在编译时进行类型检查，遵循强类型，如果将不同的类型赋值给变量会编译错误。示例代码如下：//声明变量val，并赋初始值let

val

=

123;//使用变量val

=

456

;

//正确console.log(val);//在控制台打印出变量val的值val

=

'deg';

//编译错误TypeScript常用基础数据类型TypeScript的常用基础数据类型TypeScript的常用基础数据类型有：any（任意类型）number（数字类型）string（字符串类型）boolean（布尔类型）数组类型tuple（元组类型）enum（枚举类型）void类型null和undefined类型never类型TypeScript的常用基础数据类型any类型声明为any的变量可以赋予任意类型的值示例代码如下：let

data:

any;

//声明变量data为any类型data

=

"hello";

//将字符串赋值给dataconsole.log(typeof(data));

//输出data的类型为stringTypeScript的常用基础数据类型number类型number代表数字类型，是浮点值，它可以用来表示整数和小数。示例代码如下：let

data:

number;

//声明变量data为数字类型data

=

222;console.log(typeof(data));

//numberTypeScript的常用基础数据类型string类型string代表字符串类型，使用单引号（‘）或双引号（“）来表示字符串类型，反引号（`）来定义多行文本和内嵌表达式，反引号中的${变量名}会替换成相应的变量的值。示例代码如下：let

data1:

string

=

"hello";

//声明变量data为字符串类型let

data2

=

`${data1}`;

//使用反引号,${变量名}会获取到相应变量的值console.log(data2);

//hello

TypeScript的常用基础数据类型boolean类型boolean代表布尔类型，表示逻辑值：true和false。示例代码如下：let

data:

boolean

=

true;

//声明变量data为布尔类型TypeScript的常用基础数据类型数组类型数组里放的都是类型相同的数据。有两种方式可以定义数组。第一种，可以在元素类型后面接上[]。第二种使用数组泛型，Array<元素类型>。示例代码如下：//声明变量datas为数组类型，数组中都是数字，声明数组时同时初始化值let

datas:

number[]

=

[4,8,7];//声明变量temps为数组泛型，数组中的数据类型是numberlet

temps:

Array<string>

=

["hi","ArkTS"];console.log(temps[1]);

//获取temps数组的第2个成员的值，值为ArkTSTypeScript的常用基础数据类型元组类型元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同，初始化值时对应位置的数据类型要相同。示例代码如下：let

temps:

[number,string,boolean]

=

[2,'Hi',false];

//个数、类型、顺序要一致temps

=

["UI",'HarmonyOS',true];//编译报错：不能将类型“string”分配给类型“number”TypeScript的常用基础数据类型枚举类型使用枚举我们可以定义一些带名字的常量。使用枚举可以清晰地表达意图或创建一组有区别的用例。TypeScript支持数字的和基于字符串的枚举。示例代码如下：enum

DeviceType{

ZigBee,

LoRa}console.log(DeviceType.LoRa+"");//从枚举类中取LoRa成员的值，值为1TypeScript的常用基础数据类型void类型void类型一般用于声明函数返回值类型它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是void。（void用来声明的变量没多大作用）。示例代码如下：function

testFun():

void{

//函数没有返回值

return

123;

//编译报错：不能将类型“number”分配给类型“void”}

TypeScript的常用基础数据类型undefined与null类型undefined与null用作变量类型声明用处不大，undefined一般用于变量未初始化时的默认值，null变量用于给变量置空时使用。示例代码如下：

let

cat;

//声明变量cat，但没有初始化

console.log(cat+"");

//undefined

cat

=

null;

if(null

==

cat)

{

console.log(cat+"");

//null

}TypeScript的常用基础数据类型never类型never类型是其他类型的子类型，表示的是那些永不存在的值的类型。用在函数中，用来限制函数永远也执行不到返回值的地方。示例代码如下：function

testFun():

never{

//正确

while(true)

{

//…}

//while循环为恒真，永远也不会执行到这里

}TypeScript的常用基础数据类型联合类型联合类型使用管道符号（|）可以将变量声明为多种类型，例如string|number表示字符串或者数值类型。示例代码如下：let

x:

string|number;x

=

12;

//正确x

=

"haha"

;

//正确x

=

true;

//编译报错TypeScript函数010203060504函数的定义与调用函数的返回值可选参数箭头函数匿名函数默认参数07函数声明函数的定义与调用函数的定义使用function关键字修饰：函数名必须形参个数可选形参对应的类型可选（形参没有设置类型时，使用any类型）形参之间使用逗号隔开返回值类型可选（没有指定返回值类型时，返回值类型由返回值内容确定）function函数名(形参1:类型1,形参2:类型2…):返回值类型{

//要执行的代码}函数的定义与调用函数的定义示例：functiontest()

{

console.log("hello")

//要执行的代码块}函数的调用使用函数名()的形式调用函数，若定义的函数有形参，则调用时要传入实参。test()函数的返回值指定返回值类型时，使用return返回该类型的返回值使用void修饰返回值类型时，表示该函数没有返回值，不能使用return//定义函数，该函数的返回值类型为stringfunction

test100():

string{

return

"hi"

//返回一个string类型的结果}let

res_fun1:

string

=

test100();//调用函数并接收函数的返回值//定义函数，该函数没有返回值function

test200():

void{

return

"hi"

//编译报错}函数的返回值//定义函数，该函数的返回值未指明类型或void，则函数的返回值类型依情况而定function

test300(){

return

123

//返回一个number类型的值}let

res300:

number

=

test300();

//调用函数并接收函数的返回值没有返回值类型修饰时，可以返回任意类型的值，也可以不返回值。（函数的返回值类型由返回值决定）可选参数在TypeScript函数里，如果定义了参数，则调用函数时必须传入指定类型的参数，除非将这些参数设置为可选。可选参数使用问号（？）标识可选参数必须跟在必须参数后面function

test(x:

string,

y?:

number)

//声明一个有可选参数的函数{

//要执行的代码

}test("hi");

//调用函数，正确默认参数当定义了有参数的函数，但是在调用函数的时候，如果不想传入该参数的值，则使用默认参数。function

test(x:

string,

y:

number

=

200)

//声明一个有默认值参数的函数{

console.log(x+"

"+y);}test("hi");

//调用函数，正确，y的值为200注意：同一个参数不能同时设置为可选和默认。匿名函数匿名函数是一个没有函数名的函数，在程序运行时动态声明，除了没有函数名外，其他的与普通函数一样。将匿名函数赋值给一个变量，这种表达式就是匿名函数表达式。let

res

=

function(a:

number,b:

number){

//定义一个带参数的匿名函数

return

a+b;}console.log(res(4,5)+"");

//调用函数，输出：9匿名函数在匿名函数后使用()就是匿名函数的自调用。(function(){

console.log("我是自调用函数");})()

//匿名函数的自调用，输出：我是自调用函数箭头函数匿名函数的另一种简洁写法就是箭头函数的形式（使用=>定义函数，也称作lambda表达式）。/箭头函数：省略function关键字和函数名，使用=>let

res1

=

(x:number,y:

number)=>{

let

a

=

x+y;

console.log(a+"");}//定义有返回值的箭头函数，并且函数中有多行执行语句let

res2

=

(x:number,y:

number):

string=>{

let

a

=

x+y;

console.log(a+"");

return

"ok"}//当函数的执行部分只有一行语句时，{}可以省略let

res3

=

(x:number,y:

number)=>x+y//当函数只有1个参数，()可以省略let

res4

=

x=>x+100;//当函数无参时，可以使用空括号：let

res5

=

()=>

100;重点函数的声明函数声明可以限定函数的名称、参数类型和个数、函数的返回值等。//声明函数myFun，有两个参数，返回值类型为string，声明时同时赋值let

myFun:(x:number,y:string)=>string

=

(a:number,b:string)=>{return

b}//调用函数myFunmyFun(100,'HarmonyOS')TypeScript面向对象编程010203面向对象编程概述TypeScript中类的定义和对象的使用TypeScript中接口的声明和使用面向对象编程（OOP）概述面向对象(ObjectOriented)简称OO，它是一种编程思维，用于指导我们如何应对各种复杂的开发场景。这里说的对象(Object)，意思就是事物，在面向对象的思维中，它将一切都看作是对象，并以对象为切入点去思考问题。使用面向对象思想编程就称作面向对象编程(ObjectOrientedProgramming)，简称OOP。面向对象的相关概念：类对象接口面向对象三大特征：封装、继承和多态...TypeScript中类的定义与对象的使用定义类使用关键字class类中可以有属性和方法类中的属性和方法默认都是public公有的属性可以定义时初始化也可以通过构造方法初始化class

Animal

{

private

name:

string

=

'小动物';

//属性，可以定义时初始化

private

age:

number;

//构造方法给属性做初始化

public

constructor(name:

string,

age:

number)

{

this.name

=

name;

this.age

=

age;

}

//获取属性name的值

public

getName()

{

return

this.name;

}

//设置属性name的值

public

setName(name:

string)

{

this.name

=

name;

}

//age的get()和set()方法省略

//普通方法

public

info():

string

{

return

"Animal

info()

is

running...";

}}TypeScript中类的定义与对象的使用创建对象使用关键字newlet

animal

:Animal

=

new

Animal("小猫",2);console.log(animal.getName());//小猫TypeScript中类的定义与对象的使用继承使用关键字extends子类继承父类的属性和方法子类可以重写父类继承下来的方法子类可以新增属性和方法class

Cat

extends

Animal{

//增加子类的方法略

//重写父类的info()方法

info():

string

{

return

"abc

cat

info";

}}TypeScript中类的定义与对象的使用多态多态是指由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。多态是有前提的，在子类继承父类并重写父类的方法后，使用父类引用指向子类对象，访问的是子类经过重写的方法，从而呈现子类的状态。let

animal2:Animal

=

new

Cat("大猫",3);console.log(());//访问的是Cat类经过重写的方法info()TypeScript中接口的声明与使用接口是特殊的类，使用interface修饰，接口用来限定属性和规定标准行为。声明接口接口中的属性不能初始化接口中的方法没有方法体接口中的属性和方法默认都是public公有的interface

IAnimal

{

name:

string;

//定义接口的一个属性，不能初始化

//sayHi是函数名，该函数没有参数，返回值类型为string

sayHi:

()

=>

string;

//定义接口的抽象方法，不能有方法体}TypeScript中接口的声明与使用实现接口使用关键字implementsclass

Pig

implements

IAnimal

{

name:

string='小猪'

//可以初始化

sayHi():

string

{

//实现接口的方法

return

`Hi,${this.name}`;

}}TypeScript中接口的声明与使用接口多态当类实现了接口中的方法后，接口的引用指向实现类对象，访问的是实现类的方法，从而呈现多种状态。let

animal:

IAnimal

=

new

Pig();//接口的引用指向实现类的对象console.log(animal.sayHi());

//Hi,小猪认识ArkTS工程010203应用程序包结构相关的基本概念ArkTS工程目录结构ArkTS工程的配置文件04ArkTS工程的资源管理应用程序包结构相关的基本概念一个应用包含一个或者多个Module;Module分为“Ability”和“Library”两种类型;“Ability”类型的Module对应于编译后的HAP（HarmonyAbilityPackage）；“Library”类型的Module对应于HAR（HarmonyAbilityResources）包，即编译后的.tgz文件。“Ability”类型的Module的HAP包可分为Entry和Feature两种类型。Entry类型的HAP：是应用的主模块;Feature类型的HAP：是应用的动态特性模块每个HarmonyOS应用可以包含多个.hap文件，一个应用中的.hap文件合在一起称为一个Bundle，而bundleName就是应用的唯一标识（请参见app.json5配置文件中的bundleName标签）ArkTS工程目录结构ArkTS工程的配置文件在基于Stage模型开发的应用项目代码下，都存在app.json5及module.json5两个配置文件。app.json5应用的全局配置信息，包含应用的包名、开发厂商、版本号等基本信息。特定设备类型的配置信息。ArkTS工程的配置文件module.json5：Module的基本配置信息，例如Module名称、类型、描述、支持的设备类型等基本信息。应用组件信息，包含Ability组件和ExtensionAbility组件的描述信息。应用访问系统或其他应用受保护部分所需的权限信息。ArkTS工程的资源管理HarmonyOS资源分为两类：应用资源：借助资源文件能力，开发者在应用中自定义资源，自行管理这些资源在不同的设备或配置中的表现。系统资源：开发者直接使用系统预置的资源定义（即分层参数，同一资源ID在设备类型、深浅色等不同配置下有不同的取值）。ArkTS工程的资源管理应用资源目录应用开发中使用的各类资源文件，需要放入特定子目录中存储管理。在stage模型中，多模块module共有的资源文件放到AppScope下的resources目录。模块独有的资源可以放在该模块的resources目录下。resources目录包括三大类目录：base目录限定词目录rawfile目录ArkTS工程的资源管理创建应用资源文件应用已经提供了一些资源文件，例如用来存放字符串的资源文件string.json，若还想创建其他的资源文件，例如布尔资源文件，则需要开发者自己创建。在资源目录的右键菜单选择“New>XXXResourceFile”，即可创建对应资源组目录的资源文件。例如，在element目录下可新建ElementResourceFile。如右图在element目录下创建一个布尔资源文件，一般文件名命名与根元素同名为boolean。ArkTS工程的资源管理访问应用资源在工程中，通过"$r('')"的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”；name代表资源命名，由开发者定义资源时确定。例如：$r(‘app.string.string_hello’)表示引用字符串资源string_hello，具体是base还是相应限定词目录下的视当前设备的语言、设备类型等情况。另外：引用rawfile下资源时使用"$rawfile('filename')"的形式，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。例如$rawfile(‘test.png’)表示引用rawfile目录下图片。ArkTS工程的资源管理访问系统资源系统资源包含色彩、圆角、字体、间距、字符串及图片等。通过使用系统资源，不同的开发者可以开发出具有相同视觉风格的应用。开发者可以通过“$r('sys.type.resource_id')”的形式引用系统资源。sys代表是系统资源；type代表资源类型，可以取“color”、“float”、“string”、“media”；resource_id代表资源id。例如：$r('sys.color.ohos_id_color_emphasize')认识ArkTS声明式开发010203ArkTS简介ArkUI框架ArkTS声明式开发范式的基本组成04ArkTS中的尺寸单位05ArkTS中组件的公共样式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})//设置底部外边距，底部距离下一个组件30Text()…//.padding(20)

//设置相同的边距值

.padding({left:

20,

top:

30,

right:

40,

bottom:

50})//设置不同的边距值示例：设置组件的内外边距Row与Column组件的使用010203容器组件概述Column和Row组件介绍线性布局的权重设置容器组件概述容器组件是一种比较特殊的组件，它可以包含其他的组件，而且按照一定的规律布局。容器组件除了放置基础组件外，也可以放置容器组件，通过多层布局的嵌套，可以布局出更丰富的页面。ArkTS为我们提供了丰富的容器组件来布局页面，例如使用Column和Row容器组件实现如下效果。Column和Row组件介绍线性布局容器概念Column和Row组件是ArkTS提供用来实现线性布局的容器组件。线性布局表示按照垂直方向或者水平方向排列子组件的容器。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。Column和Row组件介绍主轴与交叉轴的概念在线性布局容器中，存在两根轴，分别是主轴和交叉轴，这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。主轴：在Column容器中的子组件是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向；在Row容器中的组件是按照从左到右的水平方向布局的，其主轴的方向是水平方向。Column和Row组件介绍交叉轴：与主轴垂直相交的轴线，如果主轴是垂直方向，则交叉轴就是水平方向；如果主轴是水平方向，则交叉轴是垂直方向。Column和Row组件介绍主轴与交叉轴的对齐格式Column和Row容器默认都在主轴和交叉轴上居中显示子组件。同时，他们也提供属性justifyContent和alignItems用来设置子组件在主轴和交叉轴的对齐格式。主轴方向的对齐格式（justifyContent）子组件在主轴方向上的对齐使用justifyContent属性来设置，其参数类型是FlexAlign。FlexAlign定义了以下几种类型：StartCenterEndSpaceBetweenSpaceAroundSpaceEvenlyColumn和Row组件介绍Column在主轴上的对齐格式：Row在主轴上的对齐格式：Column和Row组件介绍交叉轴方向的对齐（alignItems）子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。Column容器的主轴是垂直方向，交叉轴是水平方向，其参数类型为HorizontalAlign（水平对齐），HorizontalAlign定义了以下几种类型：Start：设置子组件在水平方向上按照起始端对齐。Center（默认值）：设置子组件在水平方向上居中对齐。End：设置子组件在水平方向上按照末端对齐。Column和Row组件介绍Row容器的主轴是水平方向，交叉轴是垂直方向，其参数类型为VerticalAlign（垂直对齐），VerticalAlign定义了以下几种类型：Top：设置子组件在垂直方向上居顶部对齐。Center（默认值）：设置子组件在竖直方向上居中对齐。Bottom：设置子组件在竖直方向上居底部对齐。线性布局的权重设置权重属性表示一行或一列中的尺寸按照权重比进行分配，仅适用于线性布局组件下的子组件，如果同时设置了某一个方向上的尺寸和权重，此时子组件设置的尺寸不起作用。基础组件1组件概述组件（Component）是界面搭建与显示的最小单位,

HarmonyOSArkUI声明式开发范式为开发者提供了丰富多样的UI组件。组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等。010203文本组件Text图片组件Image空白填充组件Blank04分割线组件Divider文本组件TextText组件用于显示文本信息。常用的属性有：fontSize：设置字体大小fontColor：设置字体颜色textAlign：设置文本对齐格式fontWeight：设置字体权重fontStyle：设置字体样式decoration：设置文本装饰线maxLines：设置文本最大行数textOverFlow：设置文本超长时的显示方式文本组件TextText('Hello,

HarmonyOS;

Hi

ArkUI')

.fontSize(20)

//大小

.fontColor('#ff0000')

//颜色

.textAlign(TextAlign.Center)

//文本的对齐方式(Start/Center/End)

.fontWeight(FontWeight.Bold)

//字重

.fontStyle(FontStyle.Italic)

//样式(正常：Normal

斜体：Italic)

//给文本添加装饰线，Unerline为下划线

.decoration({type:

TextDecorationType.Underline,

color:

Color.Black})

.maxLines(1)

//设置行数为1时可与下面的截断方式配合使用

.textOverflow({overflow:

TextOverflow.Ellipsis})//截断方式图片组件ImageImage组件用来渲染展示图片,只需要给Image组件设置图片地址、宽和高，图片就能显示出来。示例代码如下。Image($r("app.media.icon"))

.width(100)

.height(100)图片地址可以是本地图片也可以是网络图片。引用本地图片资源时，建议使用$r方式来管理需全局使用的图片资源。支持的图片格式包括png、jpg、bmp、svg和gif。图片组件Image图片缩放处理使用objectFit属性设置图片的缩放类型，objectFit的参数类型为ImageFit。ImageFit.Cover（默认值）：保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界；ImageFit.Fill：不保持宽高比进行放大缩小，使得图片充满显示边界，可以看到图片为了适应屏幕，改变了宽高比；ImageFit.Contain：保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内；ImageFit.None：保持原有尺寸显示；ImageFit.ScaleDown：保持宽高比显示，图片缩小或者保持不变。图片组件Image原图ImageFit.CoverImageFit.FillImageFit.ContainImageFit.NoneImageFit.ScaleDown空白填充组件BlankBlank表示空白填充组件，在线性布局容器组件内用来填充组件在主轴方向上的剩余尺寸。例如：在下图中，Blank在Row方向上的使用，除了子组件的本身宽度尺寸外，剩余尺寸用Blank占满，子组件可以很容易实现靠左或靠右摆放。分隔线组件Divider在UI开发中经常用到的分割线，可以用组件Divider实现。使用的示例代码如下。Divider()

//无参

.vertical(true)

//分割线的方向，默认是false水平，true代表垂直方向

.color(Color.Red)

//分割线的颜色

.strokeWidth(1)

//分割线的线宽

.lineCap(LineCapStyle.Round)//分割线的样式开发数据展示页010203弹性布局Flex层叠布局容器Stack进度条组件Progress04滑动条组件Slider弹性布局Flex弹性布局Flex可以灵活的实现线性布局Row和Column的设置效果，Flex的排列方向和对齐格式是在参数中设置的。参数direction的值决定Flex的排列方向。弹性布局Flex参数justfyContent的值决定主轴的对齐格式。参数alignItems的值决定交叉轴的对齐格式。层叠布局容器Stack层叠布局容器组件Stack，是把子组件按照设置的对齐格式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。子组件的对齐方式使用alignContent参数来设置。进度条组件ProgressProgress进度条，用于显示内容加载或操作处理等进度。不同类型的进度条Progress参数：value：指定当前进度值（必填）total：指定进度总长，默认值100.（选填）type：指定进度条类型，默认值ProgressType.Linear（选填）Progress常用属性color：进度条的颜色，默认为蓝色style：进度条的样式，样式内的可选设置有strokeWidth：设置进度条宽度scaleCount：设置环形进度条总刻度scaleWidth：设置环形进度条刻度粗细value：当前进度，会覆盖参数的当前进度进度条组件ProgressProgress({

value:

85,

//参数1：必选,当前进度

total:100,

//参数2：可选,最大进度,默认100

type:

ProgressType.ScaleRing

//参数3：可选,进度条类型})

.size({width:

80,

height:

80})

.color(Color.Pink)

//属性1：进度条的颜色,默认为蓝色

.style({

//属性2：设置进度条的样式

strokeWidth:20,

//strokeWidth：设置进度条宽度

scaleCount:100,

//scaleCount：设置环形进度条总刻度数

scaleWidth:10

//scaleWidth：设置环形进度条刻度粗细

})

.value(22)

//属性3：当前进度,会覆盖参数的当前进度滑动条组件Slider滑动条组件Slider，用来快速调节音量、亮度等。Slider组件默认宽度为父容器宽度的100%。Slider常用的参数说明如下：Slider(value:{value?:

number,

//当前进度值,默认值0

min?:

number,

//设置最小值,默认值0max?:

number,

//设置最大值,默认值100step?:

number,

//设置Slider滑动跳动值,默认值1style?:

SliderStyle

//设置Slider的滑块样式,默认值Outset})滑动条组件SliderSliderStyle的取值有两种SliderStyle.OutSet：滑块在滑轨上SliderStyle.InSet：滑块在滑轨内Slider(){...

}

.blockColor(Color.Red)//设置滑块的颜色

.selectedColor(Color.Green)//设置滑轨的已滑动颜色

.showSteps(true)//默认值false,设置当前是否显示步长刻度值

.showTips(true)//默认值false,设置滑动时是否显示气泡提示百分比}SliderStyle常用的属性滑动条组件SliderSlider滑动时触发onChange的事件回调，value为当前进度值，mode为拖动状态。其中mode有4种：SliderChangeMode.Begin：开始拖动滑块。SliderChangeMode.Moving：正在拖动滑块过程中。SliderChangeMode.End：结束拖动滑块。SliderChangeMode.Click：点击滑动条使滑块位置移动。Slider(){...

}.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

//todo

})弹性布局与层叠布局弹性布局Flex弹性布局Flex可以灵活的实现线性布局Row和Column的设置效果，Flex的排列方向和对齐格式是在参数中设置的。参数direction的值决定Flex的排列方向。弹性布局Flex参数justifyContent的值决定主轴的对齐格式。参数alignItems的值决定交叉轴的对齐格式。弹性布局Flex-使用示例@Entry@Componentstruct

FlexExample

{

build()

{

Flex({

direction:

FlexDirection.Row,

justifyContent:

FlexAlign.End,

alignItems:

ItemAlign.Center

})

{

Text('文本1')

.width('30%')

.height(50)

.backgroundColor(0xF5DEB3)

.textAlign(TextAlign.Center)

Text('文本2')

.width('30%')

.height(70)

.backgroundColor(0xD2B48C)

.textAlign(TextAlign.Center)

Text('文本3')

.width('30%')

.height('100%')

.backgroundColor(0xF5DEB3)

.textAlign(TextAlign.Center)

}.width('100%').height(120).padding(10).backgroundColor(0xAFEEEE)

}}层叠布局容器Stack层叠布局容器组件Stack，是把子组件按照设置的对齐格式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。子组件的对齐方式使用alignContent参数来设置。层叠布局容器Stack-使用示例@Entry@Componentstruct

StackExample

{

build()

{

Stack({

alignContent:

Alignment.Bottom

})

{

Text('第一个子组件').width('90%').height('100%').backgroundColor('#d2cab3').align(Alignment.Top)

Text('第二个子组件').width('70%').height('60%').backgroundColor('#c1cbac').align(Alignment.Top)

Text('第三个子组件').width('50%').height('30%').backgroundColor('#e0e3d8').align(Alignment.Top)

}.width('100%').height(150).margin({

top:

5

})

}}进度条和滑动条进度条组件ProgressProgress进度条，用于显示内容加载进度或操作处理进度等。不同类型的进度条Progress参数：value：指定当前进度值（必填）total：指定进度总长，默认值100.（选填）type：指定进度条类型，默认值ProgressType.Linear（选填）Progress常用属性color：进度条的颜色，默认为蓝色style：进度条的样式，样式内的可选设置有strokeWidth：设置进度条宽度scaleCount：设置环形进度条总刻度scaleWidth：设置环形进度条刻度粗细value：当前进度，会覆盖参数的当前进度进度条组件Progress-使用示例Progress({

value:

85,

//参数1：必选,当前进度

total:100,

//参数2：可选,最大进度,默认100

type:

ProgressType.ScaleRing

//参数3：可选,进度条类型})

.size({width:

80,

height:

80})

.color(Color.Pink)

//属性1：进度条的颜色,默认为蓝色

.style({

//属性2：设置进度条的样式

strokeWidth:20,

//strokeWidth：设置进度条宽度

scaleCount:100,

//scaleCount：设置环形进度条总刻度数

scaleWidth:10

//scaleWidth：设置环形进度条刻度粗细

})

.value(22)

//属性3：当前进度,会覆盖参数的当前进度滑动条组件Slider滑动条组件Slider，用来快速调节音量、亮度等。Slider组件默认宽度为父容器宽度的100%。Slider常用的参数：Slider(value:{value?:

number,

//当前进度值,默认值0

min?:

number,

//设置最小值,默认值0max?:

number,

//设置最大值,默认值100step?:

number,

//设置Slider滑动跳动值,默认值1style?:

SliderStyle

//设置Slider的滑块样式,默认值OutSet})滑动条组件SliderSliderStyle的取值有两种SliderStyle.OutSet：滑块在滑轨上SliderStyle.InSet：滑块在滑轨内Slider(){...

}

.blockColor(Color.Red)//设置滑块的颜色

.selectedColor(Color.Green)//设置滑轨的已滑动颜色

.showSteps(true)//默认值false,设置当前是否显示步长刻度值

.showTips(true)//默认值false,设置滑动时是否显示气泡提示百分比}Slider常用的属性滑动条组件SliderSlider滑动时触发onChange的事件回调，在回调方法内箭头函数的参数value为当前进度值，mode为拖动状态。其中mode有4种：SliderChangeMode.Begin：开始拖动滑块。SliderChangeMode.Moving：正在拖动滑块过程中。SliderChangeMode.End：结束拖动滑块。SliderChangeMode.Click：点击滑动条使滑块位置移动。Slider(){...

}.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

//todo

})滑动组件Slider-使用示例@Entry@Componentstruct

SliderExample

{

@State

inSetValue:

number

=

40

build()

{

Column({

space:

8

})

{

Text('滑块在导轨内').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)

Row()

{

Slider({

value:

this.inSetValue,

step:

10,

style:

SliderStyle.InSet

})

.blockColor('#191970').trackColor('#ADD8E6').selectedColor('#4169E1')

.showSteps(true)

.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

this.inSetValue

=

value

console.info('value:'

+

value

+

'mode:'

+

mode.toString())

})

Text(this.inSetValue+"").fontSize(12)

}

.width('80%')

}.width('100%')

}}开发登录页010203输入框组件Input按钮组件Button开关组件Toggle04文本提示框promptAction输入框组件TextInputTextInput组件用于输入单行文本，响应输入事件。TextInput的使用也非常广泛，例如在登录页中的账号输入和密码输入。TextInput组件支持文本样式设置TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)

.fontWeight(FontWeight.Bold)

.fontFamily('Arial')输入框组件TextInput设置输入提示文本我们平常使用输入框时常常看到输入框上会有提示文字，例如登录账号时会有“请输入账号”这样的文本提示，当用户输入内容后，提示文本就消失了。使用placeholder设置提示文本使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式。TextInput({

placeholder:

'请输入帐号'

})

.placeholderColor(‘#999999')

.placeholderFont({

size:

20,

weight:

FontWeight.Medium,

family:

'cursive',

style:

FontStyle.Italic

})输入框组件TextInput设置输入类型可以使用type属性来设置输入框类型。例如密码输入框，一般输入密码的时候，为了用户密码安全，内容会显示为“”。这种情况就可以设置type属性值为InputType.Password实现，如下面示例所示。TextInput({

placeholder:

'请输入密码'

})

.type(InputType.Password)输入框组件TextInput输入类型InputType枚举值：Normal：基本输入模式。支持输入数字、字母、下划线、空格、特殊字符。Password：密码输入模式。Email：e-mail地址输入模式。Number：纯数字输入模式。输入框组件TextInput获取输入文本在onChange事件回调方法中，获取输入框的输入文本。如下面示例所示。

TextInput({

placeholder:

'请输入账号'

})

.onChange((value:

string)

=>

{

this.text

=

value//this.text为@State修饰的状态变量

})按钮组件ButtonButton组件主要用来响应点击操作，可以包含子组件。Button使用示例Button('登录',

{

type:

ButtonType.Capsule,

stateEffect:

true

})

.width('90%')

.onClick(()

=>

{

//处理点击事件逻辑

}))示例中的代码，type用于定义按钮样式，ButtonType.Capsule表示胶囊形按钮；stateEffect用于设置按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭，默认值为true。并且给Button绑定onClick事件，每当用户点击Button的时候，就会回调执行onClick方法，调用里面的逻辑代码。按钮组件Button按钮样式ButtonType枚举值Capsule：胶囊型按钮（圆角默认为高度的一半）。Circle：圆形按钮。Normal：普通按钮（默认不带圆角）。按钮组件Button包含子组件Button组件可以包含子组件，例如在Button组件包含了一个Image组件。Button({

type:

ButtonType.Circle,

stateEffect:

true

})

{

Image($r('app.media.icon_delete'))

.width(30)

.height(30)}.width(55).height(55).backgroundColor('#317aff')开关组件ToggleToggle组件表示开关，开关状态的初始化用isOn参数进行设置；使用type设置开关样式，开关状态切换时触发onChange事件回调方法。Toggle({

isOn:true,

//设置开关状态组件初始化状态为开

type:

ToggleType.Switch})//设置组件为开关样式

.selectedColor("#ffa6c88c")//设置组件打开状态的背景颜色

.switchPointColor(Color.Red)//设置

type类型为

Switch时的圆形滑块颜色

.onChange((isOn)

=>

{//事件回调,isOn为开与关的状态值

console.log(

"开关状态："

+

isOn)

})Toggle的type样式：ToggleType.Switch为开关样式；ToggleType.Checkbox为单选框样式；ToggleType.Button为按钮样式，可以在Toggle中加入子组件。文本提示框promptActionpromptAction是在@mptAction模块里提供的，使用时需要导入@mptAction模块，用promptAction.showToast()提示信息。import

promptAction

from

'@mptAction';

//导入文本提示框模块…

promptAction.showToast({

message:

"消息",

//显示文本，必填项

duration:

2000,

//显示时长，可选项，单位毫秒，范围

[1500,

10000]，默1500

bottom:

1000

//Toast的显示位置距离底部的间距，可选项

})基础组件2010203输入框组件Input按钮组件Button开关组件Toggle输入框组件TextInputTextInput组件用于输入单行文本，响应输入事件。TextInput的使用也非常广泛，例如在登录页中的账号输入和密码输入。TextInput组件支持文本样式设置TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)

.fontWeight(FontWeight.Bold)

.fontFamily('Arial')输入框组件TextInput设置输入提示文本我们平常使用输入框时常常看到输入框上会有提示文字，例如登录账号时会有“请输入账号”这样的文本提示，当用户输入内容后，提示文本就消失了。使用placeholder设置提示文本使用placeholderColor和placeholderFont分别设置提示文本的颜色和样式。TextInput({

placeholder:

'请输入帐号'

})

.placeholderColor(‘#999999')

.placeholderFont({

size:

20,

weight:

FontWeight.Medium,

family:

'cursive',

style:

FontStyle.Italic

})输入框组件TextInput设置输入类型可以使用type属性来设置输入框类型。例如密码输入框，一般输入密码的时候，为了用户密码安全，内容会显示为“”。这种情况就可以设置type属性值为InputTyp