HarmonyOS ArkTS List组件和Grid组件的使用(五)

简介

ArkUI提供了List组件和Grid组件,开发者使用List和Grid组件能够很轻松的完成一些列表页面。常见的列表有线性列表(List列表)和网格布局(Grid列表):

在这里插入图片描述

List组件的使用

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

在这里插入图片描述

使用ForEeach渲染列表
列表往往由多个列表项组成,所以我们需要在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属性包含四个参数:
在这里插入图片描述

List列表滚动事件监听

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

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

使用示例代码如下:

List({ space: 10 }) {ForEach(this.arr, (item) => {ListItem() {Text(`${item}`)...}}, item => item)
}
.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,我们通过下面的这段示例代码来介绍Grid组件的使用。

@Entry
@Component
struct GridExample {// 定义一个长度为16的数组private arr: string[] = new Array(16).fill('').map((_, index) => `item ${index}`);build() {Column() {Grid() {ForEach(this.arr, (item: string) => {GridItem() {Text(item).fontSize(16).fontColor(Color.White).backgroundColor(0x007DFF).width('100%').height('100%').textAlign(TextAlign.Center)}}, item => item)}.columnsTemplate('1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr 1fr').columnsGap(10).rowsGap(10).height(300)}.width('100%').padding(12).backgroundColor(0xF1F3F5)}
}

示例代码中创建了16个GridItem列表项。同时设置columnsTemplate的值为’1fr 1fr 1fr 1fr’,表示这个网格为4列,将Grid允许的宽分为4等分,每列占1份;rowsTemplate的值为’1fr 1fr 1fr 1fr’,表示这个网格为4行,将Grid允许的高分为4等分,每行占1份。这样就构成了一个4行4列的网格列表,然后使用columnsGap设置列间距为10vp,使用rowsGap设置行间距也为10vp。示例代码效果图如下:

在这里插入图片描述
上面构建的网格布局使用了固定的行数和列数,所以构建出的网格是不可滚动的。然而有时候因为内容较多,我们通过滚动的方式来显示更多的内容,就需要一个可以滚动的网格布局。我们只需要设置rowsTemplate和columnsTemplate中的一个即可。

将示例代码中GridItem的高度设置为固定值,例如100;仅设置columnsTemplate属性,不设置rowsTemplate属性,就可以实现Grid列表的滚动:

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

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

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

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

相关文章

【giszz笔记】产品设计标准流程【8】

(续上回) 真的没想到写了8个章节,想参考之前文章的,我把链接给到这里。 【giszz笔记】产品设计标准流程【7】-CSDN博客 【giszz笔记】产品设计标准流程【6】-CSDN博客 【giszz笔记】产品设计标准流程【5】-CSDN博客 【giszz笔…

ES7-ES13有何新特性?

目录 ES7 ES8 ES9 ES10 ES11 ES12 ES13 hello,大家好呀!之前发布的两篇关于ES6新特性的文章学习完了吗?今天来给大家介绍ES6之后,截止到2022年的ES13每个时期新增的一些新特性!快来一起学习吧! ES7 …

基于单片机公交安全预警系统仿真设计

**单片机设计介绍, 基于单片机公交安全预警系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的公交安全预警系统可以被设计成能够实时监测公交车辆的行驶状态,并在发生异常情况时进行…

图Graph的存储、图的广度优先搜索和深度优先搜索(待更新)

目录 一、图的两种存储方式 1.邻接矩阵 2.邻接表 生活中处处有图Graph的影子,例如交通图,地图,电路图等,形象的表示点与点之间的联系。 首先简单介绍一下图的概念和类型: 图的的定义:图是由一组顶点和一…

Qt 基于海康相机的视频绘图

需求 在视频窗口上进行绘图,包括圆,矩形,扇形等 效果: 思路: 自己取图然后转成QImage ,再向QWidget 进行渲染,根据以往的经验,无法达到很高的帧率。因此决定使用相机SDK自带的渲染…

机器视觉系统选型-环形光源分类及应用场景

环形光源主要分为? 1.环形光源(高角度) 照射光线与水平方向成高角度夹角 外观缺陷检测字符识别PCB基板检测二维码读取- 2.环形光源(低角度) 照射光线与水平方向成低角度夹角各种边缘提取字符识别玻璃断面的损伤检测金属表面刻印、损伤 3.环形光源(高亮) 高亮度远…

谈谈你对mvc和mvvm的理解

MVC和MVVM是软件开发中两种常见的架构模式,各自有不同的优缺点。 MVC(Model-View-Controller)是一种经典的架构模式,将应用程序分为三个部分:模型(Model)、视图(View)和…

