《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件 知識點 單元2　ArkTS聲明式開發(fā)

認(rèn)識ArkTS工程010203應(yīng)用程序包結(jié)構(gòu)相關(guān)的基本概念A(yù)rkTS工程目錄結(jié)構(gòu)ArkTS工程的配置文件04ArkTS工程的資源管理應(yīng)用程序包結(jié)構(gòu)相關(guān)的基本概念一個應(yīng)用包含一個或者多個Module;Module分為“Ability”和“Library”兩種類型;“Ability”類型的Module對應(yīng)于編譯后的HAP（HarmonyAbilityPackage）；“Library”類型的Module對應(yīng)于HAR（HarmonyAbilityResources）包，即編譯后的.tgz文件。“Ability”類型的Module的HAP包可分為Entry和Feature兩種類型。Entry類型的HAP：是應(yīng)用的主模塊;Feature類型的HAP：是應(yīng)用的動態(tài)特性模塊每個HarmonyOS應(yīng)用可以包含多個.hap文件，一個應(yīng)用中的.hap文件合在一起稱為一個Bundle，而bundleName就是應(yīng)用的唯一標(biāo)識（請參見app.json5配置文件中的bundleName標(biāo)簽）ArkTS工程目錄結(jié)構(gòu)ArkTS工程的配置文件在基于Stage模型開發(fā)的應(yīng)用項目代碼下，都存在app.json5及module.json5兩個配置文件。app.json5應(yīng)用的全局配置信息，包含應(yīng)用的包名、開發(fā)廠商、版本號等基本信息。特定設(shè)備類型的配置信息。ArkTS工程的配置文件module.json5：Module的基本配置信息，例如Module名稱、類型、描述、支持的設(shè)備類型等基本信息。應(yīng)用組件信息，包含Ability組件和ExtensionAbility組件的描述信息。應(yīng)用訪問系統(tǒng)或其他應(yīng)用受保護(hù)部分所需的權(quán)限信息。ArkTS工程的資源管理HarmonyOS資源分為兩類：應(yīng)用資源：借助資源文件能力，開發(fā)者在應(yīng)用中自定義資源，自行管理這些資源在不同的設(shè)備或配置中的表現(xiàn)。系統(tǒng)資源：開發(fā)者直接使用系統(tǒng)預(yù)置的資源定義（即分層參數(shù)，同一資源ID在設(shè)備類型、深淺色等不同配置下有不同的取值）。ArkTS工程的資源管理應(yīng)用資源目錄應(yīng)用開發(fā)中使用的各類資源文件，需要放入特定子目錄中存儲管理。在stage模型中，多模塊module共有的資源文件放到AppScope下的resources目錄。模塊獨有的資源可以放在該模塊的resources目錄下。resources目錄包括三大類目錄：base目錄限定詞目錄rawfile目錄ArkTS工程的資源管理創(chuàng)建應(yīng)用資源文件應(yīng)用已經(jīng)提供了一些資源文件，例如用來存放字符串的資源文件string.json，若還想創(chuàng)建其他的資源文件，例如布爾資源文件，則需要開發(fā)者自己創(chuàng)建。在資源目錄的右鍵菜單選擇“New>XXXResourceFile”，即可創(chuàng)建對應(yīng)資源組目錄的資源文件。例如，在element目錄下可新建ElementResourceFile。如右圖在element目錄下創(chuàng)建一個布爾資源文件，一般文件名命名與根元素同名為boolean。ArkTS工程的資源管理訪問應(yīng)用資源在工程中，通過"$r('')"的形式引用應(yīng)用資源。app代表是應(yīng)用內(nèi)resources目錄中定義的資源；type代表資源類型（或資源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”；name代表資源命名，由開發(fā)者定義資源時確定。例如：$r(‘a(chǎn)pp.string.string_hello’)表示引用字符串資源string_hello，具體是base還是相應(yīng)限定詞目錄下的視當(dāng)前設(shè)備的語言、設(shè)備類型等情況。另外：引用rawfile下資源時使用"$rawfile('filename')"的形式，filename需要表示為rawfile目錄下的文件相對路徑，文件名需要包含后綴，路徑開頭不可以以"/"開頭。例如$rawfile(‘test.png’)表示引用rawfile目錄下圖片。ArkTS工程的資源管理訪問系統(tǒng)資源系統(tǒng)資源包含色彩、圓角、字體、間距、字符串及圖片等。通過使用系統(tǒng)資源，不同的開發(fā)者可以開發(fā)出具有相同視覺風(fēng)格的應(yīng)用。開發(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')認(rèn)識ArkTS聲明式開發(fā)010203ArkTS簡介ArkUI框架ArkTS聲明式開發(fā)范式的基本組成04ArkTS中的尺寸單位05ArkTS中組件的公共樣式ArkTS簡介ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開發(fā)語言。ArkTS基于TypeScript（簡稱TS）語言擴(kuò)展而來，是TS的超集。ArkTS繼承了TS的所有特征ArkTS在TS的基礎(chǔ)上擴(kuò)展了聲明式UI能力，當(dāng)前擴(kuò)展的聲明式UI能力包括如下特征：基本UI描述狀態(tài)管理動態(tài)構(gòu)建UI元素渲染控制使用限制與擴(kuò)展ArkUI框架ArkUI是基于ArkTS的UI框架，基于ArkTS提供的擴(kuò)展語法，如下圖所示。ArkTS聲明式開發(fā)范式的基本組成ArkTS聲明式開發(fā)范式的基本組成：裝飾器自定義組件UI描述內(nèi)置組件屬性方法事件方法ArkTS中的尺寸單位ArkTS提供了4種像素單位，分別是px、vp、fp和lpx，框架采用vp為基準(zhǔn)數(shù)據(jù)單位。px：屏幕物理像素單位。vp：屏幕密度相關(guān)像素，根據(jù)屏幕像素密度轉(zhuǎn)換為屏幕物理像素fp：字體像素，與vp類似適用屏幕密度變化lpx：視窗邏輯像素單位在設(shè)置組件和容器寬高的字體大小使用固定值時，使用number值不需要用單位，ArkTS會默認(rèn)給單位。例如：width(200)fontSize(50)ArkTS還可以使用百分比字符串來設(shè)置組件或布局的寬高。例如：width(‘100%’)表示寬度與父容器寬度相等。ArkTS中組件的公共樣式公共樣式：寬高（width/height/size）寬高比（aspectRatio）邊距（padding/margin）權(quán)重（layoutWeight）...示例：組件的寬高設(shè)置Column()

{

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

.fontSize("50px")

//設(shè)置Text文字顯示組件的字體大小為50px

}.width('100%')

//設(shè)置Column的寬為100%，占滿屏幕寬度ArkTS中組件的公共樣式內(nèi)外邊距Text()…

.margin({bottom:30})//設(shè)置底部外邊距，底部距離下一個組件30Text()…//.padding(20)

//設(shè)置相同的邊距值

.padding({left:

20,

top:

30,

right:

40,

bottom:

50})//設(shè)置不同的邊距值示例：設(shè)置組件的內(nèi)外邊距Row與Column組件的使用010203容器組件概述Column和Row組件介紹線性布局的權(quán)重設(shè)置容器組件概述容器組件是一種比較特殊的組件，它可以包含其他的組件，而且按照一定的規(guī)律布局。容器組件除了放置基礎(chǔ)組件外，也可以放置容器組件，通過多層布局的嵌套，可以布局出更豐富的頁面。ArkTS為我們提供了豐富的容器組件來布局頁面，例如使用Column和Row容器組件實現(xiàn)如下效果。Column和Row組件介紹線性布局容器概念Column和Row組件是ArkTS提供用來實現(xiàn)線性布局的容器組件。線性布局表示按照垂直方向或者水平方向排列子組件的容器。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。Column和Row組件介紹主軸與交叉軸的概念在線性布局容器中，存在兩根軸，分別是主軸和交叉軸，這兩個軸始終是相互垂直的。不同的容器中主軸的方向不一樣的。主軸：在Column容器中的子組件是按照從上到下的垂直方向布局的，其主軸的方向是垂直方向；在Row容器中的組件是按照從左到右的水平方向布局的，其主軸的方向是水平方向。Column和Row組件介紹交叉軸：與主軸垂直相交的軸線，如果主軸是垂直方向，則交叉軸就是水平方向；如果主軸是水平方向，則交叉軸是垂直方向。Column和Row組件介紹主軸與交叉軸的對齊格式Column和Row容器默認(rèn)都在主軸和交叉軸上居中顯示子組件。同時，他們也提供屬性justifyContent和alignItems用來設(shè)置子組件在主軸和交叉軸的對齊格式。主軸方向的對齊格式（justifyContent）子組件在主軸方向上的對齊使用justifyContent屬性來設(shè)置，其參數(shù)類型是FlexAlign。FlexAlign定義了以下幾種類型：StartCenterEndSpaceBetweenSpaceAroundSpaceEvenlyColumn和Row組件介紹Column在主軸上的對齊格式：Row在主軸上的對齊格式：Column和Row組件介紹交叉軸方向的對齊（alignItems）子組件在交叉軸方向上的對齊方式使用alignItems屬性來設(shè)置。Column容器的主軸是垂直方向，交叉軸是水平方向，其參數(shù)類型為HorizontalAlign（水平對齊），HorizontalAlign定義了以下幾種類型：Start：設(shè)置子組件在水平方向上按照起始端對齊。Center（默認(rèn)值）：設(shè)置子組件在水平方向上居中對齊。End：設(shè)置子組件在水平方向上按照末端對齊。Column和Row組件介紹Row容器的主軸是水平方向，交叉軸是垂直方向，其參數(shù)類型為VerticalAlign（垂直對齊），VerticalAlign定義了以下幾種類型：Top：設(shè)置子組件在垂直方向上居頂部對齊。Center（默認(rèn)值）：設(shè)置子組件在豎直方向上居中對齊。Bottom：設(shè)置子組件在豎直方向上居底部對齊。線性布局的權(quán)重設(shè)置權(quán)重屬性表示一行或一列中的尺寸按照權(quán)重比進(jìn)行分配，僅適用于線性布局組件下的子組件，如果同時設(shè)置了某一個方向上的尺寸和權(quán)重，此時子組件設(shè)置的尺寸不起作用。基礎(chǔ)組件1組件概述組件（Component）是界面搭建與顯示的最小單位,

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

.textOverflow({overflow:

TextOverflow.Ellipsis})//截斷方式圖片組件ImageImage組件用來渲染展示圖片,只需要給Image組件設(shè)置圖片地址、寬和高，圖片就能顯示出來。示例代碼如下。Image($r("app.media.icon"))

.width(100)

.height(100)圖片地址可以是本地圖片也可以是網(wǎng)絡(luò)圖片。引用本地圖片資源時，建議使用$r方式來管理需全局使用的圖片資源。支持的圖片格式包括png、jpg、bmp、svg和gif。圖片組件Image圖片縮放處理使用objectFit屬性設(shè)置圖片的縮放類型，objectFit的參數(shù)類型為ImageFit。ImageFit.Cover（默認(rèn)值）：保持寬高比進(jìn)行縮小或者放大，使得圖片兩邊都大于或等于顯示邊界；ImageFit.Fill：不保持寬高比進(jìn)行放大縮小，使得圖片充滿顯示邊界，可以看到圖片為了適應(yīng)屏幕，改變了寬高比；ImageFit.Contain：保持寬高比進(jìn)行縮小或者放大，使得圖片完全顯示在顯示邊界內(nèi)；ImageFit.None：保持原有尺寸顯示；ImageFit.ScaleDown：保持寬高比顯示，圖片縮小或者保持不變。圖片組件Image原圖ImageFit.CoverImageFit.FillImageFit.ContainImageFit.NoneImageFit.ScaleDown空白填充組件BlankBlank表示空白填充組件，在線性布局容器組件內(nèi)用來填充組件在主軸方向上的剩余尺寸。例如：在下圖中，Blank在Row方向上的使用，除了子組件的本身寬度尺寸外，剩余尺寸用Blank占滿，子組件可以很容易實現(xiàn)靠左或靠右擺放。分隔線組件Divider在UI開發(fā)中經(jīng)常用到的分割線，可以用組件Divider實現(xiàn)。使用的示例代碼如下。Divider()

//無參

.vertical(true)

//分割線的方向，默認(rèn)是false水平，true代表垂直方向

.color(Color.Red)

//分割線的顏色

.strokeWidth(1)

//分割線的線寬

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

value:

85,

//參數(shù)1：必選,當(dāng)前進(jìn)度

total:100,

//參數(shù)2：可選,最大進(jìn)度,默認(rèn)100

type:

ProgressType.ScaleRing

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

.size({width:

80,

height:

80})

.color(Color.Pink)

//屬性1：進(jìn)度條的顏色,默認(rèn)為藍(lán)色

.style({

//屬性2：設(shè)置進(jìn)度條的樣式

strokeWidth:20,

//strokeWidth：設(shè)置進(jìn)度條寬度

scaleCount:100,

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

scaleWidth:10

//scaleWidth：設(shè)置環(huán)形進(jìn)度條刻度粗細(xì)

})

.value(22)

//屬性3：當(dāng)前進(jìn)度,會覆蓋參數(shù)的當(dāng)前進(jìn)度滑動條組件Slider滑動條組件Slider，用來快速調(diào)節(jié)音量、亮度等。Slider組件默認(rèn)寬度為父容器寬度的100%。Slider常用的參數(shù)說明如下：Slider(value:{value?:

number,

//當(dāng)前進(jìn)度值,默認(rèn)值0

min?:

number,

//設(shè)置最小值,默認(rèn)值0max?:

number,

//設(shè)置最大值,默認(rèn)值100step?:

number,

//設(shè)置Slider滑動跳動值,默認(rèn)值1style?:

SliderStyle

//設(shè)置Slider的滑塊樣式,默認(rèn)值Outset})滑動條組件SliderSliderStyle的取值有兩種SliderStyle.OutSet：滑塊在滑軌上SliderStyle.InSet：滑塊在滑軌內(nèi)Slider(){...

}

