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

列表组件和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表示视频控制器

参数的具体描述如下表:

参数名参数类型是否必填
srcstring Resource
currentProgressRatenumber string PlaybackSpeed8+
previewUristring PixelMap8+ Resource
controllerVideoController

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/226070.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python3 字符串 ----20231216

Python3 字符串 字符串是 Python 中最常用的数据类型。我们可以使用引号( 或 " )来创建字符串。 创建字符串很简单,只要为变量分配一个值即可。例如: var1 = Hello World! var2 = "Runoob"Python 访问字符串中的值 Python 不支持单字符类型,单字符在 Pyth…

C语言-Makefile

Makefile 什么是make? make 是个命令,是个可执行程序,用来解析 Makefile 文件的命令这个命令存放在 /usr/bin/ 什么是 makefile? makefile 是个文件,这个文件中描述了我们程序的编译规则咱们执行 make 命令的时候, m…

华为数通——路由冗余和备份

注:当一条路由的出接口down时,该路由会自动失效。 要求:数据优先走千兆链路。 R1 [ ]ip route-static 172.16.1.0 24 12.1.1.2 目的地址 掩码 下一条 [ ]ip route-static 172.16.1.0 24 21.1.1.2 preference 50 目的地址 …

OxLint 发布了,Eslint 何去何从?

由于最近的rust在前端领域的崛起,基于rust的前端生态链遭到rust底层重构,最近又爆出OxLint,是一款基于Rust的linter工具Oxlint在国外前端圈引起热烈讨论,很多大佬给出了高度评价;你或许不知道OxLint,相比ES…

MySQL 8.x temp空间不足问题

目录 一、系统环境 二、问题报错 三、问题回顾 四、解决问题 一、系统环境 系统Ubuntu20.04 数据库版本MySQL 8.0.21 二、问题报错 在MySQL上执行一个大的SQL查询报错Error writing file /tmp/MYfd142 (OS errno 28 - No space left on device) Exception in thread …

【深度学习】强化学习(六)基于值函数的学习方法

文章目录 一、强化学习问题1、交互的对象2、强化学习的基本要素3、策略(Policy)4、马尔可夫决策过程5、强化学习的目标函数6、值函数7、深度强化学习 二、基于值函数的学习方法 一、强化学习问题 强化学习的基本任务是通过智能体与环境的交互学习一个策略…

el-date-picker 选择一个或多个日期

el-date-picker可选择多个日期 type“dates” 加个s即可 <div><span>el-date-picker选择多个日期</span><el-date-pickertype"dates"v-model"dateList"placeholder"选择一个或多个日期"></el-date-picker></di…

js-正则表达式

一、基本规则 1.字面量表示法&#xff1a;正则表达式可以使用字面量形式创建&#xff0c;例如 /pattern/&#xff0c;其中 pattern 是要匹配的模式。 //直接匹配xxx字符 var reg /abc/ 2.构造函数表示法&#xff1a;你也可以使用 RegExp 构造函数来创建一个正则表达式&…

php链接oracle乱码,尝试把一个php的项目转成java,

​ 最近有个新需求&#xff0c;OA上的考勤信息确认&#xff0c;开始的时候搞了个php的版本&#xff0c;莫名其妙的数据库会乱码&#xff08;oracle&#xff09;(等有时间再写一篇php链接oracle数据库&#xff09;折腾了将近一个周&#xff0c;乱码莫名其妙的出现&#xff0c;代…

MyBatis环境的搭建

1.创建 Maven 工程 打开idea新建一个项目File → Project Structure → Project&#xff0c;build system中选择maven &#xff08;1&#xff09;由于 IDEA 中集成了 Maven&#xff0c;所以我们就不需要下载了&#xff0c;直接使用 IDEA 默认的 Maven 进行项目构建。 &#…

【NSX-T】10. 搭建NSX-T环境 —— 使用 BGP 配置 Tier-0 网关

目录 10.1 创建上行链路网段10.2 创建 Tier-0 网关&#xff08;1&#xff09;设置 Interface 信息&#xff08;2&#xff09;设置 BGP添加 BGP 邻居 &#xff08;3&#xff09;设置 BGP 路由重分发设置路由重新分发 10.3 连接 Tier-0 和 Tier-1 网关10.4 使用网络拓扑验证 Tier…

VLAN间的通讯---三层交换

一.三层交换 1.概念 使用三层交换技术实现VLAN间通信 三层交换二层交换 三层转发 2.基于CEF的MLS CEF是一种基于拓补转发的模型 转发信息库&#xff08;FIB&#xff09;临接关系表 转发信息库&#xff08;FIB&#xff09;可以理解为路由表 邻接关系表可以理解为MAC地址表…

Facebook广告系统结构

Facebook广告系统是一个复杂的大型系统&#xff0c;由多个组件和子系统相互配合工作&#xff0c;实现了广告的投放、拍卖、个性化推荐和效果评估等功能。下面小编讲讲Facebook广告系统的结构。 1、广告管理界面 广告管理界面是广告主与Facebook进行交互的入口&#xff0c;广告…

猿人学19题(原比赛平台)

这道题给我搞得有点懵了&#xff0c;我现在还没发现他到底要考察什么&#xff0c;这边我直接协商我的sessionid请求是直接就成功的。&#x1f602; 依旧是分析请求方式&#xff0c;抓包到返回数据的位置 现在可以知道这些数据是ajax返回的&#xff0c;请求的参数是page&#x…

企业AI助理:数字助理嵌入更多应用场景

随着科技的快速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经成为现代企业不可或缺的一部分。数字助理作为AI的一种形式&#xff0c;正在越来越多地嵌入到企业的各个应用场景中&#xff0c;为企业提供更加智能化、高效化的服务。本文将探讨企业AI助理的发展趋势、应…

Spark RDD、DataFrame、DataSet比较

在Spark的学习当中&#xff0c;RDD、DataFrame、DataSet可以说都是需要着重理解的专业名词概念。尤其是在涉及到数据结构的部分&#xff0c;理解清楚这三者的共性与区别&#xff0c;非常有必要。 RDD&#xff0c;作为Spark的核心数据抽象&#xff0c;是Spark当中不可或缺的存在…

MacOS下C,C++编译器路径与源码位置(附 bits/stdc++.h)

categories: [C_C] tags: C 写在前面 在下面的位置中写入(先mkdir bits) stdc.h文件内容: 参考 gcc 源码 gcc-mirror/gcc/blob/master/libstdc%2B%2B-v3/include/precompiled/stdc%2B%2B.h; // C includes used for precompiling -*- C -*-// Copyright (C) 2003-2023 Free …

Linux(操作系统)面经——part2

1、请你说说进程和线程的区别 1.进程是操作系统资源分配和调度的最小单位&#xff0c;实现操作系统内部的并发&#xff1b;线程是进程的子任务&#xff0c;cpu可以识别、执行的最小单位&#xff0c;实现程序内部的并发。 2.一个进程最少有一个线程或有多个&#xff0c;一个线程…

C语言写的 mini版的 http 服务器 , 很详细

文章目录 效果展示整体架构流程技术细节完整代码 效果展示 例如&#xff1a;htpp://192.168.23.140/home.html -> 正确的请求格式 home.html 这个资源是放在我们服务器里面的 , 并不是随便访问的资源,当然我们可以放很多的资源进去. 整体架构流程 整个实现的流…

无心剑英译朱自清《匆匆》

匆匆 Vanished in Haste 朱自清 By Zhu Ziqing 燕子去了,有再来的时候;杨柳枯了,有再青的时候;桃花谢了,有再开的时候。但是,聪明的,你告诉我,我们的日子为什么一去不复返呢?——是有人偷了他们罢:那是谁?又藏在何处呢?是他们自己逃走了罢:现在又到了哪里呢? Sw…