鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：ListItem）

用来展示列表具体item，必须配合List来使用。

说明：

  • 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  • 该组件的父组件只能是List或者ListItemGroup。

子组件

可以包含单个子组件。

接口

从API version 9开始，该接口支持在ArkTS卡片中使用。

ListItem10+

ListItem(value?: ListItemOptions)

参数：

参数名参数类型必填参数描述
valueListItemOptions否为ListItem提供可选参数, 该对象内含有ListItemStyle枚举类型的style参数。

ListItem(deprecated)

ListItem(value?: string)

从API version 10开始, 该接口不再维护，推荐使用ListItem10+。

参数：

参数名参数类型必填参数描述
valuestring否无

属性

除支持通用属性外，还支持以下属性：

名称参数类型描述
sticky(deprecated)Sticky设置ListItem吸顶效果。
默认值：Sticky.None
从API version9开始废弃不再使用，推荐使用List组件sticky属性。
editable(deprecated)boolean | EditMode当前ListItem元素是否可编辑，进入编辑模式后可删除或移动列表项。
从API version9开始废弃不再使用，无替代接口。
默认值：false
selectable8+boolean当前ListItem元素是否可以被鼠标框选。
说明：
外层List容器的鼠标框选开启时，ListItem的框选才生效。
默认值：true
selected10+boolean设置当前ListItem选中状态。该属性支持$$双向绑定变量。
说明：
该属性需要在设置选中态样式前使用才能生效选中态样式。
默认值：false
swipeAction9+{
start?: CustomBuilder | SwipeActionItem,
end?:CustomBuilder | SwipeActionItem,
edgeEffect?: SwipeEdgeEffect,
}		用于设置ListItem的划出组件。
- start: ListItem向右划动时item左边的组件（List垂直布局时）或ListItem向下划动时item上方的组件（List水平布局时）。
- end: ListItem向左划动时item右边的组件（List垂直布局时）或ListItem向上划动时item下方的组件（List水平布局时）。
- edgeEffect: 滑动效果。
说明：
- start和end对应的@builder函数中顶层必须是单个组件，不能是if/else、ForEach、LazyForEach语句。
- 滑动手势只在listItem区域上，如果子组件划出ListItem区域外，在ListItem以外部分不会响应划动手势。所以在多列模式下，建议不要将划出组件设置太宽。

Sticky(deprecated)枚举说明

从API version9开始废弃不再使用，推荐使用List组件stickyStyle枚举。

名称枚举值描述
None0无吸顶效果。
Normal1当前item吸顶。
Opacity2当前item吸顶显示透明度变化效果。

EditMode(deprecated)枚举说明

从API version9开始废弃不再使用，无替代接口。

名称枚举值描述
None0编辑操作不限制。
Deletable1可删除。
Movable2可移动。

SwipeEdgeEffect9+枚举说明

名称枚举值描述
Spring0ListItem划动距离超过划出组件大小后可以继续划动。
如果设置了删除区域，ListItem划动距离超过删除阈值后可以继续划动，
松手后按照弹簧阻尼曲线回弹。
None1ListItem划动距离不能超过划出组件大小。
如果设置了删除区域，ListItem划动距离不能超过删除阈值，
并且在设置删除回调的情况下，达到删除阈值后松手触发删除回调。

SwipeActionItem10+对象说明

List垂直布局，ListItem向右滑动，item左边的长距离滑动删除选项或向左滑动时，item右边的长距离滑动删除选项。 List水平布局，ListItem向上滑动，item下边的长距离滑动删除选项或向下滑动时，item上边的长距离滑动删除选项。

名称参数类型必填描述
actionAreaDistanceLength否设置组件长距离滑动删除距离阈值。
默认值：56vp
说明：
不支持设置百分比。
删除距离阈值大于item宽度减去划出组件宽度，或删除距离阈值小于等于0就不会设置删除区域。
onAction() => void否组件进入长距删除区后删除ListItem时调用，进入长距删除区后抬手时触发。
说明：
滑动后松手的位置超过或等于设置的距离阈值，并且设置的距离阈值有效时才会触发。
onEnterActionArea() => void否在滑动条目进入删除区域时调用，只触发一次，当再次进入时仍触发。
onExitActionArea() => void否当滑动条目退出删除区域时调用，只触发一次，当再次退出时仍触发。
builderCustomBuilder否当列表项向左或向右滑动（当列表方向为“垂直”时），向上或向下滑动（当列方向为“水平”时）时显示的操作项。
onStateChange11+(swipeActionState) => void否当列表项滑动状态变化时候触发。

