ArkTS 自定义组件

在ArkTS中如何将重复的代码抽离复用呢，我们可以通过组件化的思想来实现。

头部组件(自定义组件)

在项目的开发中，一般头部导航栏的内容都是复用的，我们可以通过组件的封装实现。

我们在右侧添加一个按钮组件，代替功能组件。 

在这里 我们使用了Blank组件。 这个组件可以默认将中间的内容填补，更加方便做成我们两端对齐的效果。

      Row(){
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Blank()
        Button('按钮')
          .width(60)
          .height(35)
      }
      .width('100%')
      .height(30)
      .margin({bottom: 20})

 在ArkTS中封装组件有两种方式，一种是直接在当前ets文件中定义封装，第二种是做成一个组件文件。

当前文件定义

我们通过定义一个struct体来实现一个组件的复用。但是要注意我们的Text组件保证复用性应该是动态改变的，还有外边距，可以使用组件的时候单独设置。

@Component
struct Header{
  private title: ResourceStr
  build(){
    Row(){
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Blank()
      Button('按钮')
        .width(60)
        .height(35)
    }
    .width('100%')
    .height(30)
  }
}

页面内定义的方法，定义好直接在页面中使用组件的名字使用就行了。发现跟之前的效果是一样的。

当然也可以对组件使用组件的通用样式，比如说宽度高度，边距等。

定义为单独文件

1.创建目录、文件

我们在ets目录下创建一个component目录，下面创建一个Header文件

2.将代码剪贴过去

我们将组件的代码剪贴过去，但是要注意，组件化的思想，我们需要将组件导入导出，所以需要export 这个组件。 使用export 语法导出

3.导入组件使用

导入header文件 会发现效果跟之前文件内使用是一摸一样的

 卡片内封装(自定义构造函数)

我们在写代码的时候，为了实现功能，代码的复用性很差，写了很多重复的代码，我们可以将它优化一下，让代码变得更加直观一点。

在这里我们可以通过自定义组件的方式来完成。当然还有别的方法，比如使用自定义构造函数来实现。 他用来做一个独特页面的封装更加方便。

1.全局自定义构建函数

我们在页面组件外边定义的组件叫做全局自定义构建函数。

然后我们将重复的代码放进去。

我们发现他是报错的，因为在原本的代码循环结构中，有一个item，是没有代入的，所以我们需要代入item 

我们直接在原先的地方使用就可以了 ，发现跟之前的效果是一样的。

代码结构清晰很多。

2.局部自定义构建函数

我们也可以将构建函数定义在内部，叫做局部自定义构建函数

我们将其放在组件末尾，但是注意，在使用局部自定义构建函数的时候，是不需要写function的 

这时候我们发现上面调用组件的地方报错了,因为我们没有使用this，使用组件内部的方法，需要使用this来调用。 最后的结果也跟我们之前的是一样的。

自定义公共样式函数

我们代码中，重复的公共样式太多了，比如说什么width，height什么的呀，我们可以将公共样式封装起来，可以减少代码量，让代码变得更加清晰。

// 公共样式封装
@Styles function fillScreen(){
  .width('100%')
  .height('100%')
  .backgroundColor('#efefef')
  .padding(20)
}

 我们直接使用.函数 来使用它就发现跟之前一样了。

我们的 公共样式组件也可以写在页面内部，就是将function去掉 就可以了。

自定义私有样式组件

 我们在开发的时候，发现有一些私有样式也产生了很多重复的代码

我们使用全局样式抽离的时候发现样式报错了。报错提示不是公共样式。 所以我们的全局样式封装，只能写所有组件的公共样式，不可以写私有样式。我们可以通过extend语法来实现。

注意，使用extends 封装私有样式只能写在全局，不可以写在局部。 

// 全局私有样式封装
@Extend(Text) function priceText(){
  .fontSize(18)
  .fontColor('#ff0000')
}

最后发现跟我们的样式也是一样的，我们可以通过直接修改封装好的组件样式来做到集体修改的效果，也便于我们的操作。