鸿蒙开发系列教程(二十三)--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())
}

}
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【测试运维】性能测试经验文档总结第3篇:VuGen详解(已分享,附代码)

本系列文章md笔记(已分享)主要讨论性能测试相关知识。入门阶段:认识性能测试分类-(负载测试、压力测试、并发测试、稳定性测试),常用性能测试指标-(吞吐量、并发数、响应时间、点击数...),性能测试工具选择。性能脚本&…

Java实现停车场收费系统 JAVA+Vue+SpringBoot+MySQL

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 停车位模块2.2 车辆模块2.3 停车收费模块2.4 IC卡模块2.5 IC卡挂失模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 停车场表3.2.2 车辆表3.2.3 停车收费表3.2.4 IC 卡表3.2.5 IC 卡挂失表 四、系统实现五、核心代码…

Java面向对象案例之招待朋友Friend(二)

类主要结构图 抽象类:Friend(朋友作为父类)子类:Chinese(中国国籍)、Foreigner(外国国籍)主人:Master(主人,用来款待客人)测试类&…

ClickHouse--12-可视化工具操作

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 可视化工具操作1 tabixhttp://ui.tabix.io/ 2 DBeaverhttps://dbeaver.io/download/ 可视化工具操作 1 tabix tabix 支持通过浏览器直接连接 ClickHouse&#xff…

Kubernetes 元信息与控制器模型

一、资源元信息: Kubernetes 的资源对象组成:主要包括了 Spec、Status 和元数据。其中 Spec 部分用来描述期望的状态,Status 部分用来描述观测到的状态。 元数据主要包括了:Labels 用来识别资源的标签;Annotations 用…

在 Android 上部署自定义 YOLOv8 教程

在本教程中,我将向您展示如何在 Android 设备上使用自定义数据集部署 YOLOv8。想要了解如何在 Android 设备上使用您自己的数据集部署 YOLOv8?本文将展示如何操作。 Android 上的 自定义 YOLOv8 🔥 ⚡️ 结果显示标题 对从 GoPro 流式传输到移…

【刷刷刷,爽!】leetcode198. 打家劫舍

题目如上! 这是一道非常非常标准的初级动规题。属于走楼梯的进阶版。所以我们尝试把他变成走楼梯。 怎么变?或者说是怎么看成走楼梯。 答案是!!!! 看最后一个数。 往往会最有灵感。 比如示例1中[1,2,3,4]&a…

免费申请一个美国EDU学生邮箱

EDU邮箱的作用 例如大名鼎鼎的GitHub学生包。包含各种服务器的优惠卷,可以让你免费使用1-2年的服务器。免费的域名。免费的网站证书。太多了。 微软:免费的5T的OneDrive账户。 Google:G Sutie Drive无限容量 微软、苹果、AWS、都有针对学…

Sora和Pika,RunwayMl,Stable Video对比!网友:Sora真王者,其他都是弟

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,所以创建了“AI信息Gap”这个公众号,专注于分享AI全维度知识…

SpringCloud-Nacos集群搭建

本文详细介绍了如何在SpringCloud环境中搭建Nacos集群,为读者提供了一份清晰而详尽的指南。通过逐步演示每个关键步骤,包括安装、配置以及Nginx的负载均衡设置,读者能够轻松理解并操作整个搭建过程。 一、Nacos集群示意图 Nacos&#xff0…

17.3.1.6 自定义处理

版权声明:本文为博主原创文章,转载请在显著位置标明本文出处以及作者网名,未经作者允许不得用于商业目的。 模拟某款图像处理软件的处理,它只留下红色、绿色或者蓝色这样的单一颜色。 首先按照颜色划分了6个色系,分别…

2.16学习总结

1.邮递员送信(dijkstra 不只是从起到到目标点,还要走回去) 2.炸铁路(并查集) 3.统计方形(数据加强版)(排列组合) 4.滑雪(记忆化) 5.小车问题(数学问题&#x…

二叉树前序中序后序遍历(非递归)

大家好,又和大家见面啦!今天我们一起去看一下二叉树的前序中序后序的遍历,相信这个对大家来说是信手拈来,但是,今天我们并不是使用常见的递归方式来解题,我们采用迭代方式解答。我们先看第一道前序遍历 1…

基于Robei EDA实现FIFO(非IP核)及FIFO求和

一、FIFO简介 FIFO( First in First out) 使用在需要产生数据接口的部分,用来存储、缓冲在两个异步 时钟之间的数据传输。在异步电路中,由于时钟之间周期和相位完全独立,因此数据丢失概 率不为零。使用 FIFO 可以在两个…

【ChatIE】论文解读:Zero-Shot Information Extraction via Chatting with ChatGPT

文章目录 介绍ChatIEEntity-Relation Triple Extration (RE)Named Entity Recognition (NER)Event Extraction (EE) 实验结果结论 论文:Zero-Shot Information Extraction via Chatting with ChatGPT 作者:Xiang Wei, Xingyu Cui, Ning Cheng, Xiaobin W…

【电源】POE系统供电原理(二)

转载本博客文章,请注明出处 ​ 上一篇文章中,有提到POE系统工作原理及动态检测机制,下面我们继续介绍受电端PD技术及原理。POE供电系统包含PSE、PD及互联接口部分组成,如下图所示。 图1 POE供电系统 PSE控制器的主要作用&#xff…

无人机基本知识,无人机遥控器功能详解与调试方法

无人机作为一种新兴的飞行器,近年来在各个领域得到了广泛的应用。而无人机遥控器则是控制无人机飞行的重要工具。 无人机遥控器是一种无线设备,通过它来远程控制无人机的飞行。遥控器通常包括一个或多个摇杆,用于控制无人机的各种动作&#x…

FL Studio 21中文破解激活版2024免费下载安装图文教程

FL Studio 21.2.1.3859中文破解激活版是我见过更新迭代最快的宿主软件,没有之一。FL Studio12、FL Studio20、FL Studio21等等。有时甚至我刚刚下载好了最新版本,熟悉了新版本一些好用的操作,Fl Studio就又推出了更新的版本,而且F…

【STM32 CubeMX】串口编程DMA+IDLE中断

文章目录 前言一、为什么要引入IDLE中断二、IDLE中断使用方式2.1 接收的三种情况2.2 函数的使用查询方式中断方式DMA方式分析一个问题 总结 前言 在嵌入式系统中,串口通信是一项关键的任务,而使用DMA(直接内存访问)结合IDLE中断进…

基于springboot特产销售平台源码和论文

“互联网”的战略实施后,很多行业的信息化水平都有了很大的提升。但是目前很多藏区特产销售信息仍是通过人工管理的方式进行,需要在各个岗位投入大量的人力进行很多重复性工作,使得对人力物力造成诸多浪费,工作效率不高等情况&…