.blockColor(Color.Red)//設(shè)置滑塊的顏色

.selectedColor(Color.Green)//設(shè)置滑軌的已滑動顏色

.showSteps(true)//默認(rèn)值false,設(shè)置當(dāng)前是否顯示步長刻度值

.showTips(true)//默認(rèn)值false,設(shè)置滑動時是否顯示氣泡提示百分比}SliderStyle常用的屬性滑動條組件SliderSlider滑動時觸發(fā)onChange的事件回調(diào)，value為當(dāng)前進(jìn)度值，mode為拖動狀態(tài)。其中mode有4種：SliderChangeMode.Begin：開始拖動滑塊。SliderChangeMode.Moving：正在拖動滑塊過程中。SliderChangeMode.End：結(jié)束拖動滑塊。SliderChangeMode.Click：點擊滑動條使滑塊位置移動。Slider(){...

}.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

//todo

})彈性布局與層疊布局彈性布局Flex彈性布局Flex可以靈活的實現(xiàn)線性布局Row和Column的設(shè)置效果，F(xiàn)lex的排列方向和對齊格式是在參數(shù)中設(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，是把子組件按照設(shè)置的對齊格式順序依次堆疊，后一個子組件覆蓋在前一個子組件上邊。子組件的對齊方式使用alignContent參數(shù)來設(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

})

}}進(jìn)度條和滑動條進(jìn)度條組件ProgressProgress進(jìn)度條，用于顯示內(nèi)容加載進(jìn)度或操作處理進(jìn)度等。不同類型的進(jìn)度條Progress參數(shù)：value：指定當(dāng)前進(jìn)度值（必填）total：指定進(jìn)度總長，默認(rèn)值100.（選填）type：指定進(jìn)度條類型，默認(rèn)值ProgressType.Linear（選填）Progress常用屬性color：進(jìn)度條的顏色，默認(rèn)為藍(lán)色style：進(jìn)度條的樣式，樣式內(nèi)的可選設(shè)置有strokeWidth：設(shè)置進(jìn)度條寬度scaleCount：設(shè)置環(huán)形進(jìn)度條總刻度scaleWidth：設(shè)置環(huán)形進(jìn)度條刻度粗細(xì)value：當(dāng)前進(jìn)度，會覆蓋參數(shù)的當(dāng)前進(jìn)度進(jìn)度條組件Progress-使用示例Progress({

value:

85,

//參數(shù)1：必選,當(dāng)前進(jìn)度

total:100,

//參數(shù)2：可選,最大進(jìn)度,默認(rèn)100

type:

ProgressType.ScaleRing

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

.size({width:

80,

height:

80})

.color(Color.Pink)

//屬性1：進(jìn)度條的顏色,默認(rèn)為藍(lán)色

.style({

//屬性2：設(shè)置進(jìn)度條的樣式

strokeWidth:20,

//strokeWidth：設(shè)置進(jìn)度條寬度

scaleCount:100,

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

scaleWidth:10

//scaleWidth：設(shè)置環(huán)形進(jìn)度條刻度粗細(xì)

})

.value(22)

//屬性3：當(dāng)前進(jìn)度,會覆蓋參數(shù)的當(dāng)前進(jìn)度滑動條組件Slider滑動條組件Slider，用來快速調(diào)節(jié)音量、亮度等。Slider組件默認(rèn)寬度為父容器寬度的100%。Slider常用的參數(shù)：Slider(value:{value?:

number,

//當(dāng)前進(jìn)度值,默認(rèn)值0

min?:

number,

//設(shè)置最小值,默認(rèn)值0max?:

number,

//設(shè)置最大值,默認(rèn)值100step?:

number,

//設(shè)置Slider滑動跳動值,默認(rèn)值1style?:

SliderStyle

//設(shè)置Slider的滑塊樣式,默認(rèn)值OutSet})滑動條組件SliderSliderStyle的取值有兩種SliderStyle.OutSet：滑塊在滑軌上SliderStyle.InSet：滑塊在滑軌內(nèi)Slider(){...

}

.blockColor(Color.Red)//設(shè)置滑塊的顏色

.selectedColor(Color.Green)//設(shè)置滑軌的已滑動顏色

.showSteps(true)//默認(rèn)值false,設(shè)置當(dāng)前是否顯示步長刻度值

.showTips(true)//默認(rèn)值false,設(shè)置滑動時是否顯示氣泡提示百分比}Slider常用的屬性滑動條組件SliderSlider滑動時觸發(fā)onChange的事件回調(diào)，在回調(diào)方法內(nèi)箭頭函數(shù)的參數(shù)value為當(dāng)前進(jìn)度值，mode為拖動狀態(tài)。其中mode有4種：SliderChangeMode.Begin：開始拖動滑塊。SliderChangeMode.Moving：正在拖動滑塊過程中。SliderChangeMode.End：結(jié)束拖動滑塊。SliderChangeMode.Click：點擊滑動條使滑塊位置移動。Slider(){...

}.onChange((value:

number,

mode:

SliderChangeMode)

=>

{

//todo

})滑動組件Slider-使用示例@Entry@Componentstruct

