《HarmonyOS應用開發(fā)基礎》 課件全套 知識點+實操 單元1-3 HarmonyOS應用開發(fā)準備 - Stage模型下的業(yè)務能力開發(fā)

HarmonyOS簡介了解鴻蒙鴻蒙發(fā)展歷史了解OpenHarmonyOpenHarmony是由開放原子開源基金會（OpenAtomFoundation）孵化及運營的開源項目，目標是面向全場景、全連接、全智能時代，基于開源的方式，搭建一個智能終端設備操作系統(tǒng)的框架和平臺，促進萬物互聯(lián)產業(yè)的繁榮發(fā)展。OpenHarmony提供一個智能終端設備的操作系統(tǒng)底座框架和平臺，參與者只要遵循開源協(xié)議和法律，就可以持續(xù)為OpenHarmony開源項目貢獻代碼，共同促進萬物全場景、全連接、全智能的互聯(lián)產業(yè)的繁榮發(fā)展。項目地址為：/openharmony。

了解HarmonyOSHarmonyOS就是鴻蒙操作系統(tǒng)，是商用版本，是華為基于OpenHarmony、AOSP(AndroidOpenSourceProject)等開源項目推出的新一代智能終端操作系統(tǒng)，HarmonyOS手機和平板也能運行Android應用，是因為HarmonyOS遵循了Android的AOSP。HarmonyOS系統(tǒng)架構HarmonyOS整體遵從分層設計，從下向上依次為：內核層、系統(tǒng)服務層、框架層和應用層。1+8+N全場景應用HarmonyOS是一個支持多設備的操作系統(tǒng)，“一生萬物，萬物歸一”。HarmonyOS以手機為核心，將生活場景中的各類終端進行能力整合，構建1+8+N全場景應用，實現(xiàn)不同終端設備之間的快速連接、服務流轉、能力互助、資源共享，匹配合適的設備、提供流暢的全場景體驗。開發(fā)前準備了解DevEcoStudioHUAWEIDevEcoStudio（簡稱DevEcoStudio）是面向華為終端全場景多設備的一站式集成開發(fā)環(huán)境（IDE），除了創(chuàng)建工程、開發(fā)、編譯、調試、發(fā)布等功能外，DevEcoStudio還可以支持多設備開發(fā)，實時預覽器/模擬器等。DevEcoStudio支持多設備預覽、模擬器運行、真機運行三種方式。開發(fā)者可以在DevEcoStudio中使用遠程模擬器（RemoteEmulator）運行應用，也可以下載本地模擬器（LocalEmulator）運行應用，開發(fā)者還可以使用超級終端模擬器（SuperDevice）調測跨設備的應用。搭建開發(fā)環(huán)境流程DevEcoStudio支持Windows系統(tǒng)和macOS系統(tǒng)，在開發(fā)HarmonyOS應用/服務前，需要配置HarmonyOS應用/服務的開發(fā)環(huán)境。Node.js與npmNode.js是什么?Node.js是一個基于GoogleV8引擎開發(fā)的C++程序Javascript運行環(huán)境(runtime)，具有事件驅動、非阻塞I/O的特點。Node.js的優(yōu)點響應速度快易于擴展適合在分布式設備上運行數(shù)據密集型的實時應用npm

是

