《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識(shí)點(diǎn)2-7 渲染控制

渲染控制0102條件渲染循環(huán)渲染條件渲染在ArkUI聲明式開發(fā)范式中，頁(yè)面中的組件可以使用if/else條件渲染，以達(dá)到根據(jù)應(yīng)用的不同狀態(tài)，渲染對(duì)應(yīng)狀態(tài)下的UI內(nèi)容。條件渲染使用說(shuō)明：if/else條件語(yǔ)句可以使用狀態(tài)變量，并且在更新場(chǎng)景下必須使用狀態(tài)變量。使用if/else可以使子組件的渲染依賴條件語(yǔ)句。必須在容器組件內(nèi)使用。某些容器組件限制子組件的類型或數(shù)量，將if/else用于這些組件內(nèi)時(shí)，這些限制將同樣應(yīng)用于if/else語(yǔ)句內(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)來(lái)迭代渲染，組件需要的數(shù)據(jù)放在數(shù)組中，F(xiàn)orEach在迭代數(shù)組時(shí)創(chuàng)建相應(yīng)的組件并傳入數(shù)據(jù)。ForEach語(yǔ)句結(jié)構(gòu)：ForEach(

arr:

any[],

itemGenerator:

(item:

any,

index?:

number)

=>

void,

keyGenerator?:

(item:

any,

index?:

number)

=>

string

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