鸿蒙开发系列教程(二十三)--List 列表操作(2)

列表样式

1、设置内容间距

在列表项之间添加间距,可以使用space参数,主轴方向

List({ space: 10 }) {

}

2、添加分隔线

分隔线用来将界面元素隔开,使单个元素更加容易识别。

startMargin和endMargin属性分别用于设置分隔线距离列表侧边起始端的距离和距离列表侧边结束端的距离

List() {

}
.divider({
strokeWidth: 1,
startMargin: 60,
endMargin: 10,
color: ‘#ffe9f0f0’
})

3、添加滚动条

List() {

}
.scrollBar(BarState.Auto)

分组列表

在List组件中使用ListItemGroup对项目进行分组,可以构建二维列表

1、简单应用

@Component
struct ContactsList {

@Builder itemHead(text: string) {
// 列表分组的头部组件,对应联系人分组A、B等位置的组件
Text(text)
.fontSize(20)
.backgroundColor(‘#fff1f3f5’)
.width(‘100%’)
.padding(5)
}

build() {
List() {
ListItemGroup({ header: this.itemHead(‘A’) }) {
// 循环渲染分组A的ListItem

}

ListItemGroup({ header: this.itemHead(‘B’) }) {
// 循环渲染分组B的ListItem

}

}

}
}

2、循环应用

class Contact {name: string;icon: Resource;constructor(name: string, icon: Resource) {this.name = name;this.icon = icon;}
}@Entry
@Component
struct Test03 {private contactsGroups: object[] = [{title: '景区一',contacts: [new Contact('aa', $r('app.media.m0')),new Contact('bb', $r('app.media.m1')),new Contact('cc', $r('app.media.m2')),],},{title: '景区2',contacts: [new Contact('dd', $r('app.media.m3')),new Contact('ee', $r('app.media.m4')),],},]@Builder itemHead(text: string) {Text(text).fontSize(20).backgroundColor('#fff1f3f5').width('100%').padding(5)}build() {Column() {List() {ForEach(this.contactsGroups, (item) => {ListItemGroup({ header: this.itemHead(item.title) }) {ForEach(item.contacts, contact => {ListItem() {Row() {Image(contact.icon).width(100).height(100).margin(10)Text(contact.name).fontSize(20)}.width('100%').justifyContent(FlexAlign.Start)}}, contact => contact.name)}},item => item.title)}}.height('100%').width('100%')}
}

3、粘性标题

List() {

。。

.sticky(StickyStyle.Header) // 设置吸顶,实现粘性标题效果

列表滚动

1、滚动事件监听

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

2、控制滚动位置

当列表项数量庞大,用户滚动列表到一定位置时,希望快速滚动到列表底部或返回列表顶部。此时,可以通过控制滚动位置来实现列表的快速定位

private listScroller: Scroller = new Scroller();

Stack({ alignContent: Alignment.BottomEnd }) {
// 将listScroller用于初始化List组件的scroller参数,完成listScroller与列表的绑定。
List({ space: 20, scroller: this.listScroller }) {

}

Button() {

}
.onClick(() => {
// 点击按钮时,指定跳转位置,返回列表顶部
this.listScroller.scrollToIndex(0)
})

}

3、响应滚动位置

许多应用需要监听列表的滚动位置变化并作出响应。例如,在联系人列表滚动时,如果跨越了不同字母开头的分组,则侧边字母索引栏也需要更新到对应的字母位置。


const alphabets = [‘#’, ‘A’, ‘B’, ‘C’, ‘D’, ‘E’, ‘F’, ‘G’, ‘H’, ‘I’, ‘J’, ‘K’,
‘L’, ‘M’, ‘N’, ‘O’, ‘P’, ‘Q’, ‘R’, ‘S’, ‘T’, ‘U’, ‘V’, ‘W’, ‘X’, ‘Y’, ‘Z’];

@Entry
@Component
struct ContactsList {
@State selectedIndex: number = 0;
private listScroller: Scroller = new Scroller();

build() {
Stack({ alignContent: Alignment.End }) {
List({ scroller: this.listScroller }) {

}
.onScrollIndex((firstIndex: number) => {
this.selectedIndex = firstIndex
// 根据列表滚动到的索引值,重新计算对应联系人索引栏的位置this.selectedIndex

})

  // 字母表索引组件AlphabetIndexer({ arrayValue: alphabets, selected: 0 }).selected(this.selectedIndex)...
}

}
}

列表项侧滑

即用户可以通过向左侧滑列表的某一项,再点击删除按钮删除消息

ListItem的swipeAction属性可用于实现列表项的左右滑动功能

@Entry
@Component
struct MessageList {
@State messages: object[] = [
// 初始化消息列表数据

];

@Builder itemEnd(index: number) {
// 侧滑后尾端出现的组件
Button({ type: ButtonType.Circle }) {
Image($r(‘app.media.ic_public_delete_filled’))
.width(20)
.height(20)
}
.onClick(() => {
this.messages.splice(index, 1);
})

}

build() {

List() {
ForEach(this.messages, (item, index) => {
ListItem() {

}
.swipeAction({ end: this.itemEnd.bind(this, index) }) // 设置侧滑属性
}, item => item.id.toString())
}

}
}

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

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

相关文章

2024HVV | 12款开源渗透测试工具(非常详细)零基础入门到精通,收藏这一篇就够了

回顾过去,黑客入侵异常困难,需要大量手动操作。然而,如今,一套自动化测试工具让渗透测试人员变身“半机械人”,能够比以往任何时候都更轻松地完成更多测试。以下12款开源渗透测试工具,可以帮助渗透测试人员…

微信小程序: 获取accessToken,手机号, 小程序二维码,openId与unionId 公共配置类(核心篇)

全文目录,一步到位 1.前言简介1.1 专栏传送门 2. 微信小程序公用功能2.1 配置准备工作2.1.1 配置文件准备(单体放yml中 微服务放配置中心)2.1.2 获取配置文件中的小程序配置2.1.3 设置redis配置 2.2 创建不同功能工具类2.2.1 创建微信服务工具类WechatServiceUtils2.2.2 创建Re…

Java 基于 SpringBoot+Vue 的酒店管理系统,附源码

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

每日五道java面试题之java基础篇(十)

目录: 第一题 JVM有哪些垃圾回收器?第二题 垃圾回收分为哪些阶段?第三题 线程的⽣命周期?线程有⼏种状态?第四题.ThreadLocal的底层原理第五题.并发、并⾏、串⾏之间的区别 第一题 JVM有哪些垃圾回收器? ● 新⽣代收集…

YOLOv8制作自定义数据集并训练

YOLOv8制作自定义数据集并训练 前言一、制作自定义数据集1、建立相应文件夹2、下载图片3、为图片打标签(1)安装labelimg(2)打开labelimg(3)标记图片 二、按比例移动自定义数据集中的内容三、建立数据集测试…

2024年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题

题库来源:安全生产模拟考试一点通公众号小程序 2024年危险化学品经营单位主要负责人证模拟考试题库及危险化学品经营单位主要负责人理论考试试题是由安全生产模拟考试一点通提供,危险化学品经营单位主要负责人证模拟考试题库是根据危险化学品经营单位主…

机器学习入门--LSTM原理与实践

LSTM模型 长短期记忆网络(Long Short-Term Memory,LSTM)是一种常用的循环神经网络(RNN)变体,特别擅长处理长序列数据和捕捉长期依赖关系。本文将介绍LSTM模型的数学原理、代码实现和实验结果,并…

OpenCV库及在ROS中使用

OpenCV库及在ROS中使用 依赖 cv_bridge image_transport roscpp rospy sensor_msgs std_msgsCMakeLists.txt添加 find_package(OpenCV REQUIRED) include_directories(${OpenCV_INCLUDE_DIRS}) target_link_libraries(pub_img_topic ${catkin_LIBRARIES} ${Opencv_LIBS}) C …

基于springboot大学生租房系统源码和论文

伴随着全球信息化发展,行行业业都与计算机技术相衔接,计算机技术普遍运用于各大行业,大学生租房系统便是其中一种。实施计算机系统来管理可以降低大学生租房管理的成本,使整个大学生租房的发展和服务水平有显著提升。 本论文主要面…

Github Copilot是什么?Ai高效编程!一键远程授权…

GitHub Copilot是一款Ai编程插件,由OpenAi和Github联合推出,目前支持主流的IDE编辑器安装使用,包括JetBrains IDEs、VSCode、Visual Studio、Neovim等。 官方地址:https://github.com/features/copilot 官方文档:http…

VBA即用型代码手册之取消隐藏工作表及删除工作表

我给VBA下的定义:VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率,而且可以提高数据的准确性。我这里专注VBA,将我多年的经验汇集在VBA系列九套教程中。 作为我的学员要利用我的积木编程思想,积木编程最重要的是积木如何搭建…

【maya 入门笔记】基本视图和拓扑

1. 界面布局 先看基本窗口布局,基本窗口情况如下: 就基本窗口布局的情况来看,某种意义上跟blender更像一点(与3ds max相比)。 那么有朋友就说了,玛格基,那blender最下面的时间轴哪里去了&…

使用PaddleNLP UIE模型提取上市公司PDF公告关键信息

项目地址:使用PaddleNLP UIE模型抽取PDF版上市公司公告 - 飞桨AI Studio星河社区 (baidu.com) 背景介绍 本项目将演示如何通过PDFPlumber库和PaddleNLP UIE模型,抽取公告中的相关信息。本次任务的PDF内容是破产清算的相关公告,目标是获取受理…

pubg开启之路

概要: pubg中文名绝地求生,一款免费游戏,本篇主要讲述如何在电脑上开始pubg 要想下载并开始玩pubg有两个方法(具体就是两个软件),一个是epic games,另一个是steam 一、加速器是必要的吗? 1、不使用加速…

Pandas数据库大揭秘:read_sql、to_sql 参数详解与实战篇【第81篇—Pandas数据库】

Pandas数据库大揭秘:read_sql、to_sql 参数详解与实战篇 Pandas是Python中一流的数据处理库,而数据库则是数据存储和管理的核心。将两者结合使用,可以方便地实现数据的导入、导出和分析。本文将深入探讨Pandas中用于与数据库交互的两个关键方…

代码随想录 Leetcode135. 分发糖果

题目&#xff1a; 代码(首刷看解析 2024年2月15日&#xff09;&#xff1a; class Solution { public:int candy(vector<int>& ratings) {vector<int> left(ratings.size(), 1);vector<int> right(ratings.size(), 1);for (int i 1; i < ratings.si…

半导体物理基础-笔记

源内容参考&#xff1a;https://www.bilibili.com/video/BV11U4y1k7zn/?spm_id_from333.337.search-card.all.click&vd_source61654d4a6e8d7941436149dd99026962 半导体物理要解决的四个问题 载流子在哪里&#xff1b;如何获得足够多的载流子&#xff1b;载流子如何运动…

html从零开始8:css3新特性、动画、媒体查询、雪碧图、字体图标【搬代码】

css3新特性 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, …

linux kernel 内存踩踏之KASAN_SW_TAGS(二)

一、背景 linux kernel 内存踩踏之KASAN&#xff08;一&#xff09;_kasan版本跟hasan版本区别-CSDN博客 上一篇简单介绍了标准版本的KASAN使用方法和实现&#xff0c;这里将介绍KASAN_SW_TAGS和KASAN_HW_TAGS 的使用和背后基本原理&#xff0c;下图是三种方式的对比&#x…

萨科微半导体宋仕强介绍说

萨科微半导体宋仕强介绍说&#xff0c;电源管理芯片是指在电子设备系统中&#xff0c;负责对电能的变换、分配、检测等进行管理的芯片&#xff0c;其性能和可靠性直接影响电子设备的工作效率和使用寿命&#xff0c;是电子设备中的关键器件。萨科微slkor&#xff08;www.slkormi…