SliderExample

{

@State

inSetValue:

number

=

40

build()

{

Column({

space:

8

})

{

Text('滑塊在導(dǎo)軌內(nèi)').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開關(guān)組件Toggle04文本提示框promptAction輸入框組件TextInputTextInput組件用于輸入單行文本，響應(yīng)輸入事件。TextInput的使用也非常廣泛，例如在登錄頁中的賬號輸入和密碼輸入。TextInput組件支持文本樣式設(shè)置TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)

.fontWeight(FontWeight.Bold)

.fontFamily('Arial')輸入框組件TextInput設(shè)置輸入提示文本我們平常使用輸入框時常?？吹捷斎肟蛏蠒刑崾疚淖?，例如登錄賬號時會有“請輸入賬號”這樣的文本提示，當(dāng)用戶輸入內(nèi)容后，提示文本就消失了。使用placeholder設(shè)置提示文本使用placeholderColor和placeholderFont分別設(shè)置提示文本的顏色和樣式。TextInput({

placeholder:

'請輸入帳號'

})

.placeholderColor(‘#999999')

.placeholderFont({

size:

20,

weight:

FontWeight.Medium,

family:

'cursive',

style:

FontStyle.Italic

})輸入框組件TextInput設(shè)置輸入類型可以使用type屬性來設(shè)置輸入框類型。例如密碼輸入框，一般輸入密碼的時候，為了用戶密碼安全，內(nèi)容會顯示為“”。這種情況就可以設(shè)置type屬性值為InputType.Password實現(xiàn)，如下面示例所示。TextInput({

placeholder:

'請輸入密碼'

})

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

TextInput({

placeholder:

'請輸入賬號'

})

.onChange((value:

string)

=>

{

this.text

=

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

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

{

type:

ButtonType.Capsule,

stateEffect:

true

})

.width('90%')

.onClick(()

=>

{

//處理點擊事件邏輯

}))示例中的代碼，type用于定義按鈕樣式，ButtonType.Capsule表示膠囊形按鈕；stateEffect用于設(shè)置按鈕按下時是否開啟切換效果，當(dāng)狀態(tài)置為false時，點擊效果關(guān)閉，默認(rèn)值為true。并且給Button綁定onClick事件，每當(dāng)用戶點擊Button的時候，就會回調(diào)執(zhí)行onClick方法，調(diào)用里面的邏輯代碼。按鈕組件Button按鈕樣式ButtonType枚舉值Capsule：膠囊型按鈕（圓角默認(rèn)為高度的一半）。Circle：圓形按鈕。Normal：普通按鈕（默認(rèn)不帶圓角）。按鈕組件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')開關(guān)組件ToggleToggle組件表示開關(guān)，開關(guān)狀態(tài)的初始化用isOn參數(shù)進(jìn)行設(shè)置；使用type設(shè)置開關(guān)樣式，開關(guān)狀態(tài)切換時觸發(fā)onChange事件回調(diào)方法。Toggle({

isOn:true,

//設(shè)置開關(guān)狀態(tài)組件初始化狀態(tài)為開

type:

ToggleType.Switch})//設(shè)置組件為開關(guān)樣式

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

.switchPointColor(Color.Red)//設(shè)置

type類型為

Switch時的圓形滑塊顏色

.onChange((isOn)

=>

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

console.log(

"開關(guān)狀態(tài)："

+

isOn)

})Toggle的type樣式：ToggleType.Switch為開關(guān)樣式；ToggleType.Checkbox為單選框樣式；ToggleType.Button為按鈕樣式，可以在Toggle中加入子組件。文本提示框promptActionpromptAction是在@mptAction模塊里提供的，使用時需要導(dǎo)入@mptAction模塊，用promptAction.showToast()提示信息。import

