鴻蒙應(yīng)用開發(fā)從入門到入行

第四天 - 層疊布局笼踩、自定義組件、ForEach循環(huán)生成組件

導(dǎo)讀：在本篇文章里亡嫌，您將掌握層疊布局嚎于、自定義組件的用法，特別是自定義組件將來的開發(fā)中必然會用挟冠，其中應(yīng)該特別關(guān)注自定義組件的一些規(guī)范與裝飾器于购。

Stack - 層疊容器組件

• 在App效果中，我們經(jīng)持荆看到一些陰影蒙版肋僧、加載中遮罩等，如下圖列表所示：

image.png

image.png

• 像這種：把某個組件堆疊到另外一個組件上的效果控淡，稱之為層疊效果或者堆疊效果（就像小時候玩的疊羅漢嫌吠，一個人疊在另一個人上面）

image.png

• 溫馨提示：成都網(wǎng)友請勿看上圖

• 使用語法

  Stack() {
    item1()
    item2()
    item3()
  }
  

• 默認(rèn)情況下：越在后面的組件越疊在最高層（就像疊羅漢，后來的在最上）掺炭，所以上述代碼后的層級效果如下圖

image.png

• 默認(rèn)情況下：子組件都在Stack容器內(nèi)居中堆疊辫诅，如果需要修改，需要通過alignContent參數(shù)實現(xiàn)位置的相對移動涧狮，一共有9種方式如下圖

image.png

• 修改方法

      Stack({ alignContent: Alignment.TopStart }) { // 改成在左上對齊堆疊
        .....
      }
  

• 如果需要手動指定誰在最上層炕矮，可以使用zIndex屬性，修改層級者冤。zIndex的值越大越疊在最上面

  Stack({ alignContent: Alignment.BottomStart }) {
    Column() {
      Text('Stack子元素1').fontSize(20)
    }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)
  
    Column() {
      Text('Stack子元素2').fontSize(20)
    }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)
  
    Column() {
      Text('Stack子元素3').fontSize(20)
    }.width(200).height(200).backgroundColor(Color.Grey)
      
  }.width(350).height(350).backgroundColor(0xe0e0e0)
  

  • 此時肤视，雖然子元素1是一開始寫的，但是它的zIndex最大涉枫，所以會在最上層钢颂。子元素2的zIndex值小一點，所以在中間拜银。子元素3因為沒有寫zIndex，層級最低遭垛，所以在最里層尼桶。效果如下圖

image.png

自定義組件

為什么需要

• 很多時候我們需要自定義一些由其他組件布局組合在一起的組件，方便在界面上復(fù)用锯仪，例如上期布置的附加作業(yè)年度待辦目標(biāo)

image.png

• 待辦列表區(qū)里的每一項組成元素比較多泵督，比如有Row、Checkbox庶喜、Text等小腊。而且這些元素組合起來的部分救鲤，多次需要使用。那么為了更好的維護(hù)秩冈、修改本缠、復(fù)用，可以把這一部分封裝成自定義組件

組件怎么創(chuàng)建

• 一般情況下入问，為了更好的管理項目中的文件丹锹，我們會把自定義組件放到一個跟pages目錄同級的新的文件夾里，起名叫components或者view芬失。文件夾起名每個人都有自己的喜好楣黍，這里我不強(qiáng)求。但是本文后面以view起名作為存放組件的文件夾

  • 華為鴻蒙官網(wǎng)的Codelabs上大部分示例代碼都是以view作為文件夾棱烂，所以這里貓林老師也保持同步

image.png

• 組件將來我們都以.ets文件結(jié)尾租漂，接下來，我們在view文件夾里創(chuàng)建一個組件文件：對著view文件夾鼠標(biāo)右鍵->新建->ArkTS File->然后輸入組件名即可

image.png

image.png

• 注意：組件名應(yīng)該使用多單詞大駝峰形式颊糜，建好后如下圖

image.png

• 那么如何快速生成一個組件結(jié)構(gòu)呢哩治？輸入comp出提示后按回車即可

image.png

• 此時本文件會生成如下代碼

  @Component
  struct  {
    build() {
      
    }
  }
  

