文章目录一、引言二、为什么要使用自定义组件三、实战创建你的第一个自定义组件3.1 项目结构准备3.2 编写自定义组件3.3 导出组件3.4 在主页面中引入并使用组件3.5 预览效果四、进阶技巧layoutWeight 与 Preview4.1 使用 layoutWeight 动态分配空间4.2 使用 Preview 单独预览组件五、总结一、引言在鸿蒙应用开发中随着项目功能的日益复杂将所有代码都堆砌在一个文件里显然是不现实的。这不仅会让代码变得臃肿难读更会给后期的维护和功能复用带来巨大挑战。为了解决这个问题鸿蒙提供了自定义组件这一核心机制。它允许我们将一个复杂的页面按照功能模块拆分成若干个独立、可复用的小组件然后再将它们像搭积木一样拼装起来形成一个完整的应用。二、为什么要使用自定义组件在动手编码之前我们先来理解一下自定义组件的核心价值。以一个功能复杂的编辑器为例模块化拆分我们可以将编辑器拆分为“顶部工具栏”、“中间编辑区”、“底部状态栏”三个独立的部分。独立开发与维护每个部分都是一个独立的组件修改“顶部工具栏”的样式完全不会影响到“中间编辑区”的逻辑。功能复用如果另一个页面也需要一个类似的“底部状态栏”我们只需引入这个组件即可无需重复编写代码。这种“分而治之”的思想是构建大型、可维护应用的基础。三、实战创建你的第一个自定义组件下面我们通过一个具体的案例来演示如何创建和使用自定义组件。我们将创建一个包含Header、Main和Footer三个组件的页面。3.1 项目结构准备首先我们需要在项目中创建一个合理的目录结构来存放组件。在pages目录下新建一个文件夹命名为day01用于存放今天学习的代码。在day01文件夹上右键选择New Page选择Empty Page并为其命名例如Index点击Finish完成创建。再次在day01文件夹上右键选择New Directory新建一个名为components的文件夹。在components文件夹上右键选择New ArkTS File依次创建三个文件Header.ets、Main.ets和Footer.ets。3.2 编写自定义组件接下来我们分别编写这三个组件。1. Header 组件 (Header.ets)双击打开Header.ets文件输入Component后按回车键IDE 会自动生成组件的基本结构。然后我们为其添加一个简单的文本。Componentstruct Header{build(){Text(这是 Header 组件).fontSize(20).height(50).width(100%).backgroundColor(#FFA500).textAlign(TextAlign.Center)}}注意自定义组件上不要添加Entry装饰器它只用于页面级组件。2. Main 组件 (Main.ets)按照同样的方式编写Main.ets文件。Componentstruct Main{build(){Text(这是 Main 组件).fontSize(20).width(100%).backgroundColor(#87CEEB).textAlign(TextAlign.Center)}}3. Footer 组件 (Footer.ets)编写Footer.ets文件。Componentstruct Footer{build(){Text(这是 Footer 组件).fontSize(20).height(50).width(100%).backgroundColor(#90EE90).textAlign(TextAlign.Center)}}3.3 导出组件为了让其他文件能够使用这些自定义组件我们需要将它们导出。在每个组件文件的结构体定义前加上export default关键字。以Header.ets为例exportdefaultstruct Header{// ... 组件内容}请同样为Main.ets和Footer.ets添加export default。3.4 在主页面中引入并使用组件现在我们打开之前创建的页面文件例如Index.ets将这三个组件组合起来。删除页面中自动生成的示例代码。在页面顶部使用import语句引入这三个组件。在build()方法中使用一个Column容器将它们包裹起来。importHeaderfrom./components/HeaderimportMainfrom./components/MainimportFooterfrom./components/FooterEntryComponentstruct Index{build(){Column(){Header()Main()Footer()}.width(100%).height(100%)}}3.5 预览效果点击右上角的Previewer按钮你就可以在预览器中看到Header、Main和Footer三个组件已经按照从上到下的顺序被成功组合到了一个页面中。四、进阶技巧layoutWeight与Preview4.1 使用layoutWeight动态分配空间在上面的例子中我们为Header和Footer设置了固定的高度50vp。那么Main组件如何自动填满剩余的空间呢答案就是layoutWeight属性。它的作用是按比例动态分配子元素在父容器主轴方向上的剩余空间。由于我们最外层是Column组件其主轴方向是垂直的。因此在Main组件中添加.layoutWeight(1)它就会自动占满除去Header和Footer后的所有剩余空间。修改Main.ets文件Componentexportdefaultstruct Main{build(){Text(这是 Main 组件).fontSize(20).width(100%).layoutWeight(1)// 添加这一行.backgroundColor(#87CEEB).textAlign(TextAlign.Center)}}4.2 使用Preview单独预览组件当自定义组件逻辑变得复杂时你可能希望在不运行整个页面的情况下单独预览这个组件。鸿蒙提供了Preview装饰器来实现这一点。在你想预览的组件例如Main.ets的结构体定义前添加Preview装饰器。PreviewComponentexportdefaultstruct Main{// ... 组件内容}添加后点击预览器你就可以单独看到Main组件的渲染效果了这大大提升了开发调试的效率。五、总结通过本文的实战你已经掌握了鸿蒙自定义组件的核心用法创建通过Component装饰器定义组件结构。导出使用export default让组件可以被外部引用。引入与使用在页面中通过import引入并像使用普通组件一样使用它。布局利用layoutWeight实现灵活的页面布局。调试使用Preview装饰器进行组件的独立预览。自定义组件是构建复杂鸿蒙应用的基石熟练掌握它将使你的开发效率和质量得到显著提升。现在就开始在你的项目中实践吧