promptAction

from

'@mptAction';

//導(dǎo)入文本提示框模塊…

promptAction.showToast({

message:

"消息",

//顯示文本，必填項

duration:

2000,

//顯示時長，可選項，單位毫秒，范圍

[1500,

10000]，默1500

bottom:

1000

//Toast的顯示位置距離底部的間距，可選項

})基礎(chǔ)組件2010203輸入框組件Input按鈕組件Button開關(guān)組件Toggle輸入框組件TextInputTextInput組件用于輸入單行文本，響應(yīng)輸入事件。TextInput的使用也非常廣泛，例如在登錄頁中的賬號輸入和密碼輸入。TextInput組件支持文本樣式設(shè)置TextInput()

.fontColor(Color.Blue)

.fontSize(20)

.fontStyle(FontStyle.Italic)

.fontWeight(FontWeight.Bold)

.fontFamily('Arial')輸入框組件TextInput設(shè)置輸入提示文本我們平常使用輸入框時常?？吹捷斎肟蛏蠒刑崾疚淖?，例如登錄賬號時會有“請輸入賬號”這樣的文本提示，當(dāng)用戶輸入內(nèi)容后，提示文本就消失了。使用placeholder設(shè)置提示文本使用placeholderColor和placeholderFont分別設(shè)置提示文本的顏色和樣式。TextInput({

placeholder:

'請輸入帳號'

})

