鸿蒙应用开发从入门到入行

第四天 - 层叠布局、自定义组件、ForEach 循环生成组件

导读：在本篇文章里，您将掌握层叠布局、自定义组件的用法，特别是自定义组件将来的开发中必然会用，其中应该特别关注自定义组件的一些规范与装饰器。

Stack - 层叠容器组件

• 在 App 效果中，我们经常看到一些阴影蒙版、加载中遮罩等，如下图列表所示：

• 
  
  

• 
  
  

• 像这种：把某个组件堆叠到另外一个组件上的效果，称之为层叠效果或者堆叠效果（就像小时候玩的叠罗汉，一个人叠在另一个人上面）

• 
  
  

• 温馨提示：成都网友请勿看上图

• 使用语法

  Stack() {    item1()    item2()    item3()  }

• 默认情况下：越在后面的组件越叠在最高层（就像叠罗汉，后来的在最上），所以上述代码后的层级效果如下图

• 
  

• 默认情况下：子组件都在Stack容器内居中堆叠，如果需要修改，需要通过alignContent参数实现位置的相对移动，一共有 9 种方式如下图

• 修改方法

      Stack({ alignContent: Alignment.TopStart }) { // 改成在左上对齐堆叠        .....      }

• 如果需要手动指定谁在最上层，可以使用zIndex属性，修改层级。zIndex 的值越大越叠在最上面

  Stack({ alignContent: Alignment.BottomStart }) {    Column() {      Text('Stack子元素1').fontSize(20)    }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)      Column() {      Text('Stack子元素2').fontSize(20)    }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)      Column() {      Text('Stack子元素3').fontSize(20)    }.width(200).height(200).backgroundColor(Color.Grey)        }.width(350).height(350).backgroundColor(0xe0e0e0)

• 此时，虽然子元素 1 是一开始写的，但是它的 zIndex 最大，所以会在最上层。子元素 2 的 zIndex 值小一点，所以在中间。子元素 3 因为没有写 zIndex，层级最低，所以在最里层。效果如下图

自定义组件

为什么需要

• 很多时候我们需要自定义一些由其他组件布局组合在一起的组件，方便在界面上复用，例如上期布置的附加作业年度待办目标

• 
  
  

• 待办列表区里的每一项组成元素比较多，比如有 Row、Checkbox、Text 等。而且这些元素组合起来的部分，多次需要使用。那么为了更好的维护、修改、复用，可以把这一部分封装成自定义组件

组件怎么创建

• 一般情况下，为了更好的管理项目中的文件，我们会把自定义组件放到一个跟pages目录同级的新的文件夹里，起名叫components或者view。文件夹起名每个人都有自己的喜好，这里我不强求。但是本文后面以view起名作为存放组件的文件夹

• 华为鸿蒙官网的 Codelabs 上大部分示例代码都是以view作为文件夹，所以这里猫林老师也保持同步

• 
  
  

• 组件将来我们都以.ets 文件结尾，接下来，我们在 view 文件夹里创建一个组件文件：对着 view 文件夹鼠标右键->新建->ArkTS File->然后输入组件名即可

• 
  
  

• 
  
  

• 注意：组件名应该使用多单词大驼峰形式，建好后如下图

• 
  
  

• 那么如何快速生成一个组件结构呢？输入comp出提示后按回车即可

• 
  
  

• 此时本文件会生成如下代码

  @Component  struct  {    build() {          }  }

• 注意看会发现，代码中还没有组件名字，因此我们还需要手动填入名字。名字跟文件名应该保持一致，因此改完后如下

  @Component  struct ToDoItem {    build() {      }  }

• 这样就建好一个空组件了

装饰器 - @Component 与 @Entry

• 大家通过代码可以发现，无论是新建项目默认生成的Index.ets文件，或者是我们刚刚创建的ToDoItem自定义组件，都有struct关键字。

• 这里先对它做个说明

• struct 代表结构体，也是一种数据类型（有兴趣详细了解可以去学习 TS 语法）

• 但对于我们目前的鸿蒙应用开发中，暂时只要知道。不管是页面还是自定义组件（页面也可以理解为就是个很大的组件），都用struct修饰，即都为以下格式

struct 组件名{  build() {
  }}

• 每个组件（页面也是组件），内都必须有个build函数，在这个函数里写描述界面的代码

• 提示：别忘了，每个 build 里有且只有一个根容器哦

• 学过 TS 或者 Java 或者 C 的都知道，struct 只是一个结构体，怎么就跟组件扯上关系了呢？

• 这就跟它上面的@Component有关

• @Component 说明

• 这是一个装饰器

• 通过上一篇的学习我们了解到装饰器可以让某个数据具备特殊功能，例如 @State 可以让数据驱动 UI 更新

• 所以@Component这个装饰器就是能让struct这个数据具备组件的功能

