当前位置: 首页 > news >正文

arkUI:水果选择与管理:基于 ArkUI 的长按编辑功能实现

水果选择与管理:基于 ArkUI 的长按编辑功能实现

  • 1 主要内容说明
  • 2 相关内容
    • 2.1 相关内容
      • 2.1.1 源码1内容的相关说明
        • 2.1.1.1 数据结构与状态管理
        • 2.1.1.2 添加水果功能
        • 2.1.1.3 水果列表展示
        • 2.1.1.4 长按进入编辑模式
        • 2.1.1.5 复选框的多选功能
        • 2.1.1.6 删除水果功能
        • 2.1.1.7 样式与视觉效果
      • 2.1.2 源码1 (水果选择与管理:基于 ArkUI 的长按编辑功能实现)
      • 2.1.3 源码1运行效果
        • 2.1.3.1 运行效果,视频
        • 2.1.3.2 运行效果,截图
  • 3.结语
  • 4.定位日期

1 主要内容说明

本文的代码主要用于对水果的管理应用,包含水果的添加、展示、选择、编辑和删除功能。用户可以从预置的水果列表中选择水果并动态显示在界面上,通过长按进入编辑模式后,可多选水果并批量删除。

主要功能包括:

  • 水果管理:通过弹窗选择水果,添加到展示列表中,防止重复选择。
  • 列表显示:水果项动态展示,序号和名称清晰,并支持通过背景颜色高亮已选中项。
  • 编辑模式:长按水果项进入编辑模式,显示复选框,用户可多选需要删除的水果。
  • 删除功能:选中水果后点击删除按钮,将选中的水果从列表中移除,同时退出编辑模式。

技术上,代码利用 @State 管理状态,通过事件绑定和条件渲染实现动态交互。视觉效果上使用渐变背景和排版细节提升用户体验。整体设计模块化,功能清晰,适合扩展到商品管理、任务列表等场景。

2 相关内容

2.1 相关内容

2.1.1 源码1内容的相关说明

2.1.1.1 数据结构与状态管理
  • 水果结构(fruit_mes)
    定义了一个接口 fruit_mes,用于描述水果项的结构,包含以下属性:
    -------------- id: 水果的唯一标识,用于区分不同的水果项。
    -------------- name: 水果的名称,用于显示。
  • 状态变量
    使用 @State 定义了多个变量,管理水果的增删改状态:
    -------------- message:一个字符串数组,包含预置的水果名称,供用户选择。
    -------------- message_toList:用户已选择的水果列表,类型为 fruit_mes[],用于动态展示。
    -------------- select_Item 和 select_Index:记录当前被选择的水果及其对应的索引,用于长按编辑模式。
    -------------- delete_Items 和 delete_Index:记录用户选中并打算删除的水果及其索引。
    -------------- isEdit:用于切换是否进入编辑模式。
    这些状态变量共同驱动 UI 的更新,用户的每一次操作都会实时反映在界面上。
2.1.1.2 添加水果功能
  • 通过 TextPickerDialog 弹出选择框,用户可以从预置水果列表中选择一个水果进行添加。逻辑如下:
    -------------- 弹出选择框,提供水果选项,用户确认后返回选中的水果索引和名称。
    -------------- 创建一个新的水果对象 { id, name }。
    -------------- 调用 have_Selected 方法,检查是否已添加过该水果:如果水果未被添加,则将其追加到 message_toList。如果已经存在,不进行任何操作,避免重复。
2.1.1.3 水果列表展示
  • 利用 List 和 ForEach 组件展示用户已选择的水果。核心特点包括:
    -------------- 序号与名称显示:水果项以“序号+名称”的形式呈现,序号从 1 开始。
    -------------- 动态背景颜色:未被选中的水果项使用默认渐变颜色。被选中的水果项(通过 item_has_been_selected 判断)显示特殊的高亮背景,提示当前状态。
    -------------- 布局样式:通过 Row 和 Text 配合 Blank,实现文本靠左,复选框靠右的排版。
