鸿蒙应用开发从入门到入行 - 篇6:数据监听器、滚动、侧滑功能

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

第六天 - 数据监听器、滚动、侧滑功能

导读:在本篇文章里,您将掌握监听器、滚动、侧滑等相关内容,助力你开发出更具交互的案例。

本次整体学习目标介绍

  • 我们本次继续完成这个年度计划案例,并依然通过需求驱动的方式学习新知识点,整体效果如下

    1234.gif
  • 回顾:上一篇文章我们已经完成了TodoMain的显示,并且完成了从TodoItem里修改完成状态后,也能同步到TodoMain,目前案例还差TodoHeaderTodoInput部分未完成

对上篇文最后留下的互动问题做解答

  • 上篇问到:在本案例中TodoItem里的数据打勾变化后(完成状态变化),TodoMain已经能成功收到改动了。那么它的父组件,最早持有数组的Index有收到改动吗?并说出理由
  • 相信到这篇文章的时候,大家已经有正确答案了,这里猫林也做个解答:
    • Index里的数组也跟着变了。因为TodoMain接收Index传递过来的数组时用的是@Link装饰器。而@Link具有父子同步的效果,因此子里TodoMain对数组改动,也能同步到父的Index

年度目标案例 - 统计总量

  • 此时头部的TodoHeader里,需要显示总目标数以及已完成数。也就意味着依赖了存放目标列表的数组

  • 步骤如下

    • 来到TodoHeader里声明一个成员变量接收数组,因为这个组件里仅仅只需要展示,无需改动数组。所以用@Prop修饰即可,并再声明个变量用来记录已完成数量,并把数组长度与已完成数量渲染到进度条与Text里,代码如下

      import { TodoModel } from '../viewmodel/TodoModel'
      
      @Component
      export struct TodoHeader {
        // 父传递数组进来,数组长度即为目标总数
        @Prop todoList: TodoModel[] = []
        // 声明一个变量记录已完成数量,将来用
        @State finishedCount: number = 0
      
      
        build() {
          Row() {
            .........
                // 以下是界面改动部分
            Stack() {
              Progress({ value: this.finishedCount, total: this.todoList.length, type: ProgressType.Ring })
                .width(80)
                .height(80)
              Text(`${this.finishedCount} / ${this.todoList.length}`)
            }
          }
          ...........
        }
      }
      
    • 来到Index做传递

      .........
      @Entry
      @Component
      struct Index {
        ..........
      
        build() {
          Column({ space: 20 }) {
            // 主要是这里传参
            TodoHeader({ todoList: this.totalFlags })
            ........
          }
        }
      }
      
    • 经过以上两步此时已能显示出总目标量,并且不管将来是添加了新目标还是删除了旧目标,这里的总量都会跟着变

      • 因为@Prop修饰后,父的数组有改变会自动同步到子,所以子里也会有最新数组数据

年度目标案例 - 统计已完成数 - 监听器的使用

  • 到目前为止,统计已完成数,也即我们在TodoHeader里声明的成员变量finishedCount依然保持着初始化值:0

  • 此时我们需要想办法统计出已完成数,并且随着数组的改变,已完成数也要重新统计

    • 例如:数组里打勾或者取消打勾、删除打勾项等都要实时统计
  • 所以,我们需要的是一种监听数据是否有变化,一旦变化就能执行我们预设的逻辑的机制

  • 鸿蒙开发里提供了这种机制,就叫数据监听器

  • 语法

    其他装饰器 @Watch('方法名') 变量名: 变量类型
      
    // 例
    @Prop @Watch('getFinished') todoList: TodoModel[] = []
    
  • 释意:

    • 代表监听todoList是否有更改,一旦有更改就调用getFinished这个方法进行处理
  • 注意:

    • 使用监听器时,请记得必须要声明它绑定的方法,像上面代码,我们需要声明成员方法,如下
    export struct TodoHeader {
      
      @Prop @Watch('getFinished') todoList: TodoModel[] = []
     
      getFinished() {
        console.log('数组改变了')
      }
      
      ........
    }
    
  • 此时来到界面我们随便找几个目标打勾,会发现在控制台成功输出数组改变了

    image.png

  • 此时,已成功监听到数组变动,所以只需在这个方法里,统计出数组里一共有多少个已完成的数量,然后赋值给finishedCount即可

  • 代码如下(注意:这里为了照顾所有编程语言使用者,我用最简单的for循环统计。如懂JS可以使用reduce)

      getFinished() {
        let total = 0
        for (let i = 0; i < this.todoList.length; i++) {
          if (this.todoList[i].finished) {
            total++
          }
        }
    
        this.finishedCount = total
      }
    
  • 恭喜,至此头部的统计部分我们全部完成

