兩個(gè)組件和渲染

• list組件
• 父子組件（自定義組件）
• • 雙向數(shù)據(jù)綁定
• if-else渲染
• for循環(huán)渲染
• 案例
• • 循環(huán)、列表
  • 父子組件、點(diǎn)擊事件

list組件

由list容器組件和listitem容器組件構(gòu)成，list是一個(gè)大容器，listitem是大容器里的小容器

基本代碼 List(){//List大容器 ListItem(){//ListItem小容器，用來裝飾內(nèi)容 //編寫內(nèi)容 } } 代碼示例 List( ) { ListItem(){Text("示例1").fontSize(30).width("90%").height("10%") } ListItem(){Text("示例2")fontSize(30).width("90%").height("10%") } ListItem(){Text("示例3").fontSize(30) .width("90%").height("10%") } ListItem(){Text("示例4").fontSize(30).width("90%").height("10%") } } 效果

• 接口`List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller})
• 參數(shù)：
  `

父子組件（自定義組件）

• 在另一個(gè)文件夾中編寫子組件（修飾器不用寫@entry），子組件導(dǎo)出用export語(yǔ)句

@Component export struct child{build(){Text('1').fontSize(30)Button('按鈕').width(100).height(50)} }

• 調(diào)用子組件的稱為父組件，父組件導(dǎo)入用import {子組件文件名稱} from “子組件文件相對(duì)路徑”

import{子組件名字} from"路徑" //引入子組件

雙向數(shù)據(jù)綁定

• 改變?nèi)魏我环綌?shù)據(jù)時(shí)，兩方數(shù)據(jù)都會(huì)變?yōu)楦淖兊囊环綌?shù)據(jù)
• 子組件中數(shù)據(jù)用@Link修飾

@Link 子組件名字：string

• 父組件中用@State修飾，在子組件接口中數(shù)據(jù)用$修飾

@State fuzujiantext: string="父組件"; 子組件名字({zizujiantext:$fuzujiantext})

if-else渲染

• 使用語(yǔ)法
  • if/else渲染可以改變組件的渲染狀態(tài)，即決定組件是否在頁(yè)面中被渲染。if括號(hào)內(nèi)的變量是true的話，則對(duì)應(yīng)下的組件都被渲染，否則都不被渲染。
• 注意事項(xiàng)
  • 必須在容器組件內(nèi)使用。
  • 使用if/else可以使子組件的渲染依賴條件語(yǔ)句。
• 示例
  • 使用if條件語(yǔ)句：

Column(){ if(this.count>0){Text('count is positive') }}

• 使用if、else if、if語(yǔ)句

Column(){ if(this.count<0){Text('count is negative') } else if(this.count%2===0){DividerText('even') } else{DividerText('odd') } }

for循環(huán)渲染

• 通過循環(huán)渲染（ForEach）從數(shù)組中獲取數(shù)據(jù)，并為每個(gè)數(shù)據(jù)項(xiàng)創(chuàng)建相應(yīng)的組件，可減少代碼復(fù)雜度。

ForEach(arr: any[], itemGenerator: (item: any, index?: number) => void,keyGenerator?: (item: any, index?: number) => string )

• 說明

  • ForEach必須在容器組件內(nèi)使用。

  • 生成的子組件應(yīng)當(dāng)是允許包含在ForEach父容器組件中的子組件。

  • 允許子組件生成器函數(shù)中包含if/else條件渲染，同時(shí)也允許ForEach包含在if/else條件渲染語(yǔ)句中。

  • itemGenerator函數(shù)的調(diào)用順序不一定和數(shù)組中的數(shù)據(jù)項(xiàng)相同，在開發(fā)過程中不要假設(shè)itemGenerator和keyGenerator函數(shù)是否執(zhí)行及其執(zhí)行順序。

• 代碼示例

// xxx.ets @Entry @Component struct 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)}, (item: number) => item.toString())}} }

案例

循環(huán)、列表

代碼

@Entry @Component struct ListExample {private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] // 一個(gè)列表build() {Column() {Column() {List({ space: 20 }) {ForEach(this.arr, (item) => { //for循環(huán)渲染出10個(gè)Listitem小列表ListItem() {Text(item.toString()) //使列表里面的元素轉(zhuǎn)化為字符串出現(xiàn)到文本里.width('100%').height(90).fontSize(36) //文字大小.textAlign(TextAlign.Center) //文字居中.backgroundColor("#007DEF")//背景顏色.borderRadius(20) //使ListItem出現(xiàn)圓角}})}.listDirection(Axis.Vertical) // 排列方向}.width("90%") //寬高都設(shè)為90%便于居中美觀.height('90%')}.width('100%') //寬高100%讓容器沾滿手機(jī)屏幕.height('100%').justifyContent(FlexAlign.SpaceAround)//沿中心線對(duì)齊} }

• 效果（可以動(dòng)的）
  

父子組件、點(diǎn)擊事件

子代碼 @Component export struct child{ //導(dǎo)出@Link childnum:number@Link childstatu:booleanbuild() {Column({space:10}) { //容器，子組件間隔10if(this.childstatu){ //如果真執(zhí)行，如果假不執(zhí)行；真假由childststu的值決定Text(this.childnum.toString()) //文本組件，括號(hào)內(nèi)是為了讓內(nèi)容轉(zhuǎn)化為字符型.fontSize(80) //字體大小.fontColor(Color.Red)// 字體顏色}Button('增加') //這是一個(gè)按鈕.width(200).height(90).fontSize(30) //按鈕中文本大小.onClick(()=>{ //點(diǎn)擊事件this.childnum++//點(diǎn)擊后childnum的值加1})Button('減少').width(200).height(90).fontSize(30).onClick(()=>{this.childnum--//點(diǎn)擊后childnum的值減1})Button('歸零').width(200).height(90).fontSize(30).onClick(()=>{this.childnum = 0//點(diǎn)擊后childnum的值變?yōu)榱?/span>})Button('顯示').width(200).height(90).fontSize(30).onClick(()=>{this.childstatu =! this.childstatu//真假互換})}} } 父代碼 import{child} from"../common/child" //引入子組件 @Entry @Component struct Index{@State fathernum:number = 0 //設(shè)fathernum為number類型值為0@State fatherstatu:boolean = true//設(shè)fatherstatu為boolean類型值為truebuild() {Row() {Column() {child({ childnum: $fathernum,childstatu:$fatherstatu}) //子組件}.width('100%')}.height('100%')} }

效果圖
開始運(yùn)行

點(diǎn)擊三次增加（點(diǎn)擊一次數(shù)字加一）

點(diǎn)擊一次減少數(shù)字就會(huì)減一

點(diǎn)擊歸零（即數(shù)字變?yōu)榱?#xff09;

點(diǎn)擊顯示可隱藏或顯示數(shù)字

總結(jié)

以上是生活随笔為你收集整理的梅科尔工作室-崔启凡-鸿蒙笔记3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。