兩個組件和渲染

• list組件
• 父子組件（自定義組件）
• • 雙向數據綁定
• if-else渲染
• for循環渲染
• 案例
• • 循環、列表
  • 父子組件、點擊事件

list組件

由list容器組件和listitem容器組件構成，list是一個大容器，listitem是大容器里的小容器

基本代碼 List(){//List大容器 ListItem(){//ListItem小容器，用來裝飾內容 //編寫內容 } } 代碼示例 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})
• 參數：
  `

父子組件（自定義組件）

• 在另一個文件夾中編寫子組件（修飾器不用寫@entry），子組件導出用export語句

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

• 調用子組件的稱為父組件，父組件導入用import {子組件文件名稱} from “子組件文件相對路徑”

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

雙向數據綁定

• 改變任何一方數據時，兩方數據都會變為改變的一方數據
• 子組件中數據用@Link修飾

@Link 子組件名字：string

• 父組件中用@State修飾，在子組件接口中數據用$修飾

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

if-else渲染

• 使用語法
  • if/else渲染可以改變組件的渲染狀態，即決定組件是否在頁面中被渲染。if括號內的變量是true的話，則對應下的組件都被渲染，否則都不被渲染。
• 注意事項
  • 必須在容器組件內使用。
  • 使用if/else可以使子組件的渲染依賴條件語句。
• 示例
  • 使用if條件語句：

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

• 使用if、else if、if語句

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

for循環渲染

• 通過循環渲染（ForEach）從數組中獲取數據，并為每個數據項創建相應的組件，可減少代碼復雜度。

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

• 說明

  • ForEach必須在容器組件內使用。

  • 生成的子組件應當是允許包含在ForEach父容器組件中的子組件。

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

  • itemGenerator函數的調用順序不一定和數組中的數據項相同，在開發過程中不要假設itemGenerator和keyGenerator函數是否執行及其執行順序。

• 代碼示例

// 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())}} }

案例

循環、列表

代碼

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

• 效果（可以動的）
  

父子組件、點擊事件

子代碼 @Component export struct child{ //導出@Link childnum:number@Link childstatu:booleanbuild() {Column({space:10}) { //容器，子組件間隔10if(this.childstatu){ //如果真執行，如果假不執行；真假由childststu的值決定Text(this.childnum.toString()) //文本組件，括號內是為了讓內容轉化為字符型.fontSize(80) //字體大小.fontColor(Color.Red)// 字體顏色}Button('增加') //這是一個按鈕.width(200).height(90).fontSize(30) //按鈕中文本大小.onClick(()=>{ //點擊事件this.childnum++//點擊后childnum的值加1})Button('減少').width(200).height(90).fontSize(30).onClick(()=>{this.childnum--//點擊后childnum的值減1})Button('歸零').width(200).height(90).fontSize(30).onClick(()=>{this.childnum = 0//點擊后childnum的值變為零})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 //設fathernum為number類型值為0@State fatherstatu:boolean = true//設fatherstatu為boolean類型值為truebuild() {Row() {Column() {child({ childnum: $fathernum,childstatu:$fatherstatu}) //子組件}.width('100%')}.height('100%')} }

效果圖
開始運行

點擊三次增加（點擊一次數字加一）

點擊一次減少數字就會減一

點擊歸零（即數字變為零）

點擊顯示可隱藏或顯示數字

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。