列表组件和video组件
- List组件和Grid组件的使用
- 简介
- List组件的使用
- List组件简介
- 使用ForEach渲染列表
- 设置列表项分割线
- List列表滚动事件监听
- 设置List排列方向
- Grid组件的使用
- Grid组件简介
- 使用ForEach渲染网格布局
- video组件使用
- 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。