2.1.1.4 长按进入编辑模式
  • 用户可以通过长按某个水果项,触发编辑模式,具体逻辑如下:
    -------------- 调用 LongPressGesture 的回调函数,将 isEdit 状态设置为 true。
    -------------- 将当前长按的水果项及其索引添加到 select_Item 和 select_Index。
    -------------- 更新 UI:显示复选框 Checkbox。显示“删除”按钮。
    -------------- 用户体验:长按操作是一个常见的交互习惯,特别适合列表编辑场景。
2.1.1.5 复选框的多选功能
  • 进入编辑模式后,每个水果项右侧会显示复选框,用户可以通过复选框选择多个水果。
    -------------- 使用 onChange 事件监听复选框状态的改变:当复选框被选中时,将对应水果和索引添加到 delete_Items 和 delete_Index。当复选框取消选中时,从上述数组中移除对应的数据。
    -------------- 动态更新数组,确保删除操作能够精确匹配用户选择。
2.1.1.6 删除水果功能
  • 用户完成多选后,可以点击“删除”按钮将选中的水果从列表中移除。
  • 删除逻辑:
    -------------- 遍历 delete_Index,依次从 message_toList 中删除对应的水果项。
    -------------- 清空 delete_Items 和 delete_Index,重置编辑状态。
    -------------- 退出编辑模式(isEdit = false),隐藏复选框和“删除”按钮。
2.1.1.7 样式与视觉效果
  • 使用渐变背景 (linearGradient) 为水果项提供动态的视觉提示:
    -------------- 默认状态下,使用冷色调渐变背景。
    -------------- 被选中的水果项使用暖色调渐变,突出显示。
  • 其他样式细节:
    -------------- 标题和按钮的字体大小、颜色和间距设计,提升整体美观性。
    -------------- 边距和圆角设计,让 UI 更加协调。

2.1.2 源码1 (水果选择与管理:基于 ArkUI 的长按编辑功能实现)

