鴻蒙應(yīng)用開發(fā) ArkTS開發(fā)實踐

鴻蒙應(yīng)用開發(fā)ArkTS開發(fā)實踐聲明式UI基本概念應(yīng)用界面是由一個個頁面組成，ArkTS是由ArkUI框架提供，用于以聲明式開發(fā)范式開發(fā)界面的語言。聲明式UI構(gòu)建頁面的過程，其實是組合組件的過程，聲明式UI的思想，主要體現(xiàn)在兩個方面：描述UI的呈現(xiàn)結(jié)果，而不關(guān)心過程狀態(tài)驅(qū)動視圖更新類似蘋果的SwiftUI中通過組合視圖View，安卓JetpackCompose中通過組合@Composable函數(shù)，ArkUI作為HarmonyOS應(yīng)用開發(fā)的UI開發(fā)框架，其使用ArkTS語言構(gòu)建自定義組件，通過組合自定義組件完成頁面的構(gòu)建。自定義組件的組成ArkTS通過struct聲明組件名，并通過@Component和@Entry裝飾器，來構(gòu)成一個自定義組件。使用@Entry和@Component裝飾的自定義組件作為頁面的入口，會在頁面加載時首先進行渲染。@Entry

@Component

struct

ToDoList

{...}例如ToDoList組件對應(yīng)如下整個代辦頁面。圖1

ToDoList待辦列表使用@Component裝飾的自定義組件，如ToDoItem這個自定義組件則對應(yīng)如下內(nèi)容，作為頁面的組成部分。@Component

struct

ToDoItem

{...}圖2

ToDoItem在自定義組件內(nèi)需要使用build方法來進行UI描述。@Entry

@Component

struct

ToDoList

...

build()

{

...

}

}build方法內(nèi)可以容納內(nèi)置組件和其他自定義組件，如Column和Text都是內(nèi)置組件，由ArkUI框架提供，ToDoItem為自定義組件，需要開發(fā)者使用ArkTS自行聲明。@Entry

@Component

struct

ToDoList

