代码块的构建，可以帮助开发者快速拆分设计元素，直观感受上让代码看起来更加整理。

但我们留意到一个细节，当界面中存在相同代码结构的视图，即视图和修饰符使用相同，只是传入的内容不同时，如果只是单纯使用视图代码块，也会显得代码很赘余。特别是当我们需要批量修改样式的时候，可能改到自己奔溃。

针对于上面的场景，ArkUI或者说ArkTS语言提供了一种全局构建器GlobalBuilder编程方式，即只需要定义好一个抽象的结构体，并且声明好所需要的参数，在使用时就可以通过传入参数值的方式来使用这个抽象的代码块。

GlobalBuilder基础用法

GlobalBuilder和Builder使用方法类似，我们只要在声明视图时添加function，举个例子，如下代码所示：

// 使用自定义视图
textView('Hello World', 23, '#409EFF')

// 自定义视图
@Builder
  function textView(text: string,size: number, textColor: string) {
    Text(text)
      .fontSize(size)
      .fontColor(textColor)
  }

上述代码中，我们构建了一个自定义视图textView，并且使用function关键字声明，表示这是一个全局的自定义视图。在该视图的参数中，我们定义了3个参数text、size、textColor，并且指定了参数的类型。

在视图的闭包中，我们还是按照常规构建文本视图的方式来实现代码，但对于视图、修饰器中使用到的参数，我们使用定义的参数来代替。

完成后，我们就可以在主视图中调用textView视图，并且传入参数值，来显示不同内容/样式的同一个自定义视图样式。

这里注意的是，ArkUI要求使用的自定义视图，必须包含在一个父级容器中，因此我们要在最外层增加相应的视图容器。

很好，那么下一步，我们调用多几个textView，并传入不同的参数看看效果。如下代码所示：

Column({space:20}) {
  textView('Hello World', 23, '#333333')
  textView('Hello World', 17, '#666666')
  textView('Hello World', 14, '#999999')
  textView('Hello World', 12, '#1F71FF')
}

上述代码中，我们在Column容器中调用了多个textView视图，并且为textView视图设置不同的传参，如此就可以看到预览窗口中的效果：文字的尺寸和颜色各不相同。

自定义全局代码块可以极大地提高开发者的效率，当我们遇到界面的元素存在相同结构的场景时，就可以考虑使用GlobalBuilder编程方式。

GlobalBuilder使用案例

再举一个案例，在“开通会员”页面中，常常可以看到应用提供的关于开通会员的高级功能项目，而这些一条条的项目就可以当作一个可以被复用的代码块。

我们先来构建单个代码块，并将内部的参数抽离出来，如下代码所示：

// 调用视图
Column() {
  itemView('app.media.ic_gallery_free','New daily themed questions for anxiety.')
}

// 自定义视图
@Builder
function itemView(image:string,text: string) {
  Row({space:10}) {
    Image($r(image))
      .objectFit(ImageFit.Auto)
      .width(24)
    Text(text)
      .fontSize(14)
      .fontColor(Color.Black)
  }
  .width('100%')
}

上述代码中，我们单独构建了自定义全局构建器视图-itemView视图，传入的参数为string类型的image、text。在itemView视图的闭包中，我们使用Row布局容器横向排布了一个Image图片视图和Text文本视图，并且图片和文本的内容使用声明的参数代替。如此，便完成了单个项目视图的搭建。

我们在主视图中调用它，传入图片的值和文本的值，在预览窗口上可以看到单条项目的呈现效果。

下一步，我们增加多几个项目，并传入不同的值，如下代码所示：

Column({space:20}) {
  itemView('app.media.ic_gallery_free','New daily themed questions for anxiety.')
  itemView('app.media.ic_device_earphone','Exclusive library of guided Journeys to feel calm, empowered, & present.')
  itemView('app.media.ic_public_devices_phone','Daily mood check-in.')
  itemView('app.media.ic_public_music','Attach photos to your entries.')
}
.justifyContent(FlexAlign.Start)
.padding(20)

上述代码中，我们在Column容器中使用了多个itemView视图，并设置它们之间的间距为20。通过给itemView视图传入不同的值来显示不同的内容，但仍旧保留itemView视图的布局。最后我们调整对齐方式为左对齐，由此呈现了“开通会员”界面中的高级功能的样式内容。

本章小结

GlobalBuilder全局构建器不仅仅可以构建单个视图（视图+修饰符），还可以构建组合视图（布局容器+视图+修饰符）。在实际开发过程中，我们对于界面中具有相同特性的样式，完全可以自定义一个全局视图，通过传入不同的值来显示内容，比如资讯类App中瀑布流（图片+文字）。

当然，案例中“开通会员”页面剩下的部份，结合前面章节所学的内容，你可以增加一个示例图片，一个“开通会员”按钮，来构建一个完整的开通会员页面。比如下面这样：

快来动手试试吧！

ArkUI极简教程06：代码块复用

GlobalBuilder基础用法

GlobalBuilder使用案例

本章小结