@Component 自定义组件：是将代码封装成组件，通过导出导入方式进行使用。方便代码复用，使代码更加简洁。

下面是代码展示：

// 自定义一个标题栏组件
@Component

// 导出组件，方便其它文件导入使用
export struct Header {
  // ResourceStr：是 string | Resource的别名。表示既可以直接传字符串，又可以传本地资源字符串（string.json中的内容）
  private title: ResourceStr = ''
  build() {
    Row({space: 8}) {
      Image($r('app.media.icon'))
        .width(30)
      Text(this.title)
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
      Blank() // 空白组件，相当于弹簧效果，撑满剩余空间，将图标挤到最右边去
      Image($r('app.media.icon'))
        .width(30)
    }
    .width('100%')
  }
}

// 在其它文件使用的时候：
// 1.先导入组件，如：import {Header} from '../components/Header'
// 2.直接使用组件，如：Header({title: '商品列表'})

@Builder 自定义构建函数：是将代码封装成函数，通过函数调用进行使用。方便代码复用，使代码更加简洁。

注意：

1》定义在组件外部的函数是全局函数，因为函数没有在class/struct中，所以定义的时候需要function关键字，使用的时候直接调用即可。
函数定义格式：@Builder function ItemCard(item: Item) { ... }
函数调用格式：ItemCard(item)

2》定义在组件内部的函数是局部函数，定义的时候不需要function关键字，使用的时候需要通过"this.函数名"进行调用
函数定义格式：@Builder ItemCard2(item: Item) { ... }
函数调用格式：this.ItemCard2(item)