{

...

build()

{

Column(...)

{

Text(...)

...

ForEach(...{

TodoItem(...)

},...)

}

...

}

}配置屬性與布局自定義組件的組成使用基礎(chǔ)組件和容器組件等內(nèi)置組件進行組合。但有時內(nèi)置組件的樣式并不能滿足我們的需求，ArkTS提供了屬性方法用于描述界面的樣式。屬性方法支持以下使用方式：常量傳遞例如使用fontSize(50)來配置字體大小。Text('Hello

World')

.fontSize(50)變量傳遞在組件內(nèi)定義了相應(yīng)的變量后，例如組件內(nèi)部成員變量size，就可以使用this.size方式使用該變量。Text('Hello

World')

.fontSize(this.size)鏈式調(diào)用在配置多個屬性時，ArkTS提供了鏈式調(diào)用的方式，通過'.'方式連續(xù)配置。Text('Hello

World')

.fontSize(this.size)

.width(100)

.height(100)表達式傳遞屬性中還可以傳入普通表達式以及三目運算表達式。Text('Hello

World')

.fontSize(this.size)

.width(this.count

+

100)

.height(this.count

%

2

===

0

?

100

:

200)內(nèi)置枚舉類型除此之外，ArkTS中還提供了內(nèi)置枚舉類型，如Color，F(xiàn)ontWeight等，例如設(shè)置fontColor改變字體顏色為紅色，并私有fontWeight為加粗。Text('Hello

World')

.fontSize(this.size)

.width(this.count

+

100)

.height(this.count

%

2

===

0

?

100

:

200)

.fontColor(Color.Red)

.fontWeight(FontWeight.Bold)對于有多種組件需要進行組合時，容器組件則是描述了這些組件應(yīng)該如何排列的結(jié)果。ArkUI中的布局容器有很多種，在不同的適用場合選擇不同的布局容器實現(xiàn)，ArkTS使用容器組件采用花括號語法，內(nèi)部放置UI描述。這里我們將介紹最基礎(chǔ)的兩個布局——列布局和行布局。對于如下每一項的布局，兩個元素為橫向排列，選擇Row布局圖3

Row布局Row()

{

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

...

Text(this.content)

...

}

...類似下圖所示的布局，整體都是從上往下縱向排列，適用的布局方式是Column列布局。圖4

Column布局Column()

{

Text($r('app.string.page_title'))

...

ForEach(this.totalTasks,(item)

=>

{

TodoItem({content:item})

},...)

}改變組件狀態(tài)實際開發(fā)中由于交互，頁面的內(nèi)容可能需要產(chǎn)生變化，以每一個ToDoItem為例，其在完成時的狀態(tài)與未完成時的展示效果是不一樣的。圖5

不同狀態(tài)的視圖聲明式UI的特點就是UI是隨數(shù)據(jù)更改而自動刷新的，我們這里定義了一個類型為boolean的變量isComplete，其被@State裝飾后，框架內(nèi)建立了數(shù)據(jù)和視圖之間的綁定，其值的改變影響UI的顯示。@State

isComplete

:

boolean

=

false;圖6

@State裝飾器的作用用圓圈和對勾這樣兩個圖片，分別來表示該項是否完成，這部分涉及到內(nèi)容的切換，需要使用條件渲染if/else語法來進行組件的顯示與消失，當判斷條件為真時，組件為已完成的狀態(tài)，反之則為未完成。if

(this.isComplete)

{

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

.objectFit(ImageFit.Contain)

.width($r('app.float.checkbox_width'))

.height($r('app.float.checkbox_width'))

.margin($r('app.float.checkbox_margin'))

}

else

{

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

.objectFit(ImageFit.Contain)

.width($r('app.float.checkbox_width'))

.height($r('app.float.checkbox_width'))

.margin($r('app.float.checkbox_margin'))

}由于兩個Image的實現(xiàn)具有大量重復代碼，ArkTS提供了@Builder裝飾器，來修飾一個函數(shù)，快速生成布局內(nèi)容，從而可以避免重復的UI描述內(nèi)容。這里使用@Bulider聲明了一個labelIcon的函數(shù)，參數(shù)為url，對應(yīng)要傳給Image的圖片路徑。@Builder

labelIcon(url)

{

Image(url)

.objectFit(ImageFit.Contain)

.width($r('app.float.checkbox_width'))

.height($r('app.float.checkbox_width'))

.margin($r('app.float.checkbox_margin'))

}使用時只需要使用this關(guān)鍵字訪問@Builder裝飾的函數(shù)名，即可快速創(chuàng)建布局。if

(this.isComplete)

{

this.labelIcon($r('app.media.ic_ok'))

}

else

{

this.labelIcon($r('app.media.ic_default'))

}為了讓待辦項帶給用戶的體驗更符合已完成的效果，給內(nèi)容的字體也增加了相應(yīng)的樣式變化，這里使用了三目運算符來根據(jù)狀態(tài)變化修改其透明度和文字樣式，如opacity是控制透明度，decoration是文字是否有劃線。通過isComplete的值來控制其變化。Text(this.content)

...

.opacity(this.isComplete

?

CommonConstants.OPACITY_COMPLETED

:

CommonConstants.OPACITY_DEFAULT)

.decoration({

type:

this.isComplete

?

TextDecorationType.LineThrough

:

TextDecorationType.None

})最后，為了實現(xiàn)與用戶交互的效果，在組件上添加了onClick點擊事件，當用戶點擊該待辦項時，數(shù)據(jù)isComplete的更改就能夠觸發(fā)UI的更新。@Component

struct

ToDoItem

{

@State

isComplete

:

boolean

=

false;

@Builder

labelIcon(icon)

{...}

...

build()

{

Row()

{

if

(this.isComplete)

{

this.labelIcon($r('app.media.ic_ok'))

}

else

{

this.labelIcon($r('app.media.ic_default'))

}

...

}

...

.onClick(()

=>

{

this.isComplete=

!this.isComplete;

})

}

}循環(huán)渲染列表數(shù)據(jù)剛剛只是完成了一個ToDoItem組件的開發(fā)，當我們有多條待辦數(shù)據(jù)需要顯示在頁面時，就需要使用到ForEach循環(huán)渲染語法。例如這里我們有五條待辦數(shù)據(jù)需要展示在頁面上。total_Tasks:Array<string>

=

[

'早起晨練',

'準備早餐',

'閱讀名著',

'學習ArkTS',

'看劇放松'

]ForEach基本使用中，只需要了解要渲染的數(shù)據(jù)以及要生成的UI內(nèi)容兩個部分，例如這里要渲染的數(shù)組為以上的五條待辦事項，要渲染的內(nèi)容是ToDoItem這個自定義組件，也可以是其他內(nèi)置組件。圖7

ForEach基本使用ToDoItem這個自定義組件中，每一個ToDoItem要顯示的文本參數(shù)content需要外部傳入，參數(shù)傳遞使用花括號的形式，用content接受數(shù)組內(nèi)的內(nèi)容項item。最終完成的代碼及其效果如下。@Entry

@Component

struct

ToDoList

{

...

build()

{