0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫(xiě)文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙ArkUI實(shí)例:【自定義組件】

jf_46214456 ? 來(lái)源:jf_46214456 ? 作者:jf_46214456 ? 2024-04-08 10:17 ? 次閱讀

組件是 OpenHarmony 頁(yè)面最小顯示單元,一個(gè)頁(yè)面可由多個(gè)組件組合而成,也可只由一個(gè)組件組合而成,這些組件可以是ArkUI開(kāi)發(fā)框架自帶系統(tǒng)組件,比如 Text 、 Button 等,也可以是自定義組件,本節(jié)筆者簡(jiǎn)單介紹一下自定義組件的語(yǔ)法規(guī)范。

定義組件

自定義一個(gè)組件,首先要定義好名稱(chēng),盡量做到見(jiàn)名知意,比如定義一個(gè)標(biāo)題欄組件,筆者把它命名為 TitleBar ,為了讓系統(tǒng)知道這是一個(gè)組件,需要使用 @Component 修飾符和 struct 關(guān)鍵字修飾,格式:【@Component struct + 組件名稱(chēng)】,如下所示:

@Component struct TitleBar {
  build() {
    // 省略
  }
}

@Entry @Component struct Index {
  build() {
    // 省略
  }
}
  • struct :表示 TitleBar 是一個(gè)結(jié)構(gòu)體,使用 struct 關(guān)鍵字必須實(shí)現(xiàn) build() 方法,否則編譯器報(bào)錯(cuò):Require build function for struct
  • @Component :表示 TitleBar 這個(gè)結(jié)構(gòu)體具有組件化的能力,也就是說(shuō)它可以成為一個(gè)獨(dú)立的組件。
  • @Entry :表示當(dāng)前組件是頁(yè)面的總?cè)肟?,?jiǎn)單理解就是頁(yè)面的根節(jié)點(diǎn),一個(gè)頁(yè)面有且僅有一個(gè) @Entry 修飾符,只有被 @Entry 修飾的組件或者子組件才會(huì)在頁(yè)面上顯示。

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • 鴻蒙
    +關(guān)注

    關(guān)注

    57

    文章

    2302

    瀏覽量

    42689
  • OpenHarmony
    +關(guān)注

    關(guān)注

    25

    文章

    3635

    瀏覽量

    16061
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    HarmonyOS實(shí)戰(zhàn)開(kāi)發(fā)-深度探索與打造個(gè)性化自定義組件

    ,一個(gè)頁(yè)面有且僅能有一個(gè)@Entry。只有被@Entry裝飾的組件才可以調(diào)用頁(yè)面的生命周期。 自定義組件的創(chuàng)建和渲染流程 自定義組件的創(chuàng)建:
    發(fā)表于 05-08 16:30

    本周四晚19:00知識(shí)賦能第八期第2課丨ArkUI自定義組件

    本周四晚19:00知識(shí)賦能第八期第2課丨ArkUI自定義組件9月21日19:00~20:00,第八期知識(shí)賦能第2節(jié)直播就要開(kāi)始啦!本次直播將為同學(xué)們帶來(lái)涂鴉小游戲的趣味體驗(yàn),讓大家全面了解Ar
    發(fā)表于 09-21 17:13

    OpenHarmony自定義組件介紹

    )生命周期。 根據(jù)上面的流程圖,我們從自定義組件的初始創(chuàng)建、重新渲染和刪除來(lái)詳細(xì)解釋。 自定義組件的創(chuàng)建和渲染流程 1.自定義
    發(fā)表于 09-25 15:36

    OpenHarmony自定義構(gòu)建函數(shù):@Builder裝飾器

    前面章節(jié)介紹了如何創(chuàng)建一個(gè)自定義組件。該自定義組件內(nèi)部UI結(jié)構(gòu)固定,僅與使用方進(jìn)行數(shù)據(jù)傳遞。ArkUI還提供了一種更輕量的UI元素復(fù)用機(jī)制@
    發(fā)表于 09-26 16:36

    鴻蒙上自定義組件的過(guò)程

    ?? 在實(shí)際開(kāi)發(fā)過(guò)程中,我們經(jīng)常會(huì)遇到一些系統(tǒng)原有組件無(wú)法滿(mǎn)足的情況,而 HarmonyOS 提供了自定義組件的方式,我們使用自定義組件來(lái)滿(mǎn)
    的頭像 發(fā)表于 11-10 09:27 ?2821次閱讀
    <b class='flag-5'>鴻蒙上自定義</b><b class='flag-5'>組件</b>的過(guò)程

    OpenHarmony自定義組件:ClearableInput和Keyboard

    組件介紹: 本示例包含了兩個(gè)OpenHarmony自定義組件,一個(gè)是ClearableInput,另一個(gè)是Keyboard。 ClearableInput 定義了一個(gè)帶清空?qǐng)D標(biāo)的文本輸
    發(fā)表于 03-18 15:21 ?1次下載
    OpenHarmony<b class='flag-5'>自定義</b><b class='flag-5'>組件</b>:ClearableInput和Keyboard

    OpenHarmony自定義組件FlowImageLayout

    組件介紹 本示例是OpenHarmony自定義組件FlowImageLayout。 用于將一個(gè)圖片列表以瀑布流的形式顯示出來(lái)。 調(diào)用方法
    發(fā)表于 03-21 10:17 ?3次下載
    OpenHarmony<b class='flag-5'>自定義</b><b class='flag-5'>組件</b>FlowImageLayout

    OpenHarmony自定義組件ProgressWithText

    組件介紹 本示例是OpenHarmony自定義組件ProgressWithText。 在原來(lái)進(jìn)度條的上方加了一個(gè)文本框,動(dòng)態(tài)顯示當(dāng)前進(jìn)度并調(diào)整位置。 調(diào)用方法
    發(fā)表于 03-23 14:03 ?1次下載
    OpenHarmony<b class='flag-5'>自定義</b><b class='flag-5'>組件</b>ProgressWithText

    OpenHarmony自定義組件CircleProgress

    組件介紹 本示例是OpenHarmony自定義組件CircleProgress。 用于定義一個(gè)帶文字的圓形進(jìn)度條。 調(diào)用方法
    發(fā)表于 03-23 14:06 ?4次下載
    OpenHarmony<b class='flag-5'>自定義</b><b class='flag-5'>組件</b>CircleProgress

    鴻蒙自定義ListDialog案例教程

    ”)) .show(); 2.支持自定義數(shù)據(jù)、布局 //通過(guò)自定義ItemProvider,來(lái)適配不同的數(shù)據(jù)、布局。 new CatListDialo
    發(fā)表于 03-25 14:33 ?2次下載

    三種自定義彈窗UI組件封裝的實(shí)現(xiàn)

    鴻蒙已經(jīng)提供了全局 UI 方法自定義彈窗,本文是基于基礎(chǔ)的自定義彈窗來(lái)實(shí)現(xiàn)提示消息彈窗、確認(rèn)彈窗、輸入彈窗的 UI 組件封裝。
    的頭像 發(fā)表于 03-30 09:28 ?3070次閱讀

    適用于鴻蒙自定義組件框架Carbon案例教程

    項(xiàng)目名稱(chēng):Carbon 所屬系列:ohos的第三方組件適配移植 功能:一個(gè)適用于鴻蒙自定義組件框架,幫助快速實(shí)現(xiàn)各種需要的效果 項(xiàng)目移植狀態(tài):大部分移植 調(diào)用差異:基本沒(méi)有使用差異,
    發(fā)表于 04-07 09:49 ?5次下載

    自定義視圖組件教程案例

    自定義組件 1.自定義組件-particles(粒子效果) 2.自定義組件- pulse(脈沖b
    發(fā)表于 04-08 10:48 ?14次下載

    ArkUI如何自定義彈窗(eTS)

    自定義彈窗其實(shí)也是比較簡(jiǎn)單的,通過(guò)CustomDialogController類(lèi)就可以顯示自定義彈窗。
    的頭像 發(fā)表于 08-31 08:24 ?2097次閱讀

    鴻蒙ArkUI開(kāi)發(fā)-Tabs組件的使用

    鴻蒙ArkUI開(kāi)發(fā)-Tabs組件的使用
    的頭像 發(fā)表于 01-19 16:01 ?1702次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>開(kāi)發(fā)-Tabs<b class='flag-5'>組件</b>的使用