// 定义一个接口,用于表示水果的结构
interface fruit_mes {id: number; // 水果的唯一标识符name: string; // 水果的名称
}@Entry
@Component
struct Case1114 {// 水果名称的数组(可供用户选择的水果列表)@State message: string[] = ["苹果1", "西瓜2", "猕猴桃3", "菠萝4", "葡萄5", "椰枣6", "哈密瓜7", "沙田柚8", "橙子9"];// 用户已选择的水果项列表,存储为 `fruit_mes` 类型的数组@State message_toList: fruit_mes[] = [];// 是否处于编辑模式的标志位@State isEdit: boolean = false;// 长按选中的水果项列表,用于记录当前选中的水果项@State select_Item: fruit_mes[] = [];@State select_Index: number[] = []; // 长按选中的水果项对应的索引// 判断某水果项是否已被选中(长按选中状态)item_has_been_selected(item: fruit_mes): boolean {// 如果水果项已存在于 `select_Item` 中,返回 true,否则返回 falsereturn this.select_Item.includes(item);}// 用户选中的待删除水果项列表@State delete_Items: fruit_mes[] = [];@State delete_Index: number[] = []; // 待删除水果项的索引列表// 判断某索引是否已被标记为删除index_has_been_delete(index: number): boolean {// 如果索引存在于 `select_Index` 中,返回 true,否则返回 falsereturn this.select_Index.includes(index);}// 判断某水果项是否已添加到 `message_toList` 中have_Selected(item: fruit_mes): boolean {// 遍历已选水果列表,检查是否有相同的 id,若有返回 truereturn this.message_toList.some(fruit => fruit.id === item.id);}build() {Column() { // 整体页面布局为纵向排列// 顶部标题栏,显示标题和添加按钮Row() {// 显示标题文本Text("添加水果").fontSize(40) // 字体大小.fontWeight(400) // 字体粗细.margin({ left: 10 }); // 左边距// 显示“+”按钮,用于打开选择对话框Text("+").fontSize(40).fontWeight(800) // 字体加粗.margin({ left: 10 }) // 左边距.fontColor("blue") // 按钮颜色为蓝色.onClick(() => {// 显示文本选择对话框,用户可以选择水果TextPickerDialog.show({range: this.message, // 提供的水果选项alignment: DialogAlignment.Center, // 对话框居中onAccept: (result: TextPickerResult) => {const index = result.index as number; // 用户选择的索引const name = result.value as string; // 用户选择的水果名称const newFruit: fruit_mes = { id: index, name: name }; // 创建新的水果项// 检查是否已添加,未添加则加入列表if (!this.have_Selected(newFruit)) {this.message_toList.push(newFruit);console.log(JSON.stringify(this.message_toList)); // 打印当前已选水果列表}}});});}.width("100%"); // 设置标题栏宽度为页面宽度// 分割线Divider().color("red") // 红色分割线.height(20); // 高度为 20 vp// 使用 List 组件显示已选择的水果项List({ space: 5 }) { // 列表项之间的间距为 5ForEach(this.message_toList, // 遍历每个已选水果项(item: fruit_mes, index: number) => {ListItem() {Row() { // 每个列表项为一行// 显示水果的序号和名称Text(`${index + 1} --- ${item.name}`).fontSize(20) // 字体大小.fontWeight(800) // 字体粗细.fontColor("#ff0b4cc4"); // 字体颜色Blank(); // 空白占位符,保持复选框在右对齐// 如果索引被标记为删除,则显示复选框if (this.index_has_been_delete(index)) {Checkbox().onChange((isChecked) => {if (isChecked) {// 若复选框选中,将该项添加到待删除数组this.delete_Items.push(item);this.delete_Index.push(index);} else {// 若取消选中,则从待删除数组移除this.delete_Items = this.delete_Items.filter(f => f !== item);this.delete_Index = this.delete_Index.filter(i => i !== index);}});}}.width("100%") // 每行宽度占满.height(50) // 每行高度为 50.borderRadius(20) // 设置圆角效果.padding({ left: 20, right: 20 }) // 左右内边距.linearGradient({direction: GradientDirection.RightTop, // 渐变方向// 根据是否选中决定渐变背景颜色colors: this.item_has_been_selected(item)? [["#ffe7b720", 0.4], ["#ffee205a", 1]] // 选中时颜色: [["#ff35ace3", 0.4], ["#ff1ff834", 1]] // 未选中时颜色}).gesture(LongPressGesture().onAction(() => {this.isEdit = true; // 激活编辑模式// 长按后将选中项添加到选中数组if (!this.select_Item.includes(item)) {this.select_Item.push(item);this.select_Index.push(index);}console.log(JSON.stringify(this.select_Item)); // 打印选中项console.log(JSON.stringify(this.select_Index)); // 打印选中索引}));};});}.width("100%") // 列表宽度占满.height("auto"); // 高度根据内容自动调整// 编辑模式下显示删除按钮if (this.isEdit) {Button("删除").width("50%") // 按钮宽度为页面的一半.height(50) // 按钮高度为 50.margin(10) // 按钮外边距.onClick(() => {// 删除选中的水果项for (const deleteIndex of this.delete_Index.sort((a, b) => b - a)) {this.message_toList.splice(deleteIndex, 1); // 按降序删除避免索引错位}// 清空选中和删除数组this.select_Index = [];this.delete_Index = [];this.delete_Items = [];this.select_Item = [];this.isEdit = false; // 退出编辑模式});}}.height("100%") // 页面高度为 100%.width("100%"); // 页面宽度为 100%}
}

2.1.3 源码1运行效果

2.1.3.1 运行效果,视频

水果选择与管理:基于 ArkUI 的长按编辑功能实现

2.1.3.2 运行效果,截图
  • 默认情况
    在这里插入图片描述
  • 点击“+”符号,出现滚动选择框
    在这里插入图片描述
  • 点击选择框内的内容,每种种类只能选择一个,代码设置
    在这里插入图片描述
  • 长摁“西瓜”出现删除摁钮,更改背景颜色
    在这里插入图片描述
  • 勾选选择框后的圆
    在这里插入图片描述
  • 点击删除
    在这里插入图片描述

3.结语