image.png

年度目标案例 - 添加新目标

  • 此时完成TodoInput里的添加新目标功能:
  • 整体思路为
    • 把数组传递给TodoInput,然后给输入框加输入完成事件,在事件里把输入的内容加到数组里即可(用@Link装饰,子里变了也能同步到父)
  • 步骤:

    • 来到TodoInput,声明一个状态变量接收父的数组

      import { TodoModel } from '../viewmodel/TodoModel'
      .........
      export struct TodoInput {
        
        @Link todoList: TodoModel[]
        ........
      }
      
    • 来到Index做传递

        build() {
          Column({ space: 20 }) {
            ......
            TodoInput({ todoList: this.totalFlags })
            ......
          }
            .....
        }
      
    • 这个时候,只需要输入框加输入完成事件,事件里做非空判断,不为空把输入内容加入到数组里,再清空输入框即可

      • 输入完成即按下输入法的回车键。事件为:onSubmit
      ......
        
      import { promptAction } from '@kit.ArkUI'
      
      @Component
      export struct TodoInput {
        .........
      
        build() {
      
          Row() {
            TextInput({ placeholder: '请输入新目标', text: $$this.newFlag })
              .width('90%')
              .onSubmit(() => {
                if (this.newFlag) {
                  this.todoList.push({
                    text: this.newFlag,
                    finished: false // 新增加的新年目标,默认情况就该是未完成状态
                  })
                  
                  this.newFlag = '' // 情况输入框
                    
                } else {
                  promptAction.showToast({ message: '输入内容不能为空' })
                }
              })
          }
          ........
        }
      }
      
    • 提示:这里想做的更严谨的同学还可以做去重处理

年度目标案例 - 目标列表滚动

  • 此时本案例存在一个问题:当数据过多,一页无法展示时,居然没有出现滚动条

    • 大家可以通过输入一些新目标来测试,你会发现铺满页面后发现无法滚动
    • 如下图
image.png
  • 原因:

    • 在鸿蒙应用开发中,不是所有组件都具备内容滚动功能

    • 本例中,包住每一项目标的是Column(如下代码),而Column不具备滚动功能

      Column({ space: 10 }) {
            ForEach(this.todoList, (item: TodoModel, index: number) => {
              // 这里用了ES6简写,完整写法是 TodoItem({ item: item })代表把ForEach里的item传递给TodoItem需要的item
              TodoItem({
                item, onChange: () => {
                  this.changeStatus(item, index)
                }
              })
      })
      
    • 所以可以给Column外面包一个Scroll组件,如

      Scroll() {
        Column({ space: 10 }) {
            .......
          })
         .width('100%')
      }
      .height(300)
      
    • 这样即具备了滚动功能。

    • 这里为什么还给Scroll设置了高度呢

      • 如果不设置高度,将无法滚动
      • 原因:
        • 当内容超出容器大小时,我们才需要滚动以及才能拥有滚动。所以,如果内容并没有超出容器,是不具备滚动功能的
        • 而如果你不给Scroll设置高度,它的高度就是根据内容自动计算得来,内容一共有多高,它就有多少高度。这样就导致内容永远没超出Scroll,就不具备滚动功能
    • 思考:高度写死300合理吗?

      • 肯定不合理,就拿本案例来说,TodoMain是这个页面最后一个组件,它如果高度设小了,就导致后面留了很多空,比较丑,如下图
