1、需求描述

对与一个手机软件，常间的一个功能就是头部的返回和刷新按钮，如下所示：

而头部的功能其实都是一样的，只是标题内容不一样，那么，能够实现组件的封装，使得头部功能模块化，用起来更加方便呢，答案是肯定的，这就是自定义带参数的组件。

2、自定义控件结构分析

如下图所示,所需要的自定义组件就是保留原有的样式效果，通过传参不同，达到显示不同标题的效果。

2、案例实现

1、资源准备

这里我们在阿里字体图标库中下载 返回按钮和刷新按钮的图标，把下载的图标放到 media 目录下，如下图所示：

注意了，这里我开始用的是中文名称，在预览的时候报错了，需要把图片名称修改成英文，修改后如下：

2、实现头部样式

在上一节中，我们实现了 List 表单效果，我们直接在表单标题上先实现一个头部导航菜单的样式，代码如下所示：

Row() {
        Image($r('app.media.back'))
          .width(30)
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Blank()
        Image($r('app.media.refresh'))
          .width(30)
      }

新知识点

• Bland() 占满空白区域

3、提取控件

把上面的头部样式整体重新封装成一个组件 Component,如下所示：

@Component
struct HeaderMenu {
  private title:ResourceStr
  build(){
    Row() {
      Image($r('app.media.back'))
        .width(30)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      Image($r('app.media.refresh'))
        .width(30)
    }
    .width('100%')
    .height(30)
  }
}

4、全局控件

上面我们已经实现了一个自定义控件的封装了，但是存在一个问题，这个控件在当前页面，只能给当前页面使用，离我们想要个所有界面都能使用还是有点差距，那么如何实现全局都能使用，这里我们就需要把控件单独封装成控件文件，供所有界面引用接可以实现。
在ets 目录下创建新的组件目录 components ,以后我们新的自定义组件都放在这个目录下。创建 文件 ArkTS File ,命名为 HeadMenu，如下所示：

接下来我们把刚才的 HeadMenu 代码拷贝过来即可，这里要注意的是，现在我们做的事实际上属于模块化开发，在前面模块讲解的时候说到过，模块化开发需要定义 Export 导出，只有导出了，别人才能使用你，新的代码如下：

@Component
export struct HeaderMenu {
  private title:ResourceStr
  build(){
    Row() {
      Image($r('app.media.back'))
        .width(30)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      Image($r('app.media.refresh'))
        .width(30)
    }
    .width('100%')
    .height(30)
  }
}

页面引用如下：

import {HeaderMenu} from '../../components/HeadMenu'

4、总结

以上就是今天要讲的内容，实现了自定义全局组件的封装和实现。下一节将介绍如何实现自定义构件函数，实现页面代码模块化，让代码可读性更高，层次更加清晰。