本文使用了以前编写过的一些知识,如ts内容中的push方法、filter方法等,以及结合新的长摁事件、弹窗选择框等内容。有新知识也有对旧知识的重新拾起。对于新的内容或没编写过的内容,后期会选择相对应的模块进行编写。
由于笔者的能力有限,创作的内容有所不足在所难免,也敬请读者包涵和指出,万分感谢!

4.定位日期

2024-11-15;
22:59;

相关文章:

arkUI:水果选择与管理:基于 ArkUI 的长按编辑功能实现

水果选择与管理:基于 ArkUI 的长按编辑功能实现 1 主要内容说明2 相关内容2.1 相关内容2.1.1 源码1内容的相关说明2.1.1.1 数据结构与状态管理2.1.1.2 添加水果功能2.1.1.3 水果列表展示2.1.1.4 长按进入编辑模式2.1.1.5 复选框的多选功能2.1.1.6 删除水果功能2.1.1…...

docker使用,docker图形化界面+docker详细命令

DockerUI进入 docker container run --rm --name docker.ui -v /var/run/docker.sock:/var/run/docker.sock -p 8999:8999 joinsunsoft/docker.ui访问8999端口就行,就可以图形化管理Docker了 常规使用 搭建 sudo docker-compose build #有一些需要这条命令 su…...

idea项目运行时 java: 错误: 不支持发行版本 21

java项目运行时,同样的项目别的都是正常运行,单个这个项目一直报 java: 错误: 不支持发行版本 21, 报错的解释 这个错误表明你正在尝试使用Java编译器编译一个类,但是编译器遇到了一个它不支持的版本号,在这个上下文…...

hive alter table add columns 是否使用 cascade 的方案

结论 alter table xxx add columns 时加上 cascade 时,会把所有的分区都加上此字段。如果不加则只有新的分区会加上此字段,旧的分区没有此字段,即便数据文件里有对应的数据,也不能显示内容。 如果分区都是 insert overwrite 生成…...

手机怎么玩steam游戏?随时随地远程串流玩steam游戏教程

喜欢在steam上玩游戏的玩家有没有想过,其实这些游戏也能在手机上玩呢?不管是探索的开放世界游戏,还是紧张刺激的射击游戏,还是丰富剧情的视觉小说等等,这些游戏你都可以通过远程串流软件,来帮你实现在手机上…...

【使用antv g6实现拓扑图】

使用antv g6实现拓扑图 安装antv g6创建一个 div,并制定必须的属性 id定义初始化方法定义node节点数据将获取到的数据渲染进页面 安装antv g6 npm install antv/g6 --save import G6 from antv/g6;创建一个 div,并制定必须的属性 id 定义好展示id&…...

【数学 函数空间】拉普拉斯变换解微分方程步骤

拉普拉斯变换解微分方程 拉普拉斯变换解微分方程的一般步骤如下: 写出微分方程。对微分方程两边应用拉普拉斯正变换。求解变换后的代数方程,得到 Y ( s ) Y(s) Y(s)。如果需要,进行部分分式分解。对 Y ( s ) Y(s) Y(s)进行拉普拉斯逆变换&…...

vue3: toRef, reactive, toRefs, toRaw

vue3&#xff1a; toRef, reactive, toRefs, toRaw <template><div>{{ man }}</div><hr><!-- <div>{{ name }}--{{ age }}--{{ like }}</div> --><div><button click"change">修改</button></div&g…...

Unity读取Json

参考 Unity读取Json的几种方法_unity读取json文件-CSDN博客...

基于STM32的智能语音识别饮水机系统设计

功能描述 1、给饮水机设定称呼&#xff0c;喊出称呼&#xff0c;饮水机回答&#xff1a;我在 2、语音进行加热功能&#xff0c;说&#xff1a;请加热&#xff0c;加热片运行 3、饮水机水位检测&#xff0c;低于阈值播报“水量少&#xff0c;请换水” 4、检测饮水机水温&#xf…...

c++的几种构造函数

c的几种构造函数 构造函数拷贝构造函数转换构造函数移动构造函数 析构函数 构造函数 C中的构造函数可以分为5类&#xff1a;默认构造函数、普通构造函数、拷贝构造函数、转换构造函数、移动构造函数。 好像还有委托构造 默认构造和普通构造和java基本一样 详细 拷贝构造函…...

