HarmonyOS网格布局:List组件和Grid组件的使用

简介

在我们常用的手机应用中,经常会见到一些数据列表,如设置页面、通讯录、商品列表等。下图中两个页面都包含列表,“首页”页面中包含两个网格布局,“商城”页面中包含一个商品列表。

上图中的列表中都包含一系列相同宽度的列表项,连续、多行呈现同类数据,例如图片和文本。常见的列表有线性列表(List列表)和网格布局(Grid列表):

为了帮助开发者构建包含列表的应用,ArkUI提供了List组件和Grid组件,开发者使用List和Grid组件能够很轻松的完成一些列表页面。

List组件的使用

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属性包含四个参数:

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

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来监听列表的滚动。

列表性能优化

开发者在使用长列表时,如果直接采用循环渲染方式,会一次性加载所有的列表元素,从而导致页面启动时间过长,影响用户体验,推荐通过以下方式来进行列表性能优化:

使用数据懒加载

设置list组件的宽高

参考链接

  1. List组件的相关API参考:List组件。

  2. Grid组件的相关API参考:Grid组件。

  3. Grid组件的相关API参考:Grid组件。

  4. 循环渲染(ForEach):循环渲染。

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

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

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

相关文章

easyexcel与vue配合下载excel

后端 设置响应 // 设置响应头 response.setContentType("application/octet-stream;charsetUTF-8"); String returnName null; try {returnName URLEncoder.encode(fileName, "UTF-8"); } catch (UnsupportedEncodingException e) {throw new RuntimeExc…

java类的定义方式和实例化、this引用、对象的构造及其初始化、封装特性、static修饰成员变量、static修饰成员方法

java类的定义方式和实例化 类的定义和使用 类是用来对一个实体(对象)来进行描述的,主要描述该实体(对象)具有哪些属性(外观尺寸等),哪些功能(用来干啥),描述完成后计算机就可以识别了。 在Java中定义类需要用到class关键字具体如下 // 创…

API网关-Apisix路由配置教程(数据编辑器方式)

文章目录 前言一、端口修改1. apisix 端口修改2. dashboard 端口修改3. 登录密码修改 二、常用插件介绍1. 常用转换插件1.1 proxy-rewrite插件1.1.1 属性字段1.1.2 配置示例 2. 常用认证插件2.1 key-auth插件2.1.1 消费者端字段2.1.2 路由端字段2.1.3 配置示例 2.2 basic-auth插…

Oracle 19cADG集群补丁升级

Oracle 19cADG集群补丁升级 文章目录 Oracle 19cADG集群补丁升级1.备库备份2.备库升级Opatch3.备库应用补丁4.主库备份 oracle_home目录5.主库升级Opatch6.注册补丁7.编译无效对象8.检查主库的补丁注册情况9.备库切换主库完成补丁注册 1.备库备份 su - oracle cd $ORACLE_HOME…

机器学习 - 神经网络中的训练模型

接着上一篇机器学习-创建一个PyTorch classification model做进一步陈述。 训练模型的步骤: Forward pass: The model goes through all of the training data once, performing its forward() function calculations (model(x_train))Calculate the loss: 使用 l…

format(C++20)

1. std::format format_01.cpp // g format_01.cpp -stdc20 #include <iostream> #include <string> #include <format>void test_01() {// 使用字符串填充std::cout << std::format("Hello {}!\n", "World"); // Hello World!…

Open CASCADE学习|适配器

OpenCascade适配器在OpenCASCADE软件框架中起着至关重要的作用。它提供了一种方便的方式&#xff0c;用于在OpenCASCADE模型和其他软件之间进行数据交换和转换&#xff0c;从而使得OpenCASCADE更加灵活和实用。具体来说&#xff0c;适配器类在OpenCASCADE中实现了适配器模式&am…

