Harmonyos系统列表组件和video组件的使用

List组件和Grid组件的使用

简介

在手机应用中，经常会见到一些数据列表，如设置页面、通讯录、商品列表等。下图中两个页面都包含一个列表，“首页”页面中包含两个功能菜单列表，“商城”页面中包含一个商品列表。

常见的列表有线性列表（List列表）和网格列表（Grid列表），ArkUI提供了List组件和Grid组件，使用List和Grid组件能够很轻松的完成一些列表页面。

List组件的使用

List组件简介

List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个条目对应一个ListItem组件。

使用ForEach渲染列表

列表往往由多个条目组成，所以我们需要在List组件中写多个ListItem组件来构建列表，这就会导致代码的冗余。使用循环渲染（ForEach）遍历数组的方式构建列表，可以减少重复代码。示例：

@Entry
@Component
struct ListDemo {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text(`${item}`)
              .width('100%')
              .height(100)
              .fontSize(20)
              .fontColor(Color.White)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0x007DFF)
          }
        }, item => item)
      }
    }
    .padding(12)
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}

设置列表项分割线

List组件子组件ListItem之间默认是没有分割线的，部分场景子组件ListItem间需要设置分割线，这时候我们可以使用List组件的divider属性。divider属性包含四个参数：

strokeWidth: 分割线的线宽。
color: 分割线的颜色。
startMargin：分割线距离列表侧边起始端的距离。
endMargin: 分割线距离列表侧边结束端的距离。

List列表滚动事件监听

List组件提供了一系列事件方法用来监听列表的滚动，您可以根据需要，监听这些事件来做一些操作：

onScroll：列表滑动时触发，返回值scrollOffset为滑动偏移量，scrollState为当前滑动状态。
onScrollIndex：列表滑动时触发，返回值分别为滑动起始位置索引值与滑动结束位置索引值。
onReachStart：列表到达起始位置时触发。
onReachEnd：列表到底末尾位置时触发。
onScrollStop：列表滑动停止时触发。

List({ space: 10 }) {
  ForEach(this.arr, (item) => {
    ListItem() {
      Text(`${item}`)
        ...
    }.editable(true)
  }, item => item)
}
.editMode(this.editFlag)
.onScrollIndex((firstIndex: number, lastIndex: number) => {
  console.info('first' + firstIndex)
  console.info('last' + lastIndex)
})
.onScroll((scrollOffset: number, scrollState: ScrollState) => {
  console.info('scrollOffset' + scrollOffset)
  console.info('scrollState' + scrollState)
})
.onReachStart(() => {
  console.info('onReachStart')
})
.onReachEnd(() => {
  console.info('onReachEnd')
})
.onScrollStop(() => {
  console.info('onScrollStop')
})

设置List排列方向

List组件里面的列表项默认是按垂直方向排列的，如果您想让列表沿水平方向排列，您可以将List组件的listDirection属性设置为Axis.Horizontal。

listDirection参数类型是Axis，定义了以下两种类型：

Vertical（默认值）：子组件ListItem在List容器组件中呈纵向排列。
Horizontal：子组件ListItem在List容器组件中呈横向排列。

Grid组件的使用

Grid组件简介

Grid组件为网格容器，是一种网格列表，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件。

使用ForEach渲染网格布局

和List组件一样，Grid组件也可以使用ForEach来渲染多个列表项GridItem。示例

@Entry
@Component
struct GridExample {
  private arr: String[] = ['0', '1', '2', '3']

  build() {
    Column() {
      Grid() {
        ForEach(this.arr, (day: string) => {
          ForEach(this.arr, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .fontColor(Color.White)
                .backgroundColor(0x007DFF)
                .width('100%')
                .height('100%')
                .textAlign(TextAlign.Center)
            }
          }, day => day)
        }, day => day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .height(300)
    }
    .width('100%')
    .padding(12)
    .backgroundColor(0xF1F3F5)
  }
}

置列表项GridItem的高度为固定值，例如100；不设置rowsTemplate属性，就可以实现Grid列表的滚动：

Grid() {
  ForEach(this.arr, (day: string) => {
    ForEach(this.arr, (day: string) => {
      GridItem() {
        Text(day)
          ...
      }
    }, day => day)
  }, day => day)
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.height(300)

此外，Grid像List一样也可以使用onScrollIndex来监听列表的滚动。

video组件使用

Video组件的接口表达形式为

Video(value: {src?: string | Resource, currentProgressRate?: number | string |PlaybackSpeed, previewUri?: string |PixelMap | Resource, controller?: VideoController})

其中包含四个可选参数，src、currentProgressRate、previewUri和controller。

src表示视频播放源的路径，可以支持本地视频路径和网络路径。
使用网络地址时，如https，需要注意的是需要在module.json5文件中申请网络权限。
使用本地资源播放时，当使用本地视频地址我们可以使用媒体库管理模块medialibrary来查询公共媒体库中的视频文件，示例代码如下：

import mediaLibrary from '@ohos.multimedia.mediaLibrary';

async queryMediaVideo() {
  let option = {
    // 根据媒体类型检索
    selections: mediaLibrary.FileKey.MEDIA_TYPE + '=?',
    // 媒体类型为视频
    selectionArgs: [mediaLibrary.MediaType.VIDEO.toString()]
  };
  let media = mediaLibrary.getMediaLibrary(getContext(this));
  // 获取资源文件
  const fetchFileResult = await media.getFileAssets(option);
  // 以获取的第一个文件为例获取视频地址
  let fileAsset = await fetchFileResult.getFirstObject();
  this.source = fileAsset.uri
}

currentProgressRate表示视频播放倍速，其参数类型为number，取值支持0.75，1.0，1.25，1.75，2.0，默认值为1.0倍速

previewUri表示视频未播放时的预览图片路径

controller表示视频控制器

参数的具体描述如下表：

参数名	参数类型	是否必填
src	string Resource	否
currentProgressRate	number string PlaybackSpeed8+	否
previewUri	string PixelMap8+ Resource	否
controller	VideoController	否

说明，视频支持的规格是：mp4、mkv、webm、TS。