開發(fā)者在使用DevEco Studio的低代碼功能進(jìn)行可視化開發(fā)時(shí)，可以通過自定義組件功能自由封裝業(yè)務(wù)邏輯類組件，實(shí)現(xiàn)能力復(fù)用，降低開發(fā)及維護(hù)成本。

NOTE

該功能在DevEco Studio 3.1 Beta2及更高版本中支持，且創(chuàng)建的工程必須是compileSdkVersion為8或以上的ArkTS工程。

自定義組件

由已有的基礎(chǔ)組件（或組合）創(chuàng)建自定義組件

1. 右擊基礎(chǔ)組件（或組件組合），在彈出的菜單中選擇Create Custom Component。

2.在彈出的對(duì)話框中輸入自定義組件名稱，然后單擊OK。

自定義組件創(chuàng)建完成后，DevEco Studio將會(huì)自動(dòng)生成.visual和.ets文件，Stage模型和FA模型下生成的文件路徑有所區(qū)別：

• Stage模型：
• .visual文件：src/main/supervisual/page/xxx.visual
• .ets文件：src/main/ets/page/xxx.ets
• FA模型：
• .visual文件：src/main/supervisual/xxxAbility/common/xxx.visual
• .ets文件：src/main/ets/xxxAbility/common/xxx.ets

3.自定義組件創(chuàng)建完成后，DevEco Studio將自動(dòng)打開自定義組件設(shè)計(jì)界面，開發(fā)者可以在設(shè)計(jì)界面編輯自定義組件的屬性、事件和布局。

新建一個(gè)自定義組件

1. 選中支持的目錄，選擇File > New > Visual > Component，或者右擊目錄，選擇New > Visual > Component。

其中支持新建自定義組件的目錄，Stage模型和FA模型有所區(qū)別：

• Stage模型：切換到Ohos視圖后的ets目錄及下屬目錄（不包含test目錄）。
• FA模型：切換到Ohos視圖后的Page類型Ability目錄及下屬目錄。

2.在彈出的New Visual Component對(duì)話框中，輸入自定義組件名稱，單擊Finish。

3.自定義組件創(chuàng)建完成后，DevEco Studio將自動(dòng)打開自定義組件設(shè)計(jì)界面，開發(fā)者可以在設(shè)計(jì)界面編輯自定義組件的屬性、事件和布局。

使用自定義組件

自定義組件創(chuàng)建后，開發(fā)者可以直接在應(yīng)用設(shè)計(jì)界面的Custom頁(yè)簽查看到已經(jīng)創(chuàng)建的自定義組件，并可以直接拖拽到畫布中使用，另外開發(fā)者也可以在.ets代碼頁(yè)面直接導(dǎo)入并使用自定義組件。

在.ets代碼頁(yè)面使用自定義組件示例如下所示：

import ImgButton from '../CustomComponents/ImgButton'@Entry@Componentstruct Index { @State message: string = 'Hello World' build() { Column(){ ImgButton() } .width('100%') .height('100%') }}

自定義屬性

開發(fā)者可以為自定義組件設(shè)置自定義屬性。

1. 在自定義組件的.ets文件中定義變量。

例如：

@Preview@Componentexport default struct ImgButton { @State customLable:string = 'This is my comp' build() { }}

2.在使用自定義組件的設(shè)計(jì)界面中，選擇該自定義組件，在屬性欄中將顯示自定義屬性。開發(fā)者可自行設(shè)置屬性值，設(shè)置屬性值后可同步修改自定義組件顯示效果。

自定義事件

開發(fā)者可以為自定義組件設(shè)置自定義事件。

1. 在自定義組件的.ets文件中定義事件函數(shù)。

例如：

@Preview@Componentexport default struct ImgButton { @State customLable:string = 'This is my comp' customKeyEvent:(event:KeyEvent) => void =(event:KeyEvent):void =>{ console.log("customKeyEvent") } build() { }}

2.在使用自定義組件的設(shè)計(jì)界面中，選擇該自定義組件，在事件欄中將顯示自定義事件。開發(fā)者可自行綁定事件函數(shù)。

那么要想成為一名鴻蒙高級(jí)開發(fā)，以上知識(shí)點(diǎn)是必須要掌握的，除此之外，還需要掌握一些鴻蒙應(yīng)用開發(fā)相關(guān)的一些技術(shù)，需要我們共同去探索。

為了能夠讓大家跟上互聯(lián)網(wǎng)時(shí)代的技術(shù)迭代，在這里我特邀了幾位行業(yè)大佬整理出一份最新版的鴻蒙學(xué)習(xí)提升資料，有需要的小伙伴自行領(lǐng)取，限時(shí)開源，先到先得~~~~

領(lǐng)取以下高清學(xué)習(xí)路線原圖請(qǐng)點(diǎn)擊→《鴻蒙 (Harmony OS)開發(fā)學(xué)習(xí)手冊(cè)》純血鴻蒙HarmonyOS基礎(chǔ)技能學(xué)習(xí)路線圖

領(lǐng)取以上完整高清學(xué)習(xí)路線圖，請(qǐng)點(diǎn)擊→《鴻蒙全套學(xué)習(xí)指南》小編自己整理的部分學(xué)習(xí)資料（包含有高清視頻、開發(fā)文檔、電子書籍等）

以上分享的學(xué)習(xí)路線都適合哪些人跟著學(xué)習(xí)？
-應(yīng)屆生/計(jì)算機(jī)專業(yè)
通過學(xué)習(xí)鴻蒙新興技術(shù)，入行互聯(lián)網(wǎng)，未來(lái)高起點(diǎn)就業(yè)。
-0基礎(chǔ)轉(zhuǎn)行
提前布局新方向，抓住風(fēng)口，自我提升，獲得更多就業(yè)機(jī)會(huì)。
-技術(shù)提升/進(jìn)階跳槽
發(fā)展瓶頸期，提升職場(chǎng)競(jìng)爭(zhēng)力，快速掌握鴻蒙技術(shù)，享受藍(lán)海紅利。

最后

鴻蒙開發(fā)學(xué)習(xí)是一個(gè)系統(tǒng)化的過程，從基礎(chǔ)知識(shí)的學(xué)習(xí)到實(shí)戰(zhàn)技能的錘煉，再到對(duì)前沿技術(shù)的探索，每一環(huán)節(jié)都至關(guān)重要。希望這份教程資料能幫助您快速入門并在鴻蒙開發(fā)之路上步步攀升，成就一番事業(yè)。讓我們一起乘風(fēng)破浪，擁抱鴻蒙生態(tài)的廣闊未來(lái)！

如果你覺得這篇內(nèi)容對(duì)你有幫助，我想麻煩大家動(dòng)動(dòng)小手給我：點(diǎn)贊，轉(zhuǎn)發(fā)，有你們的 『點(diǎn)贊和評(píng)論』，才是我創(chuàng)造的動(dòng)力。

關(guān)注我，同時(shí)可以期待后續(xù)文章ing，不定期分享原創(chuàng)知識(shí)。

想要獲取更多完整鴻蒙最新VIP學(xué)習(xí)資料，請(qǐng)點(diǎn)擊→《鴻蒙 (Harmony OS)開發(fā)學(xué)習(xí)手冊(cè)》