[webpack-cli] Invalid options object 报错

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema devServer: {contentBase: ./src, // 告诉服务器从哪里提供内容&#xff0c;默认情况下&#xff0c;它会使用当前工作目录作为根目录c…

深度学习pytorch——减少过拟合的几种方法(持续更新)

1、增加数据集 2、正则化(Regularization) 正则化&#xff1a;得到一个更加简单的模型的方法。 以一个多项式为例&#xff1a; 随着最高次的增加&#xff0c;会得到一个更加复杂模型&#xff0c;模型越复杂就会更好的拟合输入数据的模型&#xff08;图-1&#xff09;&#…

Oracle中实现根据条件对数据的增删改操作——Merge Into

一、需求描述 在我们进行项目开发的过程中&#xff0c;会遇到这样的场景&#xff0c;需要根据某个条件对数据进行增、删、改的操作&#xff1b;遇到这种情况我们有2种方法进行解决&#xff1a; 方法一&#xff1a;①查询指定条件&#xff1b;②根据查询出的指定条件结果在执行…

阿里云国际DDoS高防的定制场景策略

DDoS高防的定制场景策略允许您在特定的业务突增时段&#xff08;例如新业务上线、双11大促销等&#xff09;选择应用独立于通用防护策略的定制防护策略模板&#xff0c;保证适应业务需求的防护效果。您可以根据需要设置定制场景策略。 背景信息 定制场景策略提供基于业务场景…

【图论 | 数据结构】用链式前向星存图(保姆级教程,详细图解+完整代码)

一、概述 链式前向星是一种用于存储图的数据结构,特别适合于存储稀疏图,它可以有效地存储图的边和节点信息,以及边的权重。 它的主要思想是将每个节点的所有出边存储在一起,通过数组的方式连接(类似静态数组实现链表)。这种方法的优点是存储空间小,查询速度快,尤其适…

金融投贷通--功能测试分析与设计

金融投贷通功能测试分析与设计 测试点分析借款业务测试点投资业务测试点 测试用例借款业务测试用例投资业务测试用例 缺陷面试题 测试报告 测试点分析 借款业务测试点 投资业务测试点 测试用例 借款业务测试用例 借款成功&#xff08;主业务&#xff09;、借款成功&#xff…

FFMPEG AVFrame AVPacket内存管理相关API说明

AVFrame和AVPacket是ffmpeg中保存音视频数据的结构体&#xff0c;AVFrame保存未压缩的原始音视频数据&#xff0c;AVPacket保存编码后的音视频数据&#xff0c;AVFrame和AVPacket都是使用引用计数进行的内存管理。 一、AVFrame 内存分配&#xff1a; 视频&#xff1a; AVFra…

iOS——【CGD】

GCD 什么是GCD GCD指的是Grand Central Dispatch&#xff0c;它是苹果公司开发的一套多线程编程技术。GCD提供了一种简单而有效的方式来管理应用程序中的并发任务。它通过将任务提交到适当的队列&#xff08;串行队列或并发队列&#xff09;来管理并发执行的任务&#xff0c;…

WebAR开发简介

WebAR 开发使企业能够以独特且高度有趣的方式向客户和员工提供信息。 它提供增强现实 (AR) 内容&#xff0c;人们在智能手机上将其视为视觉叠加。 然而&#xff0c;WebAR 可在手机的普通网络浏览器上运行&#xff0c;无需下载任何应用程序。 WebAR 的多种用途包括帮助零售和在…

跟张良均老师学大数据人工智能——数据挖掘集训营开营

集训营特色&#xff1a; 知识点深入浅出&#xff0c;实现以学促用 以业务内容为主线&#xff0c;数据挖掘技能嵌入 多行业项目实战&#xff0c;全面提升职业素养 全程线上辅导&#xff0c;助力熟练掌握技能 惊喜优惠&#xff1a; 限时“六折”&#xff01; 师傅带练 方向…

docker centos7离线安装ElasticSearch单机版

目录 1.下载ES并解压2.新建elasticsearch用户3.修改ES配置文件4.启动ES服务5.设置开机启动 本文以 elasticsearch-7.8.1为例。 1.下载ES并解压 cd /root/install wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.8.1-linux-x86_64.tar.gz tar -z…

Qt|读写数据库管理图片资源工具

文章目录 创建项目设置UI布局控制数据库类实现界面实现类主函数 功能&#xff1a;用来管理数据库中图像资源 开发环境&#xff1a;windows10VS2017Qt5.14.2开发 创建项目 首先创建Qt Widgets Application next->next->finish就创建好了 设置UI布局 打开已经创建好的U…

笔记本如何调节亮度?笔记本亮度调节方法

对于经常长时间面对笔记本电脑的小伙伴们来说&#xff0c;屏幕亮度过暗或者过亮&#xff0c;都会对眼睛造成伤害。那么&#xff0c;我们如何调节笔记本亮度至适中呢?下面为大家介绍3种简单的调节屏幕亮度的方法&#xff0c;一起来看看吧! 笔记本亮度调节方法一&#xff1a; 1、…