ListItemOptions10+对象说明

名称参数类型必填描述
styleListItemStyle否设置List组件卡片样式。
默认值: ListItemStyle.NONE
设置为ListItemStyle.NONE时无样式。
设置为ListItemStyle.CARD时，必须配合ListItemGroup的ListItemGroupStyle.CARD同时使用，显示默认卡片样式。
卡片样式下，ListItem默认规格：高度48vp，宽度100%。
卡片样式下, 为卡片内的列表选项提供了默认的focus、hover、press、selected和disable样式。
说明：
当前卡片模式下，不支持listDirection属性设置，使用默认Axis.Vertical排列方向。
当前卡片模式下，List属性alignListItem默认为ListItemAlign.Center，居中对齐显示。
若仅设置ListItemStyle.CARD，未设置ListItemGroupStyle.CARD时，只显示部分卡片样式及功能。

SwipeActionOptions10+对象说明

名称参数类型必填描述
onOffsetChange11+(offset: number) => void否当列表项向左或向右滑动（当列表方向为“垂直”时），向上或向下滑动（当列方向为“水平”时）位置发生变化触发，以vp为单位

ListItemStyle10+枚举说明

名称枚举值描述
NONE0无样式。
CARD1显示默认卡片样式。

SwipeActionState11+枚举说明

名称枚举值描述
COLLAPSED0收起状态，当ListItem向左或向右滑动（当列表方向为“垂直”时），
向上或向下滑动（当列方向为“水平”时）时操作项处于隐藏状态。
EXPANDED1展开状态，当ListItem向左或向右滑动（当列表方向为“垂直”时），
向上或向下滑动（当列方向为“水平”时）时操作项处于显示状态。
说明：
需要ListItem设置向左或向右滑动（当列表方向为“垂直”时），
向上或向下滑动（当列方向为“水平”时）时显示的操作项。
ACTIONING2长距离状态，当ListItem进入长距删除区后删除ListItem的状态。
说明:
滑动后松手的位置超过或等于设置的距离阈值，并且设置的距离阈值有效时才能进入该状态。

事件

名称功能描述
onSelect(event: (isSelected: boolean) => void)8+ListItem元素被鼠标框选的状态改变时触发回调。
isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。

示例

示例1

// xxx.ets
@Entry
@Component
struct ListItemExample {private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]build() {Column() {List({ space: 20, initialIndex: 0 }) {ForEach(this.arr, (item: number) => {ListItem() {Text('' + item).width('100%').height(100).fontSize(16).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)}}, (item: string) => item)}.width('90%').scrollBar(BarState.Off)}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })}
}

zh-cn_image_0000001219864159

示例2

// xxx.ets
@Entry
@Component
struct ListItemExample2 {@State arr: number[] = [0, 1, 2, 3, 4]@State enterEndDeleteAreaString: string = "not enterEndDeleteArea"@State exitEndDeleteAreaString: string = "not exitEndDeleteArea"@Builder itemEnd() {Row() {Button("Delete").margin("4vp")Button("Set").margin("4vp")}.padding("4vp").justifyContent(FlexAlign.SpaceEvenly)}build() {Column() {List({ space: 10 }) {ForEach(this.arr, (item: number) => {ListItem() {Text("item" + item).width('100%').height(100).fontSize(16).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)}.transition({ type: TransitionType.Delete, opacity: 0 }).swipeAction({end: {builder: () => { this.itemEnd() },onAction: () => {animateTo({ duration: 1000 }, () => {let index = this.arr.indexOf(item)this.arr.splice(index, 1)})},actionAreaDistance: 56,onEnterActionArea: () => {this.enterEndDeleteAreaString = "enterEndDeleteArea"this.exitEndDeleteAreaString = "not exitEndDeleteArea"},onExitActionArea: () => {this.enterEndDeleteAreaString = "not enterEndDeleteArea"this.exitEndDeleteAreaString = "exitEndDeleteArea"}}})}, (item: string) => item)}Text(this.enterEndDeleteAreaString).fontSize(20)Text(this.exitEndDeleteAreaString).fontSize(20)}.padding(10).backgroundColor(0xDCDCDC).width('100%').height('100%')}
}

deleteListItem

示例3

