今天面试，面试官问AskTs里的滚动组件的相关内容！！！可悲，有些许忘了，所以！！！

年薪不到1个亿
416 阅读10分钟

兄弟们，让我们来回顾一下有关AskTs相关的滚动组件吧！

List组件

首先先有请我们最开始接触的简单版本的滚动组件List吧

先回顾一下它的最基本的使用：

List() {
        listItem() {}//{}这个里面装内容
  .....               //需要注意一个listItem里面只能装一个子元素，若想装多个，可以用row等组件进行
}

List组件默认滚动方向是垂直方向，如果你想设置水平方向也不是不行，但需要你为其设置一下属性方法，利用枚举类型，设置成水平方向.listDirection(Axis.Horizontal)

通过这个属性你就可以成果将其设置成水平方向啦！！！！

如果你想设置list列和行的对齐方式，就需要用到.alignListItem(ListItemAlign.XXX)，其中有三种对齐方式，Start，Center，End，效果图如下： image-20240815202857379-1723724946683-1-1723724951028-3-1723724952224-5-1723724953070-7-1723724953720-9-1723724954287-11-1723724954849-13-1723724955191-15.png

当然说了这么多可有可无的东西，别忘了我们的主题滚动组件，List作为最简单的滚动组件，当然也十分容易实现，当你把所有ListItem设置的高加一起大于外侧父组件List的高的时候就可以轻而易举的实现滚动效果，若是想水平滚动当然就是加一起的宽大于父组件的宽就欧克了 如：List的高设置成200px，则你只需要将lsitItem的高设置超过200即可

    List() {}
    .alignListItem(ListItemAlign.Start)
    .width('100%')
    .height(200)

      ListItem() {
        Text('来学习啦！')
          .fontSize(20)
      }
      .backgroundColor(Color.Red)
      .height(200)
            ListItem() {
        Text('又来学习啦！')
          .fontSize(20)
      }
      .backgroundColor(Color.Blue)
      .height(200)

以上就是简单版List的基本结构和主要属性了，接下来让我们隆重迎接进化版的List组件。 进化版List组件：

进化版的List的功能就有点强大了，它不仅可以实现滚动，还可以基于数据渲染出完整的列表。

