导读：在本篇文章里，您将掌握层叠布局、自定义组件的用法，特别是自定义组件将来的开发中必然会用，其中应该特别关注自定义组件的一些规范与装饰器。
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作为文件夹，所以这里猫林老师也保持同步
- 华为鸿蒙官网的Codelabs上大部分示例代码都是以
组件将来我们都以.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的组件，也能被预览器预览
预览自定义组件
自定义组件创建完，我们需要一边写代码一边看效果。可是默认情况下自定义组件无法在预览器里进行预览，这时候需要加一个装饰器
@Previewstruct 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) => { // 组件 })例：
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 }
互动环节
- 看到那个赞了吗？给我狠狠点下去！
