【鸿蒙实战开发】HarmonyOS-ArkUI实用案例代码块构建

前言

当界面中的元素越来越多时，不仅代码量会逐级增多，而且布局容器的嵌套关系会越来越复杂。有时可能一不小心删掉一个闭包，或者修饰器位置添加错误，就会导致整个界面布局乱套，这非常影响开发者的心态。

于是在开发过程的演进中，我们尝试将界面中的元素进行分类整合，再结构化地抽离形成单一的代码块，如此便可使得代码结构清晰的同时，也让视图布局开发过程更加高效。

比如，一个简单的界面可以分为：顶部导航、中心内容、底部导航，再把中心区域进行拆分，可能由分为上、中、下区域…

我们来完成一个简单的例子，我们将图片、文字都单独定义，首先是图片视图，如下代码所示：

// 使用代码块
this.catImageView()

// 自定义代码块
@Builder
catImageView() {
  Image($r('app.media.img_cat'))
    .objectFit(ImageFit.Auto)
    .width(200)
    .borderRadius(8)
}

上述代码中，我们使用ArkUI的构建器创建了一个自定义的图片视图catImageView，并在其闭包中实现了图片视图的样式。最终我们只需要在BuilderView视图的build函数中使用catImageView代码块，就可以显示catImageView视图的内容。

如此在BuilderView视图中，我们就可以很清晰看到内部元素的布局和使用，而单个元素的样式调整（使用各种修饰符），就只需要在它单独的构建器中实现就好了。

我们再来添加几个自定义视图，如下代码所示：

// 布局
Column() {
  // 使用代码块
  this.catImageView()
  this.titleView()
  this.contentView()
  t