.placeholderColor(‘#999999')

.placeholderFont({

size:

20,

weight:

FontWeight.Medium,

family:

'cursive',

style:

FontStyle.Italic

})輸入框組件TextInput設(shè)置輸入類型可以使用type屬性來設(shè)置輸入框類型。例如密碼輸入框，一般輸入密碼的時候，為了用戶密碼安全，內(nèi)容會顯示為“”。這種情況就可以設(shè)置type屬性值為InputType.Password實現(xiàn)，如下面示例所示。TextInput({

placeholder:

'請輸入密碼'

})

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

TextInput({

placeholder:

'請輸入賬號'

})

.onChange((value:

string)

=>

{

this.text

=

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

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

{

type:

ButtonType.Capsule,

stateEffect:

true

})

.width('90%')

.onClick(()

=>

{

//處理點擊事件邏輯

}))示例中的代碼，type用于定義按鈕樣式，ButtonType.Capsule表示膠囊形按鈕；stateEffect用于設(shè)置按鈕按下時是否開啟切換效果，當(dāng)狀態(tài)置為false時，點擊效果關(guān)閉，默認(rèn)值為true。并且給Button綁定onClick事件，每當(dāng)用戶點擊Button的時候，就會回調(diào)執(zhí)行onClick方法，調(diào)用里面的邏輯代碼。按鈕組件Button按鈕樣式ButtonType枚舉值Capsule：膠囊型按鈕（圓角默認(rèn)為高度的一半）。Circle：圓形按鈕。Normal：普通按鈕（默認(rèn)不帶圓角）。按鈕組件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')開關(guān)組件ToggleToggle組件表示開關(guān)，開關(guān)狀態(tài)的初始化用isOn參數(shù)進(jìn)行設(shè)置；使用type設(shè)置開關(guān)樣式，開關(guān)狀態(tài)切換時觸發(fā)onChange事件回調(diào)方法。Toggle({

isOn:true,

//設(shè)置開關(guān)狀態(tài)組件初始化狀態(tài)為開

type:

ToggleType.Switch})//設(shè)置組件為開關(guān)樣式

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

.switchPointColor(Color.Red)//設(shè)置

type類型為

Switch時的圓形滑塊顏色

.onChange((isOn)

=>

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

console.log(

"開關(guān)狀態(tài)："

+

isOn)

})Toggle的type樣式：ToggleType.Switch為開關(guān)樣式；ToggleType.Checkbox為單選框樣式；ToggleType.Button為按鈕樣式，可以在Toggle中加入子組件。promptAction彈窗promptAction彈窗promptAction可以創(chuàng)建并顯示文本提示框、對話框和操作菜單。promptAction.showToast彈出文本提示框，會自動消失promptAction.showDialog彈出對話框promptAction.showActionMenu彈出操作菜單在@mptAction模塊里提供，使用時需要導(dǎo)入@mptAction模塊import

promptAction

from

'@mptAction';

//導(dǎo)入文本提示框模塊promptAction彈窗用promptAction.showToast彈出文本提示框接口說明：名稱類型必填說明messagestring|

Resource9+是顯示的文本信息。durationnumber否默認(rèn)值1500ms，取值區(qū)間：1500ms-10000ms。若小于1500ms則取默認(rèn)值，若大于10000ms則取上限值10000ms。bottomstring|number否設(shè)置彈窗邊框距離屏幕底部的位置。ShowToastOptions為文本提示框的選項，參數(shù)說明：showToast(options:ShowToastOptions):voidpromptAction.showToast使用示例import

promptAction

from

'@mptAction';

//導(dǎo)入模塊…