从暗黑3D火炬之光技能系统说到-Laya非入门教学一~资源管理

我不知道那些喷Laya没有浏览器,嘲笑别人编辑器做不好,是什么水平? 首先目前国内除了WPS和飞书,就没有第三家公司能把编辑器做好。 要是一般的游戏开发者,如我,有一点点引擎代码(某项目&#x…

opencv-图像对比度增强

对比度增强,即将图片的灰度范围拉宽,如图片灰度分布范围在[50,150]之间,将其范围拉升到[0,256]之间。这里介绍下 线性变换,直方图正规化,伽马变换,全局直方图均衡化,限制对比度自适应直方图均衡…

django+drf+vue 简单系统搭建 (4) 用户权限

权限控制是web中的重要组成部分。与以往的博客系统不同,本次工具页面仅支持注册用户。 每个注册用户都能访问到工具页面,并且提交自己的task来选择具体的工具来处理自己提交的文件。每个注册用户都只能访问到自己提交的task,而管理员则可以查…

SAP 调取http的x-www-form-urlencoded形式的接口

一、了解下x-www-form-urlencoded形式对于SAP来说有啥区别 简单来说, 1.raw格式就是标准的json格式:{“Name”:“John Smith”,“Age”: 23} 2.x-www格式是要转化一下的:NameJohnSmith&Age23 字段与字段相互连接要用 & 符…

pycharm 控制台中文乱码处理

今天使用pycharm,发现控制台输出又中文乱码了,看网上很多资料说把编码改为UTF-8,设置为并未生效,特此在此记录下本地设置。 1. 修改文件编码:Setting -> Editor ->File Encodings,修改配置如下: 2. …

车载数据中心方案

下面这张图是小鹏汽车嵌入式系统高级专家 唐黾 在同ARM一起的一个演讲稿中发布的,是一张未来车载数据中心单芯片方案构想图。主要针对的是智驾域和座舱域融合方案,下面对如上图的内外部组件及接口一一描述。 DMS: Driver Monitoring System,监…

02-微服务的拆分规则和基于RestTemplate的远程调用

微服务的拆分与远程调用 创建父工程 任何分布式架构都离不开服务的拆分, 微服务也是一样 , 微服务的拆分遵守三个原则 微服务需要根据业务模块拆分,不同微服务不要重复开发相同业务每个微服务都有自己独立的数据库, 不要直接访问其他微服务的数据库微服务可以将自己的业务暴…

【网络安全】-网络安全的分类详解

文章目录 介绍1. 网络层安全(Network Layer Security)理论实操使用VPN保护隐私 2. 应用层安全(Application Layer Security)理论实操使用密码管理器 3. 端点安全(Endpoint Security)理论实操定期更新防病毒…

武汉凯迪正大—盐雾试验机

产品概述 武汉凯迪正大KDYD-YW盐雾试验箱乃针对各种材质表面处理,包含涂料、电镀、有机及无机皮膜,阳极处理,防锈油等防腐处理后测试其耐腐蚀性,从而确立产品的质量。 产品特点 1、结构紧凑,体积小、携带方便&#…

艺术作品3D虚拟云展厅能让客户远程身临其境地欣赏美

艺术品由于货物昂贵、易碎且保存难度大,因此在艺术品售卖中极易受时空限制,艺术品三维云展平台在线制作是基于web端将艺术品的图文、模型及视频等资料进行上传搭配,构建一个线上艺术品3D虚拟展厅,为艺术家和观众提供了全新的展示和…

Chrome和chromedriver版本不匹配导致的UI自动化测试无法运行的问题

今天,遇到一个小问题,本来跑的好好UI自动化测试脚本突然不好使了,期初怀疑是页面元素有调整导致脚本出现异常无法正常执行,经排查后发现近期页面没有任何调整。 这下头大了,啥也没改,怎么好好的脚本不能跑…

Vue3鼠标拖拽生成区域块并选中元素

Vue3鼠标拖拽生成区域块并选中元素&#xff0c;选中的元素则背景高亮(或者其它逻辑)。 <script setup> import { ref } from vue// 区域ref const regionRef ref(null)// 内容ref const itemRefs ref(null)// 是否开启绘画区域 const enable ref(false)// 鼠标开始位置…

LVS+keepalived——高可用集群

lvskeepalived&#xff1a;高可用集群 keepalived为lvs应运而生的高可用服务。lvs的调度器无法做高可用&#xff0c;于是keepalived这个软件。实现的是调度器的高可用。但是&#xff1a;keepalived不是专门为lvs集群服务的&#xff0c;也可以做其他代理服务器的高可用。 lvs的…