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

本文链接：https://blog.csdn.net/HarmonyOS_002/article/details/139929509

前言

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

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

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

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

// 使用代码块
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()
  this.pigImageView()
}

// 标题视图
@Builder
titleView() {
  Text('Cats & Pigs')
    .fontSize(23)
}

// 副标题
@Builder
contentView() {
  Text('The Note App')
    .fontSize(14)
}

// 小猪图片视图
@Builder
pigImageView() {
  Image($r('app.media.img_pig'))
    .objectFit(ImageFit.Auto)
    .width(200)
    .borderRadius(8)
}

在这里插入图片描述

上述代码中，我们单独自定义构建了titleView、contentView、pigImageView视图，完成后在Column布局容器中调用，如此在build函数中就可以很清晰知道使用了那些视图。
再来，我们调整下布局排版，让视图居中对齐，并调整他们之间的间距。如下代码所示：

Column({space:32}){
  this.catImageView()

  Column({space:10}) {
    this.titleView()
    this.contentView()
  }

  this.pigImageView()
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)

在这里插入图片描述

上述代码中，我们使用Column容器排布了titleView、contentView视图，并设置它们之间的space间距参数值为10。然后整个容器形成的组合视图，又与catImageView、pigImageView垂直排布，并设置space为32。
如此，便设置好了多个视图之间的在垂直方向的相对距离。最后我们对于整个布局容器，设置其height、width高度和高度为100%，并设置justifyContent对齐方式为Center居中，便实现了视图的居中对齐显示效果。
不错的样子，我们再加个背景颜色看看，如下代码所示：

.backgroundColor('#FBE14E')

在这里插入图片描述

我们再来实现一个例子，以登录页面为例，首先是单独创建自定义视图，如下代码所示：

// 示例图片
@Builder
loginimageView(){
  Image($r('app.media.img_login'))
    .objectFit(ImageFit.Auto)
    .width('90%')
    .borderRadius(8)
}

// 标题文字
@Builder
titleView(){
  Text('ArkUI')
    .fontSize(17)
    .fontColor('#333333')
}

// 欢迎文字
@Builder
welcomeTextView(){
  Text('Welcome to ArkUI and enjoy your programming experience.')
    .fontSize(14)
    .fontColor('#999999')
}

// 确认按钮
@Builder
confirmBtnView(){
  Text('Let‘s get started')
    .fontSize(14)
    .fontColor('#000000')
    .padding({left:32,right:32,bottom:15,top:15})
    .backgroundColor('#FBE14E')
    .borderRadius(30)
}

// 登录文字按钮
@Builder
loginBtnView(){
  Text('Login')
    .fontSize(14)
    .fontColor('#000000')
}

在这里插入图片描述

上述代码中，我们依次构建了loginimageView、titleView、welcomeTextView、confirmBtnView、loginBtnView5个视图，并在自定义视图中单独完善了视图的样式。
下一步，我们来使用布局容器进行合适的排布，如下代码所示：

Column({space:60}) {
  this.loginimageView()

  Column({space:15}) {
    this.titleView()
    this.welcomeTextView()
  }

  Column({space:20}) {
    this.confirmBtnView()
    this.loginBtnView()
  }
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)

在这里插入图片描述

上述代码中，我们首先明确了视图之间的排布关系，loginimageView单独作为一个视图、titleView和welcomeTextView形成一个组合视图，confirmBtnView和loginBtnView也作为一个组合视图，最后使用Column容器进行整体布局。
当然为了居中显示，我们设置宽高和对齐方式，就不赘述了。