• 注意看會發(fā)現(xiàn)，代碼中還沒有組件名字芭析，因此我們還需要手動填入名字锚扎。名字跟文件名應(yīng)該保持一致，因此改完后如下

  @Component
  struct ToDoItem {
    build() {
  
    }
  }
  

• 這樣就建好一個空組件了

裝飾器 - @Component與@Entry

• 大家通過代碼可以發(fā)現(xiàn)馁启，無論是新建項目默認(rèn)生成的Index.ets文件驾孔，或者是我們剛剛創(chuàng)建的ToDoItem自定義組件，都有struct關(guān)鍵字惯疙。

• 這里先對它做個說明

  • struct代表結(jié)構(gòu)體翠勉，也是一種數(shù)據(jù)類型（有興趣詳細(xì)了解可以去學(xué)習(xí)TS語法）

  • 但對于我們目前的鴻蒙應(yīng)用開發(fā)中，暫時只要知道霉颠。不管是頁面還是自定義組件（頁面也可以理解為就是個很大的組件）对碌，都用struct修飾，即都為以下格式

  • struct 組件名{
      build() {
    
      }
    }
    

  • 每個組件（頁面也是組件）蒿偎，內(nèi)都必須有個build函數(shù)朽们，在這個函數(shù)里寫描述界面的代碼

    • 提示：別忘了，每個build里有且只有一個根容器哦

  • 學(xué)過TS或者Java或者C的都知道诉位，struct只是一個結(jié)構(gòu)體骑脱，怎么就跟組件扯上關(guān)系了呢？

  • 這就跟它上面的@Component有關(guān)

• @Component說明

  • 這是一個裝飾器

  • 通過上一篇的學(xué)習(xí)我們了解到裝飾器可以讓某個數(shù)據(jù)具備特殊功能苍糠，例如@State可以讓數(shù)據(jù)驅(qū)動UI更新

  • 所以@Component這個裝飾器就是能讓struct這個數(shù)據(jù)具備組件的功能

  • 因此你會發(fā)現(xiàn)默認(rèn)生成的Index.ets和我們自定義的組件TOdoItem都有這個裝飾器
    

    image.png

• @Entry又是什么呢叁丧？

  • 入口的意思
  • 作用：把某個組件作為這個頁面的第一個入口組件啟動
  • 一個頁面有很多自定義組件，那么啟動這個頁面到底以哪個組件作為入口組件呢？就是通過@Entry來指定的
  • 并且拥娄，加了@Entry的組件蚊锹，也能被預(yù)覽器預(yù)覽

預(yù)覽自定義組件

• 自定義組件創(chuàng)建完，我們需要一邊寫代碼一邊看效果稚瘾∧道ィ可是默認(rèn)情況下自定義組件無法在預(yù)覽器里進(jìn)行預(yù)覽，這時候需要加一個裝飾器@Preview

  @Preview
  @Component
  struct ToDoItem {
    build() {
  
    }
  }
  

• 這樣我們就能進(jìn)行界面編寫孟抗，并且在預(yù)覽器看到預(yù)覽效果了

構(gòu)建TodoItem自定義組件的界面

image.png

• 根據(jù)效果圖分析發(fā)現(xiàn)這個組件根容器應(yīng)該是一個Row迁杨，里面兩個子組件：Checkbox與Text

• 且Row需要設(shè)置圓角、背景色凄硼、最好給個高度铅协，Checkbox需要給左右外間距

• 代碼如下

    build() {
      Row() {
        Checkbox()
          .margin({ left: 20, right: 20 })
        Text('中彩票500萬')
      }
      .width('100%')
      .height(40)
      .backgroundColor(Color.White)
      .borderRadius(20)
    }
  

如何使用自定義組件

• 需要先導(dǎo)出、再導(dǎo)入摊沉，即可使用

• 導(dǎo)出：

  • 只要在struct前加一個export即可

  export struct ToDoItem {
    ....
  }
  

• 導(dǎo)入：

  • import語法

  import { 組件名 } from '路徑'
  // 例
  import { ToDoItem } from '../view/ToDoItem'
  

• 使用：

  ToDoItem()
  