image.png
- 但是数字写高了又不好,有可能在其他小屏幕会超出,在大屏幕也不够

- 所以我们**希望Scroll这个容器的高度能占用剩余高度**

- 这时候可以用`LayoutWeight`属性,设置这个容器在父容器里主轴方向剩余空间的占比

- 故代码改动如下

  ```dart
  Scroll() {
    Column({ space: 10 }) {
        .......
    })
     .width('100%')
  }
  .layoutWeight(1)
  ```

- 解释;

  - 这代表让`Scroll`在父容器剩余空间里占比1。因为只有设置了它占比,所以就相当于它自己独占剩余部分(如果只有一个容器设置占比,写1或者写99效果都一样)
  • 这里再稍微说明一下Scroll组件其他特点

    • 能让自己的子组件具备滚动功能,且它里面只能放一个子组件。
    • 它自己一般不直接存放内容,而是让子组件存放内容。
  • 上面虽然用Scroll能起到滚动效果,但我们这里不用它。因为,我们还需要具备侧滑功能,Scroll并不方便

    • 事实上Scroll开发中也相对用的少
  • 如果既要能滚动,又要具备侧滑效果,应该用List组件

知识点 - List组件

  • List组件称之为列表组件,专门用来展示一堆相同宽度的列表项(例如TodoItem)。适合连续、多行呈现同类数据(例如我们本案例里的数组)

  • 特点:当列表项达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能

  • 使用语法

    List() {
      ListItem() {
        内容
      }
    }
    
  • 说明:List里仅能放ListItem(每一项)或ListGroup(分组),组件关系如下图

image.png
  • 例如:
image.png
  • 虽然List里组件只能放ListItemListItemGroup,但它内部可以使用if-elseForEach语法做条件渲染、循环渲染

  • ListRowColumn这些容器一样,也可以设置space参数来控制每一个列表项之间的间距

  • 并且通过List里的ListItem能设置侧滑

  • 具体的关于List还有一些特点,将在下面把它用在本案例里再具体讲解,这里仅仅解释基本作用

年度目标案例 - 使用List改写TodoMain

注意:在开始之前,如果你按照上面的学习在案例TodoMain组件里使用过Scroll来学习它,那记得把Scroll删掉

  • 很简单,其实就是把原来的Column改成List,再把ForEach里的TodoItemListItem包起来即可,代码如下

    .......
      
    @Component
    export struct TodoMain {
     
      ........
    
      build() {
    
        // 把之前的根容器从Column换成了List,List也能用Space属性
        List({ space: 10 }) {
          ForEach(this.todoList, (item: TodoModel, index: number) => {
            // 把TodoItem用ListItem包起来,因为List组件里只能放`ListItem`
            ListItem() {
    
              TodoItem({
                item, onChange: () => {
                  this.changeStatus(item, index)
                }
              })
            }
          })
        }
        .width('100%')
        .layoutWeight(1)
      }
    }
    
  • 注意:记得给List高度,否则也一样无法滚动。我们这里依然是让它占用剩余高度

  • 这个时候,我们的新年目标列表即具备滚动功能了,大家可以自行添加新目标任务直到超出显示范围,再试试看是否具备滚动到底的效果

知识点 - @Builder装饰器

接下来要讲的侧滑用的上它,所以先对它进行介绍

  • @Builder是用来装饰函数的,被它装饰的函数称之为自定义构造函数

  • 作用:有些时候,一段UI元素可能需要被复用。即可使用@Builder装饰的函数进行封装

  • 语法

    // 注意:写到build函数外面(也就是写成员变量的位置)
    @Builder // @Builder也可以跟函数名同一行,但是鸿蒙语法规范建议写到上面
    函数名 (参数) {
      // 封装的UI元素
    }
    
  • 例:

    @Builder 
    myUI () {
      Row() {
        Text('猫林')
          .fontSize(20)
          .fontWeight(700)
        Button('点赞')
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Red)
    }
    
  • 使用时直接像调用函数一样用即可,例如

    build () {
     
     Column({ space: 20 }) {
      this.myUI()
        
      this.myUI()
     }
    }
    
  • 效果如下