FRP 实现内网穿透

如何通过 FRP 实现内网穿透&#xff1a;群晖 NAS 的 Gitea 和 GitLab 访问配置指南 在自建服务的过程中&#xff0c;经常会遇到内网访问受限的问题。本文将介绍如何利用 FRP&#xff08;Fast Reverse Proxy&#xff09;来实现内网穿透&#xff0c;以便在外网访问群晖 NAS 上的…...

数据结构笔记(其八)--一般树的存储及其遍历

1.知识总览 一般的树会有多个孩子&#xff0c;所以存储结构也会与二叉树略有不同。 一般树的遍历。 2.双亲表示法 双亲表示法&#xff0c;也是父亲表示法&#xff0c;即每个节点中都存储了其父节点的地址信息。 特性&#xff1a;可以轻易地找到父节点&#xff0c;但寻找孩子节…...

在spring boot工程中使用Filter时,@WebFilter 注解不生效的问题分析和解决方案

1. 问题描述 首先编写一个Filter类并通过Component放入spring容器中&#xff0c;通过实现jakarta.servlet中提供的Filter接口完成过滤器的创建&#xff0c;代码如下。 import jakarta.servlet.*; import jakarta.servlet.annotation.WebFilter; import org.springframework.st…...

浅谈“通感一体”

文章目录 5G_Advanced的关键技术通感一体的介绍通感一体应用通感一体面临的挑战 5G_Advanced的关键技术 2024年6月18日16点30分&#xff0c;在上海举行的3GPP RAN第104次会议上&#xff0c;R18标准正式冻结&#xff0c;标志着5G技术的又一重要里程碑。值得注意的是&#xff0c…...

【Linux】监控系统Zabbix的安装与配置

文章目录 一、前期准备1、安装LAMP2、配置SELinux与防火墙3、测试Apache4、配置数据库5、创建zabbix数据库及应用 二、server端安装配置1、软件包安装2、配置数据库3、zabbix访问测试4、配置web界面 三、Agent端安装配置1、安装zabbix-agent2、配置3、启动zabbix-agent4、配置防…...

Springboot定时任务

Component EnableScheduling public class SpringBootTestJob {Scheduled(cron "0/5 * * * * ?")public void testScheduled(){System.out.println("SpringBootTestJob test");} }这段代码使用了 Spring Boot 自带的定时任务机制。解释如下&#xff1a; …...

node.js知识点总结

1、Node.js Node. js是一个基于 Chrome v8引擎的服务器端 JavaScript运行环境&#xff1b;Node. js是一个事件驱动、非阻塞式I/O的模型&#xff0c;轻量而又高效&#xff1b;Node. js的包管理器npm是全球最大的开源库生态系统。 2、数据处理中的buffer&#xff1a; 具体…...

Kotlin中泛型的协变

interface Shapeclass Circle : Shapefun main() {val shapes1: List<Shape> listOf<Circle>()val shapes2: MutableList<Shape> mutableListOf<Circle>() }如上代码&#xff0c;第一行赋值语句是OK的&#xff0c;第二行赋值语句在编辑器上直接就报错…...

第三百二十五节 Java线程教程 - Java Fork/Join框架

Java线程教程 - Java Fork/Join框架 fork/join框架通过利用机器上的多个处理器或多个内核来解决问题。 该框架有助于解决涉及并行性的问题。 fork/join框架创建一个线程池来执行子任务。 当线程在子任务上等待完成时&#xff0c;框架使用该线程来执行其他线程的其他未决子任…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

探索Selenium:自动化测试的神奇钥匙

目录 一、Selenium 是什么1.1 定义与概念1.2 发展历程1.3 功能概述 二、Selenium 工作原理剖析2.1 架构组成2.2 工作流程2.3 通信机制 三、Selenium 的优势3.1 跨浏览器与平台支持3.2 丰富的语言支持3.3 强大的社区支持 四、Selenium 的应用场景4.1 Web 应用自动化测试4.2 数据…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...