promptAction.showToast({

message:

"消息",

//顯示文本，必填項

duration:

2000,

//顯示時長，可選項，單位毫秒，范圍

[1500,

10000]，默1500

bottom:

100

//Toast的顯示位置距離底部的間距，可選項

})promptAction彈窗用promptAction.showDialog彈出對話框接口說明：ShowDialogOptions為對話框的選項，參數(shù)說明：showDialog(options:ShowDialogOptions,callback:AsyncCallback<ShowDialogSuccessResponse>):void名稱類型必填說明titlestring|

Resource否對話框標(biāo)題。messagestring|

Resource否對話框內(nèi)容。buttons[Button,Button?,Button?]否對話框按鈕。按鈕數(shù)量1至3個。promptAction.showDialog使用示例promptAction.showDialog({

title:

'對話框標(biāo)題',

message:

'對話框內(nèi)容',

buttons:

[

{

text:

'button1',

color:

'#000000'

},

{

text:

'button2',

color:

'#000000'

}

]},

(err,

data)

=>

{

if

(err)

{

console.info('彈出對話框錯誤，原因:

'

+

err);

return;

}

console.info('彈出對話框成功,你點擊的對話框序號:

'

+

data.index);});promptAction彈窗用promptAction.showActionMenu彈出操作菜單接口說明：ActionMenuOptions為操作菜單的選項，參數(shù)說明：showActionMenu(options:ActionMenuOptions,callback:AsyncCallback<ActionMenuSuccessResponse>):void名稱類型必填說明titlestring|