image.png
  • 跟组件的区别:

    • @Builder更轻量,一般只封装本页面里的UI元素。而组件可能有自己的状态数据且能复用在多个页面

年度目标案例 - 实现侧滑删除

  • 首先,我们需要给每一项加侧滑功能

  • 上面讲解List时,已经说过ListItem可以方便添加侧滑功能

  • 实现方式也很简单,就是给ListItem添加swipeAction属性即可

  • 用法:

    ListItem() {
      .....
    }
    .swipeAction( { start: 自定义构造函数, end: 自定义构造函数 } )
    
    • start:设置左侧侧滑

    • end:设置右侧侧滑

    • 可以同时写,代表左侧、右侧都具备侧滑效果(即可以左滑,也可以右滑)

    • 也可以根据业务需求,决定单独要哪边的侧滑,像本案例仅需要右侧的侧滑,因此写end即可

    • 自定义构造函数是用来传入侧滑出来的小界面,例如我们本案例右侧出来的部分即是一个小界面,如下图

image.png
  • 那如何把这个小界面传递给ListItem呢?就是通过自定义构造函数传入,也就是用@Builder封装的函数

  • 完成功能:

    • 先来定义侧滑出来的小界面(来到TodoMain

        @Builder
        endSwipe() {
          Image($r('app.media.ic_public_delete_filled'))
            .width(35)
            .height(35)
            .fillColor(Color.Red) // 如果图片是svg格式的,用这个属性可以改变图片颜色
        }
      
      • ic_public_delete_filled这张图片格式为svg,并且原本是黑色,但我们界面需求是红色,因此可以通过fillColor属性进行改变颜色。(只对svg格式图片有效)
    • 然后给ListItem添加SwipeAction属性,并给end属性(因为需要右侧出现),然后传入上面的自定义构造函数

          List({ space: 10 }) {
            ForEach(this.todoList, (item: TodoModel, index: number) => {
              ListItem() {
                          .......
              }
              .swipeAction({ end: this.endSwipe() })
            })
          }
      
    • 经过以上两步后,我们拖拽每一项往左滑动即可出现红色的删除图标,但此时点击图片没有任何反应

    • 所以,我们还需要给@Builder里的删除图标加点击事件,但此时问题来了。点击事件里我们需要:点哪行的删除,就把这行删掉,也即把数组里这一行的数据删除。所以,我们还需要给@Builder的函数传入当前这行的下标当参数,如下

            ForEach(this.todoList, (item: TodoModel, index: number) => {
              ListItem() {
                ......
              }
              .swipeAction({ end: this.endSwipe(index) }) // 传入下标
            })
      
    • 最后回到@Builder,添加形参接收,并完成点击事件即可

        @Builder
        endSwipe(index: number) { // 添加形参
          Image($r('app.media.ic_public_delete_filled'))
            .width(35)
            .height(35)
            .fillColor(Color.Red)
            .onClick(() => { // 添加点击事件
                      this.todoList.splice(index, 1)
            })
        }
      
  • 因为之前解释过,todoList是用@Link装饰,所以TodoMain里改变了,也会影响到 Index,既而影响到其他用到同数据的地方
  • 所以到此为止,本案例算完整结束

总结

  • 用文字讲解案例着实麻烦。因为需要大量截图、以及代码解释。以后如果要分享实战项目,猫林老师还是尽量以视频教学为主吧。
  • 到本篇文章结束,如果各位都有每篇认真阅读,其实就已经具备了入门能力。以后几乎遇到任何需求的案例和交互都能实现。
  • 所以后续,猫林老师打算后续的系列文章,都是以分享某一个实战技巧、技术点的形式来写。例如:如何发送请求、如何沉浸式布局、如何多端适配、如何性能分析与优化等,敬请期待
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容