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

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

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

Stack - 层叠容器组件

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

    image-20240805175043880

    点击查看图片来源

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

    点击查看图片来源

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

  • 使用语法

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

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

    img

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

    img

  • 修改方法

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

      img

自定义组件

为什么需要

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

    image-20240806164009832

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

组件怎么创建

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

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

    image-20240806164937921

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

    image-20240806165149948

    image-20240806165242579

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

    image-20240806165400346

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

    image-20240806165535689

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

    @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-20240806171132157

  • @Entry又是什么呢？

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

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

    @Preview
@Component
struct ToDoItem {
  build() {

  }
}

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

构建TodoItem自定义组件的界面

image-20240806174714285

  • 根据效果图分析发现这个组件根容器应该是一个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-20240806175645837

      image-20240806175705322

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

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

互动环节

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

交流群

  • 建了个鸿蒙交流群，帮助希望从业的人员方便交流技术以及获取鸿蒙认证。需要的请添加猫林老师微信(llybf365)，拉你进群
posted @ 2024-12-09 10:03  猫林老师  阅读(11)  评论(0)  编辑  收藏  举报