HarmonyOS—低代码开发中使用自定义组件

开发者在使用DevEco Studio的低代码功能进行可视化开发时，可以通过自定义组件功能自由封装业务逻辑类组件，实现能力复用，降低开发及维护成本。

NOTE
该功能在DevEco Studio 3.1 Beta2及更高版本中支持，且创建的工程必须是compileSdkVersion为8或以上的ArkTS工程。

自定义组件

由已有的基础组件（或组合）创建自定义组件

1.右击基础组件（或组件组合），在弹出的菜单中选择Create Custom Component。

2.在弹出的对话框中输入自定义组件名称，然后单击OK。

自定义组件创建完成后，DevEco Studio将会自动生成.visual和.ets文件，Stage模型和FA模型下生成的文件路径有所区别：

• List item
• 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.自定义组件创建完成后，DevEco Studio将自动打开自定义组件设计界面，开发者可以在设计界面编辑自定义组件的属性、事件和布局。

新建一个自定义组件

1.选中支持的目录，选择File > New > Visual > Component，或者右击目录，选择New > Visual > Component。

其中支持新建自定义组件的目录，Stage模型和FA模型有所区别：

• Stage模型：切换到Ohos视图后的ets目录及下属目录（不包含test目录）。
• FA模型：切换到Ohos视图后的Page类型Ability目录及下属目录。

2.在弹出的New Visual Component对话框中，输入自定义组件名称，单击Finish。

3.自定义组件创建完成后，DevEco Studio将自动打开自定义组件设计界面，开发者可以在设计界面编辑自定义组件的属性、事件和布局。

使用自定义组件

自定义组件创建后，开发者可以直接在应用设计界面的Custom页签查看到已经创建的自定义组件，并可以直接拖拽到画布中使用，另外开发者也可以在.ets代码页面直接导入并使用自定义组件。

在.ets代码页面使用自定义组件示例如下所示：

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

自定义属性

开发者可以为自定义组件设置自定义属性。

1.在自定义组件的.ets文件中定义变量。

例如：

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

2.在使用自定义组件的设计界面中，选择该自定义组件，在属性栏中将显示自定义属性。开发者可自行设置属性值，设置属性值后可同步修改自定义组件显示效果。

自定义事件

开发者可以为自定义组件设置自定义事件。

1.在自定义组件的.ets文件中定义事件函数。

例如：

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

2.在使用自定义组件的设计界面中，选择该自定义组件，在事件栏中将显示自定义事件。开发者可自行绑定事件函数。

那么要想成为一名鸿蒙高级开发，以上知识点是必须要掌握的，除此之外，还需要掌握一些鸿蒙应用开发相关的一些技术，需要我们共同去探索。

为了能够让大家跟上互联网时代的技术迭代，在这里我特邀了几位行业大佬整理出一份最新版的鸿蒙学习提升资料，有需要的小伙伴自行领取，限时开源，先到先得~~~~

领取以下高清学习路线原图请点击→《鸿蒙基础入门学习指南》纯血鸿蒙HarmonyOS基础技能学习路线图

领取以上完整高清学习路线图，请点击→《鸿蒙全套学习指南》小编自己整理的部分学习资料（包含有高清视频、开发文档、电子书籍等）

以上分享的学习路线都适合哪些人跟着学习？
-应届生/计算机专业通过学习鸿蒙新兴技术，入行互联网，未来高起点就业。
-0基础转行提前布局新方向，抓住风口，自我提升，获得更多就业机会。
-技术提升/进阶跳槽发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术，享受蓝海红利。

最后

鸿蒙开发学习是一个系统化的过程，从基础知识的学习到实战技能的锤炼，再到对前沿技术的探索，每一环节都至关重要。希望这份教程资料能帮助您快速入门并在鸿蒙开发之路上步步攀升，成就一番事业。让我们一起乘风破浪，拥抱鸿蒙生态的广阔未来！

如果你觉得这篇内容对你有帮助，我想麻烦大家动动小手给我：点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。

关注我，同时可以期待后续文章ing，不定期分享原创知识。

想要获取更多完整鸿蒙最新VIP学习资料，请点击→《鸿蒙 (Harmony OS)开发学习手册》