Resource否操作菜單標(biāo)題。buttons[Button,Button?,Button?,Button?,Button?,Button?]是操作菜單選項按鈕。按鈕數(shù)量1至6個。promptAction.showActionMenu使用示例promptAction.showActionMenu({

title:

'標(biāo)題',

buttons:

[

{

text:

'item1',

color:

'#666666'

},

{

text:

'item2',

color:

'#000000'

},

]},

(err,

data)

=>

{

if

(err)

{

console.info('彈窗菜單錯誤，錯誤原因:

'

+

err);

return;

}

console.info(‘彈出菜單成功,你點擊的菜單序號:

'

+

data.index);});自定義組件010203自定義組件概述自定義組件的使用組件和頁面的生命周期自定義組件概述自定義組件是可復(fù)用的UI單元，可組合其他組件，使用@Component裝飾。自定義組件必須有：@Component裝飾struct關(guān)鍵字修飾build()方法自定義組件可加入：@Entry裝飾屬性與方法build(）內(nèi)的各種組件...自定義組件的使用在同一個模塊文件中自定義的組件，可以直接調(diào)用。自定義組件的使用調(diào)用不同模塊下的自定義組件定義自定義組件時需要使用關(guān)鍵字exportdefault修飾進(jìn)行導(dǎo)出自定義組件的使用使用其他模塊的自定義組件時需要在該模塊中使用import進(jìn)行導(dǎo)入自定義組件的使用若定義自定義組件時使用關(guān)鍵字export導(dǎo)出，則導(dǎo)入時名稱需要加上{}組件和頁面的生命周期每個組件都有生命周期的回調(diào)方法，這些回調(diào)方法在組件的不同生命周期狀態(tài)中自動調(diào)用，用戶不可以調(diào)用生命周期的回調(diào)方法，但可以在組件的生命周期方法中編寫業(yè)務(wù)邏輯處理。組件的生命周期函數(shù)有兩個：aboutToAppear()：自定義組件在構(gòu)建的時候調(diào)用aboutToDisappear()：自定義組件被銷毀時調(diào)用組件和頁面的生命周期當(dāng)一個組件使用了@Entry裝飾器后，它成為一個頁面，頁面的生命周期三個，分別是opPageShow()、onPageHide()和onBackPress()。opPageShow()：當(dāng)頁面展示時調(diào)用onPageHide()：當(dāng)頁面隱藏時調(diào)用onBackPress()：當(dāng)頁面按返回鍵時調(diào)用渲染控制0102條件渲染循環(huán)渲染條件渲染在ArkUI聲明式開發(fā)范式中，頁面中的組件可以使用if/else條件渲染，以達(dá)到根據(jù)應(yīng)用的不同狀態(tài)，渲染對應(yīng)狀態(tài)下的UI內(nèi)容。條件渲染使用說明：if/else條件語句可以使用狀態(tài)變量，并且在更新場景下必須使用狀態(tài)變量。使用if/else可以使子組件的渲染依賴條件語句。必須在容器組件內(nèi)使用。某些容器組件限制子組件的類型或數(shù)量，將if/else用于這些組件內(nèi)時，這些限制將同樣應(yīng)用于if/else語句內(nèi)創(chuàng)建的組件。例如Grid容器組件的子組件僅支持GridItem組件。條件渲染if/else使用示例：@Componentstruct

MyComponent

{

@State

count:

number

=

300

build()

{

Column()

{

if

(this.count

<

0)

{

Text('count

is

negative').fontSize(14)

}

else

if

(this.count

%

2

===

0)

{

Text('count

is

even').fontSize(14)

}

else

{

Text('count

is

odd').fontSize(14)

}

}

}}循環(huán)渲染在ArkUI聲明式開發(fā)范式中，重復(fù)出現(xiàn)的組件可以用ForEach循環(huán)來迭代渲染，組件需要的數(shù)據(jù)放在數(shù)組中，F(xiàn)orEach在迭代數(shù)組時創(chuàng)建相應(yīng)的組件并傳入數(shù)據(jù)。ForEach語句結(jié)構(gòu)：ForEach(

arr:

any[],

itemGenerator:

(item:

any,

index?:

number)

=>

void,

keyGenerator?:

(item:

any,

index?:

number)

=>

string

)循環(huán)渲染ForEach參數(shù)說明：參數(shù)名參數(shù)類型必填參數(shù)描述arrany[]是必須是數(shù)組，允許設(shè)置為空數(shù)組，空數(shù)組場景下將不會創(chuàng)建子組件。同時允許設(shè)置返回值為數(shù)組類型的函數(shù)，例如arr.slice(1,3)，設(shè)置的函數(shù)不得改變包括數(shù)組本身在內(nèi)的任何狀態(tài)變量，如Array.splice、Array.sort或Array.reverse這些改變原數(shù)組的函數(shù)。itemGenerator(item:any,index?:number)=>void是生成子組件的箭頭函數(shù)，為數(shù)組中的每一個數(shù)據(jù)項創(chuàng)建一個或多個子組件，單個子組件或子組件列表必須包括在大括號“{...}”中。keyGenerator(item:any,index?:number)=>string否匿名函數(shù)，用于給數(shù)組中的每一個數(shù)據(jù)項生成唯一且固定的鍵值。默認(rèn)使用index+JSON.stringify(item)。為了使開發(fā)框架能夠更好地識別數(shù)組更改，提高性能，建議開發(fā)者提供自定義的鍵值生成器。循環(huán)渲染ForEach使用說明：ForEach必須在容器組件內(nèi)使用。生成的子組件應(yīng)當(dāng)是允許包含在ForEach父容器組件中的子組件。允許子組件生成器函數(shù)中包含if/else條件渲染。鍵值生成器必須針對每個數(shù)據(jù)生成唯一的值，如果鍵值相同，將導(dǎo)致鍵值相同的UI組件被框架忽略，從而無法在父容器內(nèi)顯示。不提供keyGenerator時，默認(rèn)使用index+JSON.stringify(item)。itemGenerator函數(shù)的調(diào)用順序不一定和數(shù)組中的數(shù)據(jù)項相同，在開發(fā)過程中不要假設(shè)itemGenerator和keyGenerator函數(shù)是否執(zhí)行及其執(zhí)行順序。循環(huán)渲染ForEach使用示例：@Entry@Componentstruct

MyComponent

{

@State

arr:

number[]

=

[10,

20,

30]

build()

{

Column({

space:

5

})

{

Button('Reverse

Array')

.onClick(()

=>

{

this.arr.reverse()

})

ForEach(this.arr,

(item:

number)

=>

{

Text(`item

value:

${item}`).fontSize(18)

Divider().strokeWidth(2).color(Color.Black)

},

(item:

number)

=>

item.toString())

}

}}狀態(tài)管理基本概念狀態(tài)管理基本概念A(yù)rkTS提供了多維度的狀態(tài)管理機(jī)制，在ArkUI開發(fā)框架中，和UI相關(guān)聯(lián)的數(shù)據(jù)，不僅可以在組件內(nèi)使用，還可以在不同組件層級間傳遞，比如父子組件之間、爺孫組件之間，也可以是應(yīng)用全局范圍內(nèi)的傳遞。另外，從數(shù)據(jù)的傳遞形式來看，可分為只讀的單向傳遞和可變更的雙向傳遞。開發(fā)者可以靈活地利用這些能力來實現(xiàn)數(shù)據(jù)和UI的聯(lián)動?；靖拍罨靖拍钛b飾器裝飾內(nèi)容說明@State基本數(shù)據(jù)類型，類，數(shù)組修飾的狀態(tài)數(shù)據(jù)被修改時會執(zhí)行自定義組件build方法中的部分UI描述（使用該狀態(tài)變量的UI組件）來進(jìn)行UI界面更新。@Prop基本數(shù)據(jù)類型，類，數(shù)組修改后的狀態(tài)數(shù)據(jù)用于在父組件和子組件之間建立單向數(shù)據(jù)依賴關(guān)系。修改父組件關(guān)聯(lián)數(shù)據(jù)時，當(dāng)前組件會重新渲染。@Link基本數(shù)據(jù)類型，類，數(shù)組父子組件之間的雙向數(shù)據(jù)綁定，父組件的內(nèi)部狀態(tài)數(shù)據(jù)作為數(shù)據(jù)源，任何一方所做的修改都會反映給另一方。@Observed類@Observed應(yīng)用于類，表示該類中的數(shù)據(jù)變更被UI頁面管理。@ObjectLink被@Observed所裝飾類的對象@ObjectLink裝飾的狀態(tài)數(shù)據(jù)被修改時，在父組件或者其他兄弟組件內(nèi)與它關(guān)聯(lián)的狀態(tài)數(shù)據(jù)所在的組件都會重新渲染。@Provide基本數(shù)據(jù)類型，類，數(shù)組@Provide作為數(shù)據(jù)的提供方，可以更新其子孫節(jié)點的數(shù)據(jù)，并觸發(fā)頁面重新渲染。@Consume基本數(shù)據(jù)類型，類，數(shù)組@Consume裝飾的變量在感知到@Provide裝飾的變量更新后，會觸發(fā)當(dāng)前自定義組件的重新渲染。頁面級變量的狀態(tài)管理基本概念應(yīng)用級變量的狀態(tài)管理AppStorage是整個應(yīng)用程序狀態(tài)的中心“數(shù)據(jù)庫”，UI框架會針對應(yīng)用程序創(chuàng)建單例AppStorage對象，并提供相應(yīng)的裝飾器和接口供應(yīng)用程序使用。@StorageLink：@StorageLink(name)的原理類似于@Consume(name)，不同的是，該給定名稱的鏈接對象是從AppStorage中獲得的，在UI組件和AppStorage之間建立雙向綁定同步數(shù)據(jù)。@StorageProp：@StorageProp(name)將UI組件數(shù)據(jù)與AppStorage進(jìn)行單向同步，AppStorage中值的更改會更新UI組件中的數(shù)據(jù)，但UI組件無法更改AppStorage中的數(shù)據(jù)。AppStorage還提供了用于業(yè)務(wù)邏輯實現(xiàn)的API，用于添加、讀取、修改和刪除應(yīng)用程序的狀態(tài)數(shù)據(jù)，此API所做的更改會導(dǎo)致修改的狀態(tài)數(shù)據(jù)同步到UI組件上進(jìn)行UI更新。頁面級變量的狀態(tài)管理頁面級變量的狀態(tài)管理裝飾器裝飾內(nèi)容說明@State基本數(shù)據(jù)類型，類，數(shù)組修飾的狀態(tài)數(shù)據(jù)被修改時會執(zhí)行自定義組件build方法中的部分UI描述（使用該狀態(tài)變量的UI組件）來進(jìn)行UI界面更新。@Prop基本數(shù)據(jù)類型修改后的狀態(tài)數(shù)據(jù)用于在父組件和子組件之間建立單向數(shù)據(jù)依賴關(guān)系。修改父組件關(guān)聯(lián)數(shù)據(jù)時，當(dāng)前組件會重新渲染。@Link基本數(shù)據(jù)類型，類，數(shù)組父子組件之間的雙向數(shù)據(jù)綁定，父組件的內(nèi)部狀態(tài)數(shù)據(jù)作為數(shù)據(jù)源，任何一方所做的修改都會反映給另一方。@Observed類@Observed應(yīng)用于類，表示該類中的數(shù)據(jù)變更被UI頁面管理。@ObjectLink被@Observed所裝飾類的對象@ObjectLink裝飾的狀態(tài)數(shù)據(jù)被修改時，在父組件或者其他兄弟組件內(nèi)與它關(guān)聯(lián)的狀態(tài)數(shù)據(jù)所在的組件都會重新渲染。@Provide基本數(shù)據(jù)類型，類，數(shù)組@Provide作為數(shù)據(jù)的提供方，可以更新其子孫節(jié)點的數(shù)據(jù)，并觸發(fā)頁面重新渲染。@Consume基本數(shù)據(jù)類型，類，數(shù)組@Consume裝飾的變量在感知到@Provide裝飾的變量更新后，會觸發(fā)當(dāng)前自定義組件的重新渲染。@State@State裝飾的變量是組件內(nèi)部的狀態(tài)數(shù)據(jù)，當(dāng)這些狀態(tài)數(shù)據(jù)被修改時，將會調(diào)用所在組件的build方法中的部分UI描述（使用該狀態(tài)變量的UI組件相關(guān)描述）進(jìn)行UI刷新。@State狀態(tài)數(shù)據(jù)具有以下特征：支持多種類型數(shù)據(jù)：支持class、number、boolean、string強(qiáng)類型數(shù)據(jù)的值類型和引用類型，以及這些強(qiáng)類型構(gòu)成的數(shù)組，即Array<class>、Array<string>、Array<boolean>、Array<number>。不支持any。支持多實例：組件不同實例的內(nèi)部狀態(tài)數(shù)據(jù)獨立。內(nèi)部私有：標(biāo)記為@State的屬性是私有變量，只能在組件內(nèi)訪問。需要本地初始化：必須為所有@State變量分配初始值，變量未初始化可能導(dǎo)致未定義的框架異常行為。創(chuàng)建自定義組件時支持通過狀態(tài)變量名設(shè)置初始值：在創(chuàng)建組件實例時，可以通過變量名顯式指定@State狀態(tài)變量的初始值。@State@State使用示例1.定義一個MyComponent組件，使用@State裝飾count變量@Componentstruct

MyComponent

{

@State

count:

number

=

0

private

title:

string

=

''

private

increaseBy:

number

=

1

build()

{

Column()

{

Text(this.title).fontSize(20)

Button(`Click

to

increase

count=${this.count}`)

.margin(20)

.onClick(()

=>

{

//

修改內(nèi)部狀態(tài)變量count

this.count

+=

this.increaseBy

})

}

}}@State2.在頁面中創(chuàng)建兩個MyComponent組件實例，并初始化實例變量。完成后在預(yù)覽器中測試效果。@Entry@Componentstruct

EntryComponent

{

build()

{

Column()

{

MyComponent({

title:

'MyComponent1',

count:

0,

increaseBy:

1

})

//

第1個MyComponent實例

MyComponent({

title:

'MyComponent2',

count:

2,

increaseBy:

2

})

//

第2個MyComponent實例

}

}}@Prop@Prop與@State有相同的語義，但初始化方式不同。@Prop裝飾的變量必須使用其父組件提供的@State變量進(jìn)行初始化，允許組件內(nèi)部修改@Prop變量，但變量的更改不會通知給父組件，父組件變量的更改會同步到@prop裝飾的變量，即@Prop屬于單向數(shù)據(jù)綁定。@Prop狀態(tài)數(shù)據(jù)具有以下特征：支持多種類型數(shù)據(jù)：支持number、boolean、string類型數(shù)據(jù)私有：僅支持組件內(nèi)訪問；支持多個實例：一個組件中可以定義多個標(biāo)有@Prop的屬性；創(chuàng)建自定義組件時將按值傳遞方式給@Prop變量進(jìn)行初始化：在創(chuàng)建組件的新實例時，必須初始化所有@Prop變量，不支持在組件內(nèi)部進(jìn)行初始化。@Prop@Prop使用示例1.定義一個CountDownComponent組件，使用@Prop裝飾count變量@