鸿蒙应用开发从入门到入行 - 篇4:层叠布局、自定义组件、ForEach

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

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

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

Stack - 层叠容器组件

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

fig:

fig:

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

fig:

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

• 使用语法
• Stack() { item1() item2() item3() }
• 默认情况下：越在后面的组件越叠在最高层（就像叠罗汉，后来的在最上），所以上述代码后的层级效果如下图

fig:

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

fig:

• 修改方法
• 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，层级最低，所以在最里层。效果如下图

  

  fig:

自定义组件

为什么需要

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

fig:

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

组件怎么创建

• 一般情况下，为了更好的管理项目中的文件，我们会把自定义组件放到一个跟pages目录同级的新的文件夹里，起名叫components或者view。文件夹起名每个人都有自己的喜好，这里我不强求。但是本文后面以view起名作为存放组件的文件夹
  • 华为鸿蒙官网的Codelabs上大部分示例代码都是以view作为文件夹，所以这里猫林老师也保持同步

fig:

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

fig:

fig:

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

fig:

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

fig:

• 此时本文件会生成如下代码
• @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都有这个装饰器

  

  fig:

• @Entry又是什么呢？
  • 入口的意思
  • 作用：把某个组件作为这个页面的第一个入口组件启动
  • 一个页面有很多自定义组件，那么启动这个页面到底以哪个组件作为入口组件呢？就是通过@Entry来指定的
  • 并且，加了@Entry的组件，也能被预览器预览

预览自定义组件

• 自定义组件创建完，我们需要一边写代码一边看效果。可是默认情况下自定义组件无法在预览器里进行预览，这时候需要加一个装饰器@Preview
• @Preview @Component struct ToDoItem { build() { } }
• 这样我们就能进行界面编写，并且在预览器看到预览效果了

构建TodoItem自定义组件的界面

fig:

• 根据效果图分析发现这个组件根容器应该是一个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后，来到需要用到组件的地方，直接写组件名，出提示后按回车

  

  fig:

  

  fig:

• 至此，我们完成了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}`) } })
• 结果如下

fig:

注：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 }

互动环节

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