• DevEco非常強(qiáng)大狐史，我們也可以不寫導(dǎo)入的代碼，讓DevEco自動生成

  • 做法：給組件加完export后说墨，來到需要用到組件的地方骏全，直接寫組件名，出提示后按回車

image.png

image.png

• 至此尼斧，我們完成了TodoItem組件的簡單編寫姜贡。并通過它學(xué)習(xí)了裝飾器、組件創(chuàng)建和使用的相關(guān)知識棺棵。等接下來完成“年度待辦”案例時楼咳，還會回來豐富它，但目前就到此為止吧

ForEach循環(huán)生成組件

• 若需要根據(jù)數(shù)組數(shù)據(jù)生成一堆同類型的組件烛恤，則需要用到ForEach

• 作用：根據(jù)數(shù)組生成組件母怜，數(shù)組有多少個元素，就生成多少個組件

• 語法：

  ForEach (數(shù)組, (item: 類型, index: number) => {
    // 組件
  })
  

• 例：

  @State arr: string[] = ['a', 'b', 'c', 'd']
  
  ForEach (this.arr, (item: string, index: number) => {
    // 組件
    Row () {
      Text(`item的值是：${item},index是：${index}`)
    }
  })
  

• 結(jié)果如下

image.png

注：ForEach有第三個參數(shù)缚柏，是鍵值生成函數(shù)苹熏。作用：為數(shù)據(jù)源arr的每個數(shù)組項生成唯一且持久的鍵值。有點類似vue里的v-bind:key币喧，這里我就不細(xì)講了轨域，等哪一天專門出一篇技術(shù)文講解。本系列文章主要是側(cè)重于教會開發(fā)技能杀餐，理論細(xì)節(jié)及各種原理和性能優(yōu)化等內(nèi)容疙挺，未來會偶爾寫文說明，所以敬請關(guān)注本號怜浅，免得錯過最新內(nèi)容。

• 提示：ArkTS是一種強(qiáng)類型語言，所以每種數(shù)據(jù)必須聲明類型恶座，比如(item: string, index: number)搀暑，不能省略類型
• 試一試，大家可以用ForEach生成我們剛剛封裝的TodoItem看看

總結(jié)內(nèi)容

• 本篇文章我們主要學(xué)習(xí)了三個方面：Stack跨琳、自定義組件自点、ForEach
• Stack：
  • 層疊組件，只要是實現(xiàn)一個組件疊在另外一個組件上面的都可以用Stack包起來
  • 默認(rèn)越后面寫的組件層級越高
  • 可以通過zIndex屬性方法修改脉让，數(shù)字越大層級越高
• 自定義組件
  • 當(dāng)某個界面區(qū)域可能要多次復(fù)用時桂敛，封裝成自定義組件方便復(fù)用
  • 其次，自定義組件也能更好的管理代碼文件溅潜、讓界面更清爽术唬、利于維護(hù)
  • @Component 修飾的結(jié)構(gòu)體才算組件
  • @Entry是入口的意思，代表某個頁面啟動的第一個組件
  • @Preview可以預(yù)覽自定義組件
  • 導(dǎo)出組件：export
  • 導(dǎo)入組件：import
• ForEach
  • 根據(jù)數(shù)組生成組件

課后練習(xí)

• 判斷題

  • 自定義組件可以直接預(yù)覽

• 問答題

  • 請說出下列代碼的層級

    Stack() {
      組件A().zIndex(2)
      組件B().zIndex(0)
      組件C()
    }
    

• 今天又補(bǔ)全了一些知識滚澜，大家可以把上一篇文章的年度待辦計劃作業(yè)的布局給完成了粗仓，下一期會講組件傳值的相關(guān)知識

• 附：年度待辦計劃初始數(shù)據(jù)

    @State totalTasks: Array<TodoModal> = [
      { text: "月入5萬", finished: false },
      { text: "中彩票500萬", finished: false },
      { text: "找個富婆", finished: false },
      { text: "買套別墅", finished: false },
      { text: "改掉愛做夢的習(xí)慣", finished: false },
    ];
  

  class TodoModal {
    text: string = ''
    finished: boolean = false
  }
  

互動環(huán)節(jié)

• 看到那個贊了嗎？給我狠狠點下去设捐！