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

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

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

Stack - 层叠容器组件

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

image.png

image.png

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

image.png

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

• 使用语法

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

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

image.png

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

image.png

• 修改方法

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

image.png

自定义组件

为什么需要

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

image.png

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

组件怎么创建

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

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

image.png

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

image.png

image.png

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

image.png

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

image.png

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

  @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都有这个装饰器
    

    image.png

• @Entry又是什么呢？

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

预览自定义组件

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

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

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

构建TodoItem自定义组件的界面

image.png

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

image.png

image.png

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

• 结果如下

image.png

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

互动环节

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