NodePackageManager的縮寫，意思是Node.js的包管理系統(tǒng)。安裝了Node.js后，自動會安裝npm。認識DevEcoStudio界面認識TypeScript01020304JavaScript和TypeScript概述TypeScript程序的編譯與運行TypeScript語法說明TypeScript變量聲明JavaScript與ES6JavaScript語言（簡稱“JS”）解釋型腳本語言廣泛應用在Web端、移動端、小程序端、桌面端、服務端動態(tài)類型語言ES6（全稱“ECMAScript6.0”）JavaScript的一個版本標準2015年6月，ES6版本正式成為國際標準TypeScript簡介TypeScript（簡稱“TS”）微軟開發(fā)的一種開放源代碼語言JS的一個超集提供編譯時的靜態(tài)類型檢查ArkTS鴻蒙生態(tài)的一種應用開發(fā)語言TS的一個超集擴展了聲明式UI、狀態(tài)管理等相應的能力JS、TS、ArkTS三者關系TypeScript程序的編譯和運行編譯使用tsc命令將TS文件.ts編譯成JS文件例如：tsctest.ts運行使用node命令執(zhí)行編譯生成的JS文件例如：nodetest.jsTypeScript語法說明TypeScript是面向對象語言，與C?；騄ava類似。相同之處：可以使用數(shù)據類型定義變量具有函數(shù)、類、接口、枚舉等類型。不同之處：TS結束語句可以使用分號也可以不使用分號TS字符串可以使用單引號也可以使用雙引號示例：TypeScript變量聲明TypeScript變量的命名規(guī)則：變量名稱可以包含數(shù)字和字母；除了下劃線_和美元$符號外，不能包含其他特殊字符，包括空格；變量名不能以數(shù)字開頭；不能是關鍵字，例如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常用基礎數(shù)據類型TypeScript的常用基礎數(shù)據類型TypeScript的常用基礎數(shù)據類型有：any（任意類型）number（數(shù)字類型）string（字符串類型）boolean（布爾類型）數(shù)組類型tuple（元組類型）enum（枚舉類型）void類型null和undefined類型never類型TypeScript的常用基礎數(shù)據類型any類型聲明為any的變量可以賦予任意類型的值示例代碼如下：let

data:

any;

//聲明變量data為any類型data

=

"hello";

//將字符串賦值給dataconsole.log(typeof(data));

//輸出data的類型為stringTypeScript的常用基礎數(shù)據類型number類型number代表數(shù)字類型，是浮點值，它可以用來表示整數(shù)和小數(shù)。示例代碼如下：let

data:

number;

//聲明變量data為數(shù)字類型data

=

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

//numberTypeScript的常用基礎數(shù)據類型string類型string代表字符串類型，使用單引號（‘）或雙引號（“）來表示字符串類型，反引號（`）來定義多行文本和內嵌表達式，反引號中的${變量名}會替換成相應的變量的值。示例代碼如下：let

data1:

string

=

"hello";

//聲明變量data為字符串類型let

data2

=

`${data1}`;

//使用反引號,${變量名}會獲取到相應變量的值console.log(data2);

//hello

TypeScript的常用基礎數(shù)據類型boolean類型boolean代表布爾類型，表示邏輯值：true和false。示例代碼如下：let

data:

boolean

=

true;

//聲明變量data為布爾類型TypeScript的常用基礎數(shù)據類型數(shù)組類型數(shù)組里放的都是類型相同的數(shù)據。有兩種方式可以定義數(shù)組。第一種，可以在元素類型后面接上[]。第二種使用數(shù)組泛型，Array<元素類型>。示例代碼如下：//聲明變量datas為數(shù)組類型，數(shù)組中都是數(shù)字，聲明數(shù)組時同時初始化值let

datas:

number[]

=

[4,8,7];//聲明變量temps為數(shù)組泛型，數(shù)組中的數(shù)據類型是numberlet

temps:

Array<string>

=

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

//獲取temps數(shù)組的第2個成員的值，值為ArkTSTypeScript的常用基礎數(shù)據類型元組類型元組類型允許表示一個已知元素數(shù)量和類型的數(shù)組，各元素的類型不必相同，初始化值時對應位置的數(shù)據類型要相同。示例代碼如下：let

temps:

[number,string,boolean]

=

[2,'Hi',false];

//個數(shù)、類型、順序要一致temps

=

["UI",'HarmonyOS',true];//編譯報錯：不能將類型“string”分配給類型“number”TypeScript的常用基礎數(shù)據類型枚舉類型使用枚舉我們可以定義一些帶名字的常量。使用枚舉可以清晰地表達意圖或創(chuàng)建一組有區(qū)別的用例。TypeScript支持數(shù)字的和基于字符串的枚舉。示例代碼如下：enum

DeviceType{

ZigBee,

LoRa}console.log(DeviceType.LoRa+"");//從枚舉類中取LoRa成員的值，值為1TypeScript的常用基礎數(shù)據類型void類型void類型一般用于聲明函數(shù)返回值類型它表示沒有任何類型。當一個函數(shù)沒有返回值時，你通常會見到其返回值類型是void。（void用來聲明的變量沒多大作用）。示例代碼如下：function

testFun():