• 因此你会发现默认生成的Index.ets和我们自定义的组件TOdoItem都有这个装饰器

• @Entry 又是什么呢？

  入口的意思

  作用：把某个组件作为这个页面的第一个入口组件启动

  一个页面有很多自定义组件，那么启动这个页面到底以哪个组件作为入口组件呢？就是通过@Entry来指定的

  并且，加了 @Entry 的组件，也能被预览器预览

预览自定义组件

• 自定义组件创建完，我们需要一边写代码一边看效果。可是默认情况下自定义组件无法在预览器里进行预览，这时候需要加一个装饰器@Preview
  

  @Preview @Component struct ToDoItem {  build() { ​ } }

• 这样我们就能进行界面编写，并且在预览器看到预览效果了

构建 TodoItem 自定义组件的界面

• 根据效果图分析发现这个组件根容器应该是一个Row，里面两个子组件：Checkbox与Text
  

• 且 Row 需要设置圆角、背景色、最好给个高度，Checkbox 需要给左右外间距

• 代码如下

    build() {      Row() {        Checkbox()          .margin({ left: 20, right: 20 })        Text('中彩票500万')      }      .width('100%')      .height(40)      .backgroundColor(Color.White)      .borderRadius(20)    }

如何使用自定义组件

• 需要先导出、再导入，即可使用

• 导出：

• 只要在struct前加一个 export 即可

  export struct ToDoItem {    ....  }

• 导入：

• import 语法

  import { 组件名 } from '路径'  // 例  import { ToDoItem } from '../view/ToDoItem'

• 使用：

  ToDoItem()

• DevEco 非常强大，我们也可以不写导入的代码，让 DevEco 自动生成

• 做法：给组件加完export后，来到需要用到组件的地方，直接写组件名，出提示后按回车

• 
  
  

• 
  
  

• 至此，我们完成了 TodoItem 组件的简单编写。并通过它学习了装饰器、组件创建和使用的相关知识。等接下来完成“年度待办”案例时，还会回来丰富它，但目前就到此为止吧

ForEach 循环生成组件

• 若需要根据数组数据生成一堆同类型的组件，则需要用到ForEach
  

• 作用：根据数组生成组件，数组有多少个元素，就生成多少个组件

• 语法：

  ForEach (数组, (item: 类型, index: number) => {    // 组件  })

• 例：

  @State arr: string[] = ['a', 'b', 'c', 'd']    ForEach (this.arr, (item: string, index: number) => {    // 组件    Row () {      Text(`item的值是：${item},index是：${index}`)    }  })

• 结果如下

• 
  
  

注：ForEach 有第三个参数，是键值生成函数。作用：为数据源 arr 的每个数组项生成唯一且持久的键值。有点类似 vue 里的v-bind:key，这里我就不细讲了，等哪一天专门出一篇技术文讲解。本系列文章主要是侧重于教会开发技能，理论细节及各种原理和性能优化等内容，未来会偶尔写文说明，所以敬请关注本号，免得错过最新内容。

• 提示：ArkTS 是一种强类型语言，所以每种数据必须声明类型，比如(item: string, index: number)，不能省略类型

• 试一试，大家可以用 ForEach 生成我们刚刚封装的TodoItem看看

总结内容

• 本篇文章我们主要学习了三个方面：Stack、自定义组件、ForEach

• Stack：

• 层叠组件，只要是实现一个组件叠在另外一个组件上面的都可以用 Stack 包起来

• 默认越后面写的组件层级越高

• 可以通过zIndex属性方法修改，数字越大层级越高

• 自定义组件

• 当某个界面区域可能要多次复用时，封装成自定义组件方便复用

• 其次，自定义组件也能更好的管理代码文件、让界面更清爽、利于维护

• @Component 修饰的结构体才算组件

• @Entry 是入口的意思，代表某个页面启动的第一个组件

• @Preview 可以预览自定义组件

• 导出组件：export

• 导入组件：import

• ForEach

• 根据数组生成组件

课后练习

• 判断题

• 自定义组件可以直接预览

• 问答题

• 请说出下列代码的层级

    Stack() {      组件A().zIndex(2)      组件B().zIndex(0)      组件C()    }

• 今天又补全了一些知识，大家可以把上一篇文章的年度待办计划作业的布局给完成了，下一期会讲组件传值的相关知识

• 附：年度待办计划初始数据

    @State totalTasks: Array<TodoModal> = [      { text: "月入5万", finished: false },      { text: "中彩票500万", finished: false },      { text: "找个富婆", finished: false },      { text: "买套别墅", finished: false },      { text: "改掉爱做梦的习惯", finished: false },    ];

  class TodoModal {    text: string = ''    finished: boolean = false  }

互动环节

• 看到那个赞了吗？给我狠狠点下去！