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

渲染控制0102條件渲染循環(huán)渲染條件渲染在ArkUI聲明式開發(fā)范式中，頁面中的組件可以使用if/else條件渲染，以達到根據(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ù)項生成唯一且固定的鍵值。默認使用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時，默認使用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)