// xxx.ets
@Entry
@Component
struct ListItemExample3 {build() {Column() {List({ space: "4vp", initialIndex: 0 }) {ListItemGroup({ style: ListItemGroupStyle.CARD }) {ForEach([ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE], (itemStyle: number, index?: number) => {ListItem({ style: itemStyle }) {Text("" + index).width("100%").textAlign(TextAlign.Center)}})}ForEach([ListItemStyle.CARD, ListItemStyle.CARD, ListItemStyle.NONE], (itemStyle: number, index?: number) => {ListItem({ style: itemStyle }) {Text("" + index).width("100%").textAlign(TextAlign.Center)}})}.width('100%').multiSelectable(true).backgroundColor(0xDCDCDC)}.width('100%').padding({ top: 5 })}
}

ListItemStyle

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

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

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

相关文章

学习Python，需要知道的经典案例

学习Python，需要知道的经典案例

文章目录 一、Python简介二、Python经典案例1. 猜数字游戏2. 文本文件处理3. 网络爬虫4. 数据可视化5. 电子邮件发送6. 实现一个简单的Web服务器。 三、Python处理IP相关知识点1. 处理IP地址2. 网络编程（TCP/IP）3. 使用第三方库处理IP信息 四、相关链接 …
阅读更多...
Mysql与MyBatis

Mysql与MyBatis

1 Sql语句 增删改查 1.1 建表 -- cmd展示数据库 show databases ; -- cmd登录数据库 mysql localhost -u root -p-- auto_increment 自动增长，每添加一个表项id自动增1 -- char定长字符串 0-255，不足十个字符按十个字符算， varchar变长字符串…
阅读更多...
搭建项目后台系统基础架构

搭建项目后台系统基础架构

任务描述 1、了解搭建民航后端框架 2、使用IDEA创建基于SpringBoot、MyBatis、MySQL、Redis的Java项目 3、以原项目为参照搭建项目所涉及到的各个业务和底层服务 4、以原项目为例，具体介绍各个目录情况并参照创建相关文件夹 1、创建项目后端 BigData-KongGuan …
阅读更多...
Transformer的前世今生 day01（预训练、统计语言模型）

Transformer的前世今生 day01（预训练、统计语言模型）

预训练 在相似任务中，由于神经网络模型的浅层是通用的，如下图： 所以当我们的数据集不够大，不能产生性能良好的模型时，可以尝试让模型B在用模型A的浅层基础上，深层的部分自己生成参数，减小数据集…
阅读更多...
tp8 mpdf 导出pdf

tp8 mpdf 导出pdf