void{

//函數(shù)沒有返回值

return

123;

//編譯報錯：不能將類型“number”分配給類型“void”}

TypeScript的常用基礎數(shù)據類型undefined與null類型undefined與null用作變量類型聲明用處不大，undefined一般用于變量未初始化時的默認值，null變量用于給變量置空時使用。示例代碼如下：

let

cat;

//聲明變量cat，但沒有初始化

console.log(cat+"");

//undefined

cat

=

null;

if(null

==

cat)

{

console.log(cat+"");

//null

}TypeScript的常用基礎數(shù)據類型never類型never類型是其他類型的子類型，表示的是那些永不存在的值的類型。用在函數(shù)中，用來限制函數(shù)永遠也執(zhí)行不到返回值的地方。示例代碼如下：function

testFun():

never{

//正確

while(true)

{

//…}

//while循環(huán)為恒真，永遠也不會執(zhí)行到這里

}TypeScript的常用基礎數(shù)據類型聯(lián)合類型聯(lián)合類型使用管道符號（|）可以將變量聲明為多種類型，例如string|number表示字符串或者數(shù)值類型。示例代碼如下：let

x:

string|number;x

=

12;

//正確x

=

"haha"

;

//正確x

=

true;

//編譯報錯TypeScript函數(shù)010203060504函數(shù)的定義與調用函數(shù)的返回值可選參數(shù)箭頭函數(shù)匿名函數(shù)默認參數(shù)07函數(shù)聲明函數(shù)的定義與調用函數(shù)的定義使用function關鍵字修飾：函數(shù)名必須形參個數(shù)可選形參對應的類型可選（形參沒有設置類型時，使用any類型）形參之間使用逗號隔開返回值類型可選（沒有指定返回值類型時，返回值類型由返回值內容確定）function函數(shù)名(形參1:類型1,形參2:類型2…):返回值類型{

//要執(zhí)行的代碼}函數(shù)的定義與調用函數(shù)的定義示例：functiontest()

{

console.log("hello")

//要執(zhí)行的代碼塊}函數(shù)的調用使用函數(shù)名()的形式調用函數(shù)，若定義的函數(shù)有形參，則調用時要傳入實參。test()函數(shù)的返回值指定返回值類型時，使用return返回該類型的返回值使用void修飾返回值類型時，表示該函數(shù)沒有返回值，不能使用return//定義函數(shù)，該函數(shù)的返回值類型為stringfunction

test100():

string{

return

"hi"

//返回一個string類型的結果}let

res_fun1:

string

=

test100();//調用函數(shù)并接收函數(shù)的返回值//定義函數(shù)，該函數(shù)沒有返回值function

test200():

void{

return

"hi"

//編譯報錯}函數(shù)的返回值//定義函數(shù)，該函數(shù)的返回值未指明類型或void，則函數(shù)的返回值類型依情況而定function

test300(){

return

123

//返回一個number類型的值}let

res300:

number

=

test300();

//調用函數(shù)并接收函數(shù)的返回值沒有返回值類型修飾時，可以返回任意類型的值，也可以不返回值。（函數(shù)的返回值類型由返回值決定）可選參數(shù)在TypeScript函數(shù)里，如果定義了參數(shù)，則調用函數(shù)時必須傳入指定類型的參數(shù)，除非將這些參數(shù)設置為可選。可選參數(shù)使用問號（？）標識可選參數(shù)必須跟在必須參數(shù)后面function

test(x:

string,

y?:

number)

//聲明一個有可選參數(shù)的函數(shù){

//要執(zhí)行的代碼

}test("hi");

//調用函數(shù)，正確默認參數(shù)當定義了有參數(shù)的函數(shù)，但是在調用函數(shù)的時候，如果不想傳入該參數(shù)的值，則使用默認參數(shù)。function

test(x:

string,

y:

number

=

200)

//聲明一個有默認值參數(shù)的函數(shù){

console.log(x+"

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

//調用函數(shù)，正確，y的值為200注意：同一個參數(shù)不能同時設置為可選和默認。匿名函數(shù)匿名函數(shù)是一個沒有函數(shù)名的函數(shù)，在程序運行時動態(tài)聲明，除了沒有函數(shù)名外，其他的與普通函數(shù)一樣。將匿名函數(shù)賦值給一個變量，這種表達式就是匿名函數(shù)表達式。let

res

=

function(a:

number,b:

number){

//定義一個帶參數(shù)的匿名函數(shù)

return

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

//調用函數(shù)，輸出：9匿名函數(shù)在匿名函數(shù)后使用()就是匿名函數(shù)的自調用。(function(){

console.log("我是自調用函數(shù)");})()

//匿名函數(shù)的自調用，輸出：我是自調用函數(shù)箭頭函數(shù)匿名函數(shù)的另一種簡潔寫法就是箭頭函數(shù)的形式（使用=>定義函數(shù)，也稱作lambda表達式）。/箭頭函數(shù)：省略function關鍵字和函數(shù)名，使用=>let

res1

=

(x:number,y:

number)=>{

let

a

=

x+y;

console.log(a+"");}//定義有返回值的箭頭函數(shù)，并且函數(shù)中有多行執(zhí)行語句let

res2

=

(x:number,y:

number):

string=>{

let

a

=

x+y;

console.log(a+"");

return

"ok"}//當函數(shù)的執(zhí)行部分只有一行語句時，{}可以省略let

res3

=

(x:number,y:

number)=>x+y//當函數(shù)只有1個參數(shù)，()可以省略let

res4

=

x=>x+100;//當函數(shù)無參時，可以使用空括號：let

res5

=

()=>

100;重點函數(shù)的聲明函數(shù)聲明可以限定函數(shù)的名稱、參數(shù)類型和個數(shù)、函數(shù)的返回值等。//聲明函數(shù)myFun，有兩個參數(shù)，返回值類型為string，聲明時同時賦值let

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

=

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

b}//調用函數(shù)myFunmyFun(100,'HarmonyOS')TypeScript面向對象編程010203面向對象編程概述TypeScript中類的定義和對象的使用TypeScript中接口的聲明和使用面向對象編程（OOP）概述面向對象(ObjectOriented)簡稱OO，它是一種編程思維，用于指導我們如何應對各種復雜的開發(fā)場景。這里說的對象(Object)，意思就是事物，在面向對象的思維中，它將一切都看作是對象，并以對象為切入點去思考問題。使用面向對象思想編程就稱作面向對象編程(ObjectOrientedProgramming)，簡稱OOP。面向對象的相關概念：類對象接口面向對象三大特征：封裝、繼承和多態(tài)...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中類的定義與對象的使用創(chuàng)建對象使用關鍵字newlet

animal

:Animal

=

new

Animal("小貓",2);console.log(animal.getName());//小貓TypeScript中類的定義與對象的使用繼承使用關鍵字extends子類繼承父類的屬性和方法子類可以重寫父類繼承下來的方法子類可以新增屬性和方法class

Cat

extends

Animal{

//增加子類的方法略

//重寫父類的info()方法

info():

string

{

return

"abc

cat

info";

}}TypeScript中類的定義與對象的使用多態(tài)多態(tài)是指由繼承而產生了相關的不同的類，對同一個方法可以有不同的響應。多態(tài)是有前提的，在子類繼承父類并重寫父類的方法后，使用父類引用指向子類對象，訪問的是子類經過重寫的方法，從而呈現(xiàn)子類的狀態(tài)。let

animal2:Animal

=

new

Cat("大貓",3);console.log(());//訪問的是Cat類經過重寫的方法info()TypeScript中接口的聲明與使用接口是特殊的類，使用interface修飾，接口用來限定屬性和規(guī)定標準行為。聲明接口接口中的屬性不能初始化接口中的方法沒有方法體接口中的屬性和方法默認都是public公有的interface

IAnimal

{

name:

string;

//定義接口的一個屬性，不能初始化

//sayHi是函數(shù)名，該函數(shù)沒有參數(shù)，返回值類型為string

sayHi:

()

=>

string;

//定義接口的抽象方法，不能有方法體}TypeScript中接口的聲明與使用實現(xiàn)接口使用關鍵字implementsclass

Pig

implements

IAnimal

{

name:

string='小豬'

//可以初始化

sayHi():

string

{

//實現(xiàn)接口的方法

return

`Hi,${this.name}`;

}}TypeScript中接口的聲明與使用接口多態(tài)當類實現(xiàn)了接口中的方法后，接口的引用指向實現(xiàn)類對象，訪問的是實現(xiàn)類的方法，從而呈現(xiàn)多種狀態(tài)。let

animal:

IAnimal

=

new

Pig();//接口的引用指向實現(xiàn)類的對象console.log(animal.sayHi());

//Hi,小豬認識ArkTS工程010203應用程序包結構相關的基本概念ArkTS工程目錄結構ArkTS工程的配置文件04ArkTS工程的資源管理應用程序包結構相關的基本概念一個應用包含一個或者多個Module;Module分為“Ability”和“Library”兩種類型;“Ability”類型的Module對應于編譯后的HAP（HarmonyAbilityPackage）；“Library”類型的Module對應于HAR（HarmonyAbilityResources）包，即編譯后的.tgz文件?！癆bility”類型的Module的HAP包可分為Entry和Feature兩種類型。Entry類型的HAP：是應用的主模塊;Feature類型的HAP：是應用的動態(tài)特性模塊每個HarmonyOS應用可以包含多個.hap文件，一個應用中的.hap文件合在一起稱為一個Bundle，而bundleName就是應用的唯一標識（請參見app.json5配置文件中的bundleName標簽）ArkTS工程目錄結構ArkTS工程的配置文件在基于Stage模型開發(fā)的應用項目代碼下，都存在app.json5及module.json5兩個配置文件。app.json5應用的全局配置信息，包含應用的包名、開發(fā)廠商、版本號等基本信息。特定設備類型的配置信息。ArkTS工程的配置文件module.json5：Module的基本配置信息，例如Module名稱、類型、描述、支持的設備類型等基本信息。應用組件信息，包含Ability組件和ExtensionAbility組件的描述信息。應用訪問系統(tǒng)或其他應用受保護部分所需的權限信息。ArkTS工程的資源管理HarmonyOS資源分為兩類：應用資源：借助資源文件能力，開發(fā)者在應用中自定義資源，自行管理這些資源在不同的設備或配置中的表現(xiàn)。系統(tǒng)資源：開發(fā)者直接使用系統(tǒng)預置的資源定義（即分層參數(shù)，同一資源ID在設備類型、深淺色等不同配置下有不同的取值）。ArkTS工程的資源管理應用資源目錄應用開發(fā)中使用的各類資源文件，需要放入特定子目錄中存儲管理。在stage模型中，多模塊module共有的資源文件放到AppScope下的resources目錄。模塊獨有的資源可以放在該模塊的resources目錄下。resources目錄包括三大類目錄：base目錄限定詞目錄rawfile目錄ArkTS工程的資源管理創(chuàng)建應用資源文件應用已經提供了一些資源文件，例如用來存放字符串的資源文件string.json，若還想創(chuàng)建其他的資源文件，例如布爾資源文件，則需要開發(fā)者自己創(chuàng)建。在資源目錄的右鍵菜單選擇“New>XXXResourceFile”，即可創(chuàng)建對應資源組目錄的資源文件。例如，在element目錄下可新建ElementResourceFile。如右圖在element目錄下創(chuàng)建一個布爾資源文件，一般文件名命名與根元素同名為boolean。ArkTS工程的資源管理訪問應用資源在工程中，通過"$r('')"的形式引用應用資源。app代表是應用內resources目錄中定義的資源；type代表資源類型（或資源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”；name代表資源命名，由開發(fā)者定義資源時確定。例如：$r(‘app.string.string_hello’)表示引用字符串資源string_hello，具體是base還是相應限定詞目錄下的視當前設備的語言、設備類型等情況。另外：引用rawfile下資源時使用"$rawfile('filename')"的形式，filename需要表示為rawfile目錄下的文件相對路徑，文件名需要包含后綴，路徑開頭不可以以"/"開頭。例如$rawfile(‘test.png’)表示引用rawfile目錄下圖片。ArkTS工程的資源管理訪問系統(tǒng)資源系統(tǒng)資源包含色彩、圓角、字體、間距、字符串及圖片等。通過使用系統(tǒng)資源，不同的開發(fā)者可以開發(fā)出具有相同視覺風格的應用。開發(fā)者可以通過“$r('sys.type.resource_id')”的形式引用系統(tǒng)資源。sys代表是系統(tǒng)資源；type代表資源類型，可以取“color”、“float”、“string”、“media”；resource_id代表資源id。例如：$r('sys.color.ohos_id_color_emphasize')認識ArkTS聲明式開發(fā)010203ArkTS簡介ArkUI框架ArkTS聲明式開發(fā)范式的基本組成04ArkTS中的尺寸單位05ArkTS中組件的公共樣式ArkTS簡介ArkTS是HarmonyOS優(yōu)選的主力應用開發(fā)語言。ArkTS基于TypeScript（簡稱TS）語言擴展而來，是TS的超集。ArkTS繼承了TS的所有特征ArkTS在TS的基礎上擴展了聲明式UI能力，當前擴展的聲明式UI能力包括如下特征：基本UI描述狀態(tài)管理動態(tài)構建UI元素渲染控制使用限制與擴展ArkUI框架ArkUI是基于ArkTS的UI框架，基于ArkTS提供的擴展語法，如下圖所示。ArkTS聲明式開發(fā)范式的基本組成ArkTS聲明式開發(fā)范式的基本組成：裝飾器自定義組件UI描述內置組件屬性方法事件方法ArkTS中的尺寸單位ArkTS提供了4種像素單位，分別是px、vp、fp和lpx，框架采用vp為基準數(shù)據單位。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組件介紹線性布局的權重設置容器組件概述容器組件是一種比較特殊的組件，它可以包含其他的組件，而且按照一定的規(guī)律布局。容器組件除了放置基礎組件外，也可以放置容器組件，通過多層布局的嵌套，可以布局出更豐富的頁面。ArkTS為我們提供了豐富的容器組件來布局頁面，例如使用Column和Row容器組件實現(xiàn)如下效果。Column和Row組件介紹線性布局容器概念Column和Row組件是ArkTS提供用來實現(xiàn)線性布局的容器組件。線性布局表示按照垂直方向或者水平方向排列子組件的容器。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。Column和Row組件介紹主軸與交叉軸的概念在線性布局容器中，存在兩根軸，分別是主軸和交叉軸，這兩個軸始終是相互垂直的。不同的容器中主軸的方向不一樣的。主軸：在Column容器中的子組件是按照從上到下的垂直方向布局的，其主軸的方向是垂直方向；在Row容器中的組件是按照從左到右的水平方向布局的，其主軸的方向是水平方向。Column和Row組件介紹交叉軸：與主軸垂直相交的軸線，如果主軸是垂直方向，則交叉軸就是水平方向；如果主軸是水平方向，則交叉軸是垂直方向。Column和Row組件介紹主軸與交叉軸的對齊格式Column和Row容器默認都在主軸和交叉軸上居中顯示子組件。同時，他們也提供屬性justifyContent和alignItems用來設置子組件在主軸和交叉軸的對齊格式。主軸方向的對齊格式（justifyContent）子組件在主軸方向上的對齊使用justifyContent屬性來設置，其參數(shù)類型是FlexAlign。FlexAlign定義了以下幾種類型：StartCenterEndSpaceBetweenSpaceAroundSpaceEvenlyColumn和Row組件介紹Column在主軸上的對齊格式：Row在主軸上的對齊格式：Column和Row組件介紹交叉軸方向的對齊（alignItems）子組件在交叉軸方向上的對齊方式使用alignItems屬性來設置。Column容器的主軸是垂直方向，交叉軸是水平方向，其參數(shù)類型為HorizontalAlign（水平對齊），HorizontalAlign定義了以下幾種類型：Start：設置子組件在水平方向上按照起始端對齊。Center（默認值）：設置子組件在水平方向上居中對齊。End：設置子組件在水平方向上按照末端對齊。Column和Row組件介紹Row容器的主軸是水平方向，交叉軸是垂直方向，其參數(shù)類型為VerticalAlign（垂直對齊），VerticalAlign定義了以下幾種類型：Top：設置子組件在垂直方向上居頂部對齊。Center（默認值）：設置子組件在豎直方向上居中對齊。Bottom：設置子組件在豎直方向上居底部對齊。線性布局的權重設置權重屬性表示一行或一列中的尺寸按照權重比進行分配，僅適用于線性布局組件下的子組件，如果同時設置了某一個方向上的尺寸和權重，此時子組件設置的尺寸不起作用?；A組件1組件概述組件（Component）是界面搭建與顯示的最小單位,

HarmonyOSArkUI聲明式開發(fā)范式為開發(fā)者提供了豐富多樣的UI組件。組件根據功能可以分為以下五大類：基礎組件、容器組件、媒體組件、繪制組件、畫布組件。其中基礎組件是視圖層的基本組成單元，包括Text、Image、TextInput、Button、LoadingProgress等。010203文本組件Text圖片組件Image空白填充組件Blank04分割線組件Divider文本組件TextText組件用于顯示文本信息。常用的屬性有：fontSize：設置字體大小fontColor：設置字體顏色textAlign：設置文本對齊格式fontWeight：設置字體權重fontStyle：設置字體樣式decoration：設置文本裝飾線maxLines：設置文本最大行數(shù)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)

//設置行數(shù)為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的參數(shù)類型為ImageFit。ImageFit.Cover（默認值）：保持寬高比進行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界；ImageFit.Fill：不保持寬高比進行放大縮小，使得圖片充滿顯示邊界，可以看到圖片為了適應屏幕，改變了寬高比；ImageFit.Contain：保持寬高比進行縮小或者放大，使得圖片完全顯示在顯示邊界內；ImageFit.None：保持原有尺寸顯示；ImageFit.ScaleDown：保持寬高比顯示，圖片縮小或者保持不變。圖片組件Image原圖ImageFit.CoverImageFit.FillImageFit.ContainImageFit.NoneImageFit.ScaleDown空白填充組件BlankBlank表示空白填充組件，在線性布局容器組件內用來填充組件在主軸方向上的剩余尺寸。例如：在下圖中，Blank在Row方向上的使用，除了子組件的本身寬度尺寸外，剩余尺寸用Blank占滿，子組件可以很容易實現(xiàn)靠左或靠右擺放。分隔線組件Divider在UI開發(fā)中經常用到的分割線，可以用組件Divider實現(xiàn)。使用的示例代碼如下。Divider()

//無參

.vertical(true)

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

.color(Color.Red)

//分割線的顏色

.strokeWidth(1)

//分割線的線寬

.lineCap(LineCapStyle.Round)//分割線的樣式開發(fā)數(shù)據展示頁010203彈性布局Flex層疊布局容器Stack進度條組件Progress04滑動條組件Slider彈性布局Flex彈性布局Flex可以靈活的實現(xiàn)線性布局Row和Column的設置效果，F(xiàn)lex的排列方向和對齊格式是在參數(shù)中設置的。參數(shù)direction的值決定Flex的排列方向。彈性布局Flex參數(shù)justfyContent的值決定主軸的對齊格式。參數(shù)alignItems的值決定交叉軸的對齊格式。層疊布局容器Stack層疊布局容器組件Stack，是把子組件按照設置的對齊格式順序依次堆疊，后一個子組件覆蓋在前一個子組件上邊。子組件的對齊方式使用alignContent參數(shù)來設置。進度條組件ProgressProgress進度條，用于顯示內容加載或操作處理等進度。不同類型的進度條Progress參數(shù)：value：指定當前進度值（必填）total：指定進度總長，默認值100.（選填）type：指定進度條類型，默認值ProgressType.Linear（選填）Progress常用屬性color：進度條的顏色，默認為藍色style：進度條的樣式，樣式內的可選設置有strokeWidth：設置進度條寬度scaleCount：設置環(huán)形進度條總刻度scaleWidth：設置環(huán)形進度條刻度粗細value：當前進度，會覆蓋參數(shù)的當前進度進度條組件ProgressProgress({

value:

85,

//參數(shù)1：必選,當前進度

total:100,

//參數(shù)2：可選,最大進度,默認100

type:

ProgressType.ScaleRing

//參數(shù)3：可選,進度條類型})

.size({width:

80,

height:

80})

.color(Color.Pink)

//屬性1：進度條的顏色,默認為藍色

.style({

//屬性2：設置進度條的樣式

strokeWidth:20,

//strokeWidth：設置進度條寬度

scaleCount:100,

//scaleCount：設置環(huán)形進度條總刻度數(shù)

scaleWidth:10

//scaleWidth：設置環(huán)形進度條刻度粗細

})

.value(22)

//屬性3：當前進度,會覆蓋參數(shù)的當前進度滑動條組件Slider滑動條組件Slider，用來快速調節(jié)音量、亮度等。Slider組件默認寬度為父容器寬度的100%。Slider常用的參數(shù)說明如下：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滑動時觸發(fā)onChange的事件回調，value為當前進度值，mode為拖動狀態(tài)。其中mode有4種：SliderChangeMode.Begin：開始拖動滑塊。SliderChangeMode.Moving：正在拖動滑塊過程中。SliderChangeMode.End：結束拖動滑塊。SliderChangeMode.Click：點擊滑動條使滑塊位置移動。Slider(){...

}.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

//todo

})彈性布局與層疊布局彈性布局Flex彈性布局Flex可以靈活的實現(xiàn)線性布局Row和Column的設置效果，F(xiàn)lex的排列方向和對齊格式是在參數(shù)中設置的。參數(shù)direction的值決定Flex的排列方向。彈性布局Flex參數(shù)justifyContent的值決定主軸的對齊格式。參數(shù)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參數(shù)來設置。層疊布局容器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參數(shù)：value：指定當前進度值（必填）total：指定進度總長，默認值100.（選填）type：指定進度條類型，默認值ProgressType.Linear（選填）Progress常用屬性color：進度條的顏色，默認為藍色style：進度條的樣式，樣式內的可選設置有strokeWidth：設置進度條寬度scaleCount：設置環(huán)形進度條總刻度scaleWidth：設置環(huán)形進度條刻度粗細value：當前進度，會覆蓋參數(shù)的當前進度進度條組件Progress-使用示例Progress({

value:

85,

//參數(shù)1：必選,當前進度

total:100,

//參數(shù)2：可選,最大進度,默認100

type:

ProgressType.ScaleRing

//參數(shù)3：可選,進度條類型})

.size({width:

80,

height:

80})

.color(Color.Pink)

//屬性1：進度條的顏色,默認為藍色

.style({

//屬性2：設置進度條的樣式

strokeWidth:20,

//strokeWidth：設置進度條寬度

scaleCount:100,

//scaleCount：設置環(huán)形進度條總刻度數(shù)

scaleWidth:10

//scaleWidth：設置環(huán)形進度條刻度粗細

})

.value(22)

//屬性3：當前進度,會覆蓋參數(shù)的當前進度滑動條組件Slider滑動條組件Slider，用來快速調節(jié)音量、亮度等。Slider組件默認寬度為父容器寬度的100%。Slider常用的參數(shù)：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滑動時觸發(fā)onChange的事件回調，在回調方法內箭頭函數(shù)的參數(shù)value為當前進度值，mode為拖動狀態(tài)。其中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%')

}}開發(fā)登錄頁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實現(xiàn)，如下面示例所示。TextInput({

placeholder:

'請輸入密碼'

})

.type(InputType.Password)輸入框組件TextInput輸入類型InputType枚舉值：Normal：基本輸入模式。支持輸入數(shù)字、字母、下劃線、空格、特殊字符。Password：密碼輸入模式。Email：e-mail地址輸入模式。Number：純數(shù)字輸入模式。輸入框組件TextInput獲取輸入文本在onChange事件回調方法中，獲取輸入框的輸入文本。如下面示例所示。

TextInput({

placeholder:

'請輸入賬號'

})

.onChange((value:

string)

=>

{

this.text

=

value//this.text為@State修飾的狀態(tài)變量

})按鈕組件ButtonButton組件主要用來響應點擊操作，可以包含子組件。Button使用示例Button('登錄',

{

type:

ButtonType.Capsule,

stateEffect:

true

})

.width('90%')

.onClick(()

=>

{

//處理點擊事件邏輯

}))示例中的代碼，type用于定義按鈕樣式，ButtonType.Capsule表示膠囊形按鈕；stateEffect用于設置按鈕按下時是否開啟切換效果，當狀態(tài)置為false時，點擊效果關閉，默認值為true。并且給Button綁定onClick事件，每當用戶點擊Button的時候，就會回調執(zhí)行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組件表示開關，開關狀態(tài)的初始化用isOn參數(shù)進行設置；使用type設置開關樣式，開關狀態(tài)切換時觸發(fā)onChange事件回調方法。Toggle({

isOn:true,

//設置開關狀態(tài)組件初始化狀態(tài)為開

type:

ToggleType.Switch})//設置組件為開關樣式

.selectedColor("#ffa6c88c")//設置組件打開狀態(tài)的背景顏色

.switchPointColor(Color.Red)//設置

type類型為

Switch時的圓形滑塊顏色

.onChange((isOn)

=>

{//事件回調,isOn為開與關的狀態(tài)值

console.log(

"開關狀態(tài)："

+

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