在学习之前，你必须了解List的核心用法：

  1. List作为顶级容器
  2. ListItemGroup 作为分组容器
  3. ListItem作为 List 或者ListItemGroup的子组件
 List() {
      ListItemGroup({
        header: this.headerBuilder(),//设置头部组件
        footer: this.footerBuilder(),//设置尾部组件
      }) {
        ListItem() {
          Text('我是内容')
            .backgroundColor(Color.Orange)
        }
      }

当你了解到了如何设置头部组件和尾部组件时（尾部组件不常用），你就可以写出简单的通讯录了

      ListItemGroup({ header: this.itemHead('A'), space: 20 }) {
        // 循环渲染分组A的ListItem
        this.contactBuilder('小明')
        this.contactBuilder('小华')
        this.contactBuilder('李华')
      }

效果图如下：

image-20240815205535169.png

如果你可以轻而易举的写出这个小部分，那么就要恭喜你了，可以成功写出所以的通讯录了，完整的通讯录无非就是无数多个上面的小组件组成的，当然一个一个写是有点傻，利用好Foreach循环就可以简简单单的实现了

Scroll组件

这个两个组件，我愿意称它俩为牛头马面，List组件对于排列有序的子元素容易实现，而scroll组件对于排列没有序的子元素更友好。就像美团，淘宝等页面，商品大小不一，list发挥受阻，但scroll就能轻而易举的驾驭。

接下来，我们先说一下scroll的核心用法，其实相对于list来说，他俩差不了多少，碟刹当子组件的高/宽大于scroll时，才能实现滚动，但scroll只能支持一个子组件。

Scroll(){
  // 只支持一个子组件
  Column(){
    // 内容放在内部
    // 尺寸超过 Scroll 即可滚动
    text('好好学习')
    .height(200)
    .width('100%')
    text('好好学习吧')
    .height(200)
    .width('100%')
  }
}
.width('100%')
.height(200)
//这里是相关属性
//设置滚动条的颜色
.scrollBarColor(Color.Pink)
//设置滚动条的粗细
.scrollBarWidth(50)
//设置滚动条的状态
.scrollBar(BarState.Off)
//设置滚动条的滑动效果
.edgeEffect(EdgeEffect.Spring)

以上讲的都是一些普通的scroll的滚动效果，接下来，重头戏来咯！！！

当我们在逛淘宝，或者是觅食时，我们始终找不到想要想吃的东西，突然灵光一现，想到刚才最上面有你想要的，可是此时你已经往下滑了1个小时，想要再滑上去可能会要了你半条老命，于是乎，小火箭它来咯，只需点一些，瞬间回到开始的时候，这就是我们要学的神助手scroll控制器！！！！

设置scroll的控制器的核心步骤就简简单单的三步

  1. 实例化 Scroller的 控制器

      scroller: Scroller = new Scroller()

  2. 绑定给 Scroll

      Scroll(this.scroller) {}

  3. 调用 控制器的方法控制滚动，通过控制器的属性获取滚动距离

    const x = this.scroller.currentOffset().xOffset
const y = this.scroller.currentOffset().yOffset

Swiper组件

严格意义上来说，swiper组件并不能算是一个合格的滚动组件，它更多是提供滑动轮播的效果，说这些大家可能有点不了解，简单来说，就是各种购物页面最上面的广告轮播图，类似于以下的

image-20240815212631041.png

swiper就是让四五个图片循环展示，进行轮播，由此实现轮播内容，接下来是swiper的基础代码：

Swiper() {
  // 轮播内容 
  // (设置尺寸，撑开swiper)
}
.width('100%')
.height(100)

当然，我们都知道，这些轮播图肯定会自己滑动，所以它也一定有一些相关的属性，让它实现各种日常见到的效果，如循环，是否自动播放，自动播放的时间间隔，还可以设置是否为纵向滑动

属性类型效果
autoPlayboolean子组件是否自动播放。默认值：false**说明：**loop为false时，自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。
intervalnumber使用自动播放时播放的时间间隔，单位为毫秒。默认值：3000
verticalboolean是否为纵向滑动。默认值：false

以上就是简单的swiper组件的效果，还有些设置导航指示器效果的属性：

Swiper() {
  }
  .width('100%')
  .height(160)
  .indicator(
    Indicator.dot() // 圆点
      .selectedColor(Color.White) // 选中颜色
      .selectedItemWidth(30) // 选中宽度
      .selectedItemHeight(4) // 选中高度
      .itemWidth(10) // 默认宽度
      .itemHeight(4) // 默认宽度
  )

到目前为止，我们已经可以通过swiper实现常见的应用效果了，Congratulation！！！

网格布局 Grid/GridItem

接下来，我们将学习一个十分重要的组件Grid，这个组件非常之强大，固定行列数量（不滚动），合并行列（不滚动），设置滚动，代码控制滚动，自定义滚动条，这些都是它强大的体现！！！

首先，让我们了解一下组件结构：

Grid() {
  GridItem(){
    // 内容
  }
  GridItem(){
    // 内容
  }
}

紧接着，我要着重说一下Grid的注意事项：

  1. Grid的子组件必须是GridItem组件，需要展示的内容设置在 GridItem 内部既可

  2. GridItem 只能有一个子组件

  3. 宽高分为 2 种情况：

    1. Grid组件设置了宽高属性，则其尺寸为设置值。

    2. Grid组件没有设置宽高属性，Grid组件的尺寸默认适应其父组件的尺寸。

如果我们学滚动组件烦了，我们可以稍微缓一下，学习一下任何让Grid组件不滚动，也就是所谓的固定行和列：

  1. columnsTemplate这个可以设置网格布局的最小列宽值，例如, '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。
  2. rowsTemplate这个可以设置网格布局的最小行宽值，例如, '1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。

通过这个两个属性，就可以很轻松的实现上面图片的效果了，接下来让我来演示一下：

    Grid() {
      this.GridItemBuilder('1', Color.Red)
      this.GridItemBuilder('2', Color.Red)
      this.GridItemBuilder('3', Color.Red)
      this.GridItemBuilder('4', Color.Red)
      this.GridItemBuilder('5', Color.Red)
      this.GridItemBuilder('6', Color.Red)
    }
    .rowsTemplate('1fr 1fr 1fr')
    .columnsTemplate('1fr 2fr 1fr')
  @Builder
  GridItemBuilder(title: string, bgColor: ResourceColor) {
    GridItem() {
      Text(title)
        .fontColor(Color.White)
        .fontSize(30)
    }
    .backgroundColor('#0094ff')
  }

这样子，你就可以随心所欲的设置有多少行多少列了，恭喜啊，又掌握一个有用的知识！！！！

不知道大家有没有见过以下的内容排序：

image-20240815222030667-1723731642520-1.png

大家想不想知道这种效果如何实现啊？既然你们诚心诚意的发问了，我就大发慈悲的告诉你们吧！！！！哈哈哈哈哈哈哈哈哈，其实很简单，你们只需要掌握四个属性即可，两个行的，两个列的。

如果你已经掌握了上面设置行列的排序，那么接下的对于你来说也是简简单单，手拿把掐。

你只需要知道rowStart是指定当前元素起始行，而rowEnd是指定当前元素终点行。

而列的话，和行差不多，只是换了一个单词columnStart和columnEnd而已，当你掌握了之后，你就可以实现下图的效果了

image-20240815223858283-1723732742927-3.png

哎呀！！兄弟们我们好像还没说到我们这次的重点，不过也不用急，上面的内容都是为了下面的 知识而铺垫的。

接下来，我们聊一下如何实现Grid的横向滚动和竖向滚动吧！！！！！！！！！

//行滚动，若想行滚动，只需保留rowsTemplate，且每个组件加上宽度
 .rowsTemplate('1fr '.repeat(3))
//列滚动，若想列滚动，只需保留columnsTemplate，且每个组件加上高度
.columnsTemplate('1fr '.repeat(3))

recording-1723733368072-6.gif

上面就是竖向滚动的效果图，横向的我就不放了，我十分害怕大家说我水内容，哈哈哈哈哈！！！！

如果你都已经掌握了上面的内容，那么我再说一个简简单单的利用代码控制Grid组件的滚动吧，与其说是滚动，不如说的滑动翻页。

其实也很简单，类似于scroll控制器控制scroll置顶一样，这次我们用scroller

  1. 创建 Scroller 对象
  2. 设置给 Grid
  3. 调用 Scroller 对象的 scrollPage 方法

代码如下：

// 创建 Scroller 对象
scroller: Scroller = new Scroller()
// 设置给 Grid
 Grid(this.scroller) {
 }
// 通过代码控制
this.scroller.scrollPage({
  next:true // 下一页
  next:false // 上一页
})

这样你就可以成功实现利用代码控制Grid组件的滑动了

recording-1723733873896-9.gif

瀑布流 WaterFlow

我们跨过千山万水，终于见到了最后阳光透过云朵射到山顶的丁达尔现象了！！！！！！

那容小弟为大哥们介绍一下瀑布类WaterFlow滑动组件容器吧！！人如其名，字如其形，瀑布流，就像流水一样，连绵不绝，不曾断绝。这个名字也很好的显示了WaterFlow的特性，滚动的子组件相互连接，不管长短，都紧紧不曾分开！！！啊，多么可悲可泣的关系啊！！！

上面是我个人的理解，为了大家不笑，我也说一下官方的说法：瀑布流容器，由“行”和“列”分割的单元格所组成，通过容器自身的排列规则，将不同大小的“项目”自上而下，如瀑布般紧密布局

WaterFlow组件的用法和Grid组件类似所以这里我只为大家演示最核心的用法：实现竖直方向的瀑布流，下面是基础代码：

WaterFlow({参数}) {
  FlowItem() {
    // 子组件
  }
  FlowItem() {
    // 子组件
  }
}
  .属性()

如果大家仔细看了上面Grid的相关内容，那WaterFlow的相关属性也融会贯通了！！！！

我相信大家的实力，反正肯定比我强！！！！！！！！！

本文部分参考来自华为鸿蒙应用开发

“本文正在参加华为鸿蒙有奖征文征文活动”

上面的内容纯我个人看法和想法，仅供参考，若有不巧当之处，还望大家在评论区指出，互相促进，为鸿蒙的发展而努力！为了中国！！！

avatar
文章
阅读
粉丝