1. 安装mpdf composer require mpdf/mpdf 2. 然后 使用 use mpdf\Mpdf; 或者 require_once __DIR__ . /vendor/autoload.php; 官方文档 mPDF – mPDF 手册 文档里有很多东西 可以自己去研究 3. 编写代码 下载 (支持中文) $mpdf new Mpdf([mode > utf-8,"autoS…
阅读更多...
Netty学习——源码篇2 客户端Bootstrap(二)

Netty学习——源码篇2 客户端Bootstrap(二)

接上篇 Bootstrap源码-客户端 1 Handler的添加过程 Netty有一个强大和灵活之处就是基于Pipeline的自定义Handler机制。基于此，可以像添加插件一样自由组合各种各样的Handler来完成业务逻辑。例如，需要处理HTTP数据，那么就可以在Pipeline前添…
阅读更多...
基于java+springboot+vue实现的电影院选票系统（文末源码+Lw+ppt）23-467

基于java+springboot+vue实现的电影院选票系统（文末源码+Lw+ppt）23-467

摘　要 时代在飞速进步，每个行业都在努力发展现在先进技术，通过这些先进的技术来提高自己的水平和优势，电影院选票系统当然不能排除在外。电影院选票系统是在实际应用和软件工程的开发原理之上，运用java语言，前台Vue框…
阅读更多...
Hive：数据仓库利器

Hive：数据仓库利器

1. 简介 Hive是一个基于Hadoop的开源数据仓库工具，可以用来存储、查询和分析大规模数据。Hive使用SQL-like的HiveQL语言来查询数据，并将其结果存储在Hadoop的文件系统中。 2. 基本概念 介绍 Hive 的核心概念，例如表、分区、桶、HQL 等。 …
阅读更多...
k8s部署hadoop

k8s部署hadoop

（作者：陈玓玏） 配置和模板参考helm仓库：https://artifacthub.io/packages/helm/apache-hadoop-helm/hadoop 先通过以下命令生成yaml文件： helm template hadoop pfisterer-hadoop/hadoop > hadoop.yaml用kube…
阅读更多...
NodeJs利用腾讯云实现手机发送验证码

NodeJs利用腾讯云实现手机发送验证码

本文介绍如何在nodejs实现短信发送，以腾讯云的短信验证为例。 腾讯云中准备工作 首先需要腾讯云的个人或者企业认证的账号，个人会赠送一百条，企业赠送一千条，可以用于测试，地址：腾讯云短信服务。然后需要…
阅读更多...
电机学（笔记一）

电机学（笔记一）

磁极对数p： 直流电机的磁极对数是指电机定子的磁极对数，也等于电机电刷的对数。它与电机的转速和扭矩有直接关系。一般来说，极对数越多，电机转速越低，扭矩越大，适用于低速、高扭矩的场合；相反&…
阅读更多...
免 费 搭 建 多模式商城：b2b2c、o2o、直播带货一网打尽

免 费 搭 建 多模式商城：b2b2c、o2o、直播带货一网打尽

鸿鹄云商 b2b2c产品概述 【b2b2c平台】，以传统电商行业为基石，鸿鹄云商支持“商家入驻平台自营”多运营模式，积极打造“全新市场，全新 模式”企业级b2b2c电商平台，致力干助力各行/互联网创业腾飞并获取更多的收益。从消…
阅读更多...
IonQ最新研究突破！引入光量子纠缠以构建量子计算网络

IonQ最新研究突破！引入光量子纠缠以构建量子计算网络

内容来源：量子前哨（ID：Qforepost） 编辑丨慕一 编译/排版丨沛贤 深度好文：700字丨5分钟阅读 2024年2月22日，美国量子计算公司IonQ宣布，公司研究团队已实现可重复地生成与离子纠缠的光子&#…
阅读更多...
Python之Web开发中级教程----Django站点管理

Python之Web开发中级教程----Django站点管理

Python之Web开发中级教程----Django站点管理 网站的开发分为两部分：内容发布和公共访问 内容发布是由网站的管理员负责查看、添加、修改、删除数据 Django能够根据定义的模型类自动地生成管理模块 使用Django的管理模块, 需要按照如下步骤操作 : 1.管理界面本地…
阅读更多...
图论题目集一（代码 注解）

图论题目集一（代码 注解）

目录 题目一&#xff1a; 题目二&#xff1a; 题目三&#xff1a; 题目四&#xff1a; 题目五&#xff1a; 题目六&#xff1a; 题目七&#xff1a; 题目一&#xff1a; #include<iostream> #include<queue> #include<cstring> using namespace st…
阅读更多...
rviz上不显示机器人模型（模型只有白色）

rviz上不显示机器人模型（模型只有白色）

文档中的是base_footprint&#xff0c;需要根据自己所设的坐标系更改&#xff0c;我的改为base_link 如何查看自己设的坐标系&#xff1a; 这些parent父坐标系就是 同时打开rviz后需要更改成base_link
阅读更多...
Java后端八股----JVM篇

Java后端八股----JVM篇

上图中线程1&#xff0c;2如果资源被抢占了&#xff0c;则程序计数器记录一下执行的行号&#xff0c;等到资源就绪后会从记录的行号继续向后执行。 Java8把静态变量以及常量放到了线程的本地内存原空间中(避免放在堆中不可控)。 &#x1f446;图中第二种情况不太容易出现…
阅读更多...
gPTP简介

gPTP简介

1、gPTP&#xff08;generalized precision time protocol&#xff09;广义时钟同步协议 gPTP&#xff08;generalized precision time protocol&#xff09;广义时钟同步协议&#xff0c;即IEEE 802.1AS协议。它是IEEE 1588协议的延伸&#xff0c;可以为TSN提供全局精准…
阅读更多...
使用RabbitMQ，关键点总结

使用RabbitMQ，关键点总结

文章目录 1.MQ的基本概念2.常见的MQ产品3.MQ 的优势和劣势3.1 优势3.2 劣势 4.RabbitMQ简介4.1RabbitMQ 中的相关概念 1.MQ的基本概念 MQ全称 Message Queue&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中保存消息的容器。多用于分布式系统之间进行通信。…
阅读更多...
RabbitMQ 安装保姆级教程

RabbitMQ 安装保姆级教程

目录 1.MQ引言 1.1 什么是MQ 1.2 MQ有哪些 1.3 不同MQ特点 2.RabbitMQ 的引言 2.1 RabbitMQ 2.2 RabbitMQ 的安装 2.2.1 下载 2.2.2 下载的安装包 2.2.3 安装步骤 3. RabiitMQ 配置 3.1RabbitMQ 管理命令行 3.2 web管理界面介绍 3.2.1 overview概览 3.2.2 Admin用…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023