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

这篇具有很好参考价值的文章主要介绍了鸿蒙开发系列教程(二十四)--List 列表操作(3)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

列表编辑

1、新增列表项

定义列表项数据结构和初始化列表数据,构建列表整体布局和列表项。

提供新增列表项入口,即给新增按钮添加点击事件。

响应用户确定新增事件,更新列表数据。

2、删除列表项

列表的删除功能一般进入编辑模式后才可使用,所以需要提供编辑模式的入口。

需要响应用户的选择交互,记录要删除的列表项数据。

需要响应用户点击删除按钮事件,删除列表中对应的选项。

3、参考代码:

鸿蒙开发系列教程(二十四)--List 列表操作(3),鸿蒙,list,数据结构,harmonyos,华为

ToDo.ets

import util from "@ohos.util"
export class ToDo {
//注意,key有时候无效,foreach遍历时,可以name做区分,如上图红线
  key: string = util.generateRandomUUID(true)
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

ToDoListItem.ets

import { ToDo } from './ToDo';


@Component
export struct ToDoListItem {
  @Link isEditMode: boolean
  @Link selectedItems: ToDo[]
  private toDoItem: ToDo;


  hasBeenSelected(): boolean {
    return this.selectedItems.indexOf(this.toDoItem) != -1
  }


  build() {
    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
      Row({ space: 4 }) {
        Circle()
          .width(24)
          .height(24)
          .fill(Color.White)
          .borderWidth(3)
          .borderRadius(30)
          .borderColor('#ffdcdfdf')
          .margin({ right: 10 })


        Text(`${this.toDoItem.name}`)
          .maxLines(1)
          .fontSize(24)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }
      .padding({ left: 12 })


      if (this.isEditMode) {
        Checkbox()
          .select(this.hasBeenSelected() ? true : false)
          .onChange((isSelected) => {
            if (isSelected) {
              this.selectedItems.push(this.toDoItem)
            } else {
              let index = this.selectedItems.indexOf(this.toDoItem)
              if (index != -1) {
                this.selectedItems.splice(index, 1)
              }
            }
          })
          .width(24)
          .height(24)
      }
    }
    .width('100%')
    .height(80)
    .padding({
      left: 16,
      right: 12,
      top: 4,
      bottom: 4
    })
    .borderRadius(24)
    .linearGradient({
      direction: GradientDirection.Right,
      colors: this.hasBeenSelected() ? [[0xffcdae, 0.0], [0xFfece2, 1.0]] : [[0xffffff, 0.0], [0xffffff, 1.0]]
    })
    .gesture(
      GestureGroup(GestureMode.Exclusive,
        LongPressGesture()
          .onAction(() => {
            if (!this.isEditMode) {
              this.isEditMode = true
              this.selectedItems.push(this.toDoItem)
            }
          })
      )
    )
  }
}

主测试代码:

import { ToDo } from './ToDo';
import { ToDoListItem } from './ToDoListItem';


@Entry
@Component
struct Test03 {
  @State toDoData: ToDo[] = []
  @Watch('onEditModeChange') @State isEditMode: boolean = false
  @State selectedItems: ToDo[] = []


  private availableThings: string[] = ["学习", "打游戏", "刷抖音", '听音乐', '看电影', '追剧']


  saveData(value: string) {
    this.toDoData.push(new ToDo(value))
  }


  onEditModeChange() {
    if (!this.isEditMode) {
      this.selectedItems = []
    }
  }


  build() {
    Column() {
      Row() {
        if (this.isEditMode) {
          Text('X')
            .fontSize(20)
            .onClick(() => {
              this.isEditMode = false;
            })
            .margin({ left: 20, right: 20 })


          Text('已选择' + this.selectedItems.length + '项')
            .fontSize(24)
        } else {
          Text('爱好')
            .fontSize(36)
            .margin({ left: 40})
          Blank()
          Text('+')
            .fontWeight(FontWeight.Lighter)
            .fontSize(40)
            .margin({ right: 30 })
            .onClick(() => {
              TextPickerDialog.show({
                range: this.availableThings,
                onAccept: (value: TextPickerResult) => {
                  this.toDoData.push(new ToDo(this.availableThings[value.index]))
                  console.info('to do data: ' + JSON.stringify(this.toDoData))
                },
              })
            })
        }
      }
      .height('12%')
      .width('100%')


      List({ initialIndex: 0, space: 10 }) {
        ForEach(this.toDoData, toDoItem => {
          ListItem() {
            ToDoListItem({
              isEditMode: $isEditMode,
              toDoItem: toDoItem,
              selectedItems: $selectedItems
            })
          }.padding({ left: 24, right: 24, bottom: 12 })
        }, toDoItem => toDoItem.name)
      }
      .height('73%')
      .listDirection(Axis.Vertical)
      .edgeEffect(EdgeEffect.Spring)


      if (this.isEditMode) {
        Row() {
          Button('删除')
            .width('80%')
            .onClick(() => {
              let leftData = this.toDoData.filter((item) => {
                return this.selectedItems.find((selectedItem) => selectedItem != item)
              })
              console.log('leftData: ' + leftData);
              this.isEditMode = false;
              this.toDoData = leftData;
            })
            .backgroundColor('#ffd75d5d')
        }
        .height('15%')
      }
    }
    .backgroundColor('#fff1f3f5')
    .width('100%')
    .height('100%')
  }
}

鸿蒙开发系列教程(二十四)--List 列表操作(3),鸿蒙,list,数据结构,harmonyos,华为文章来源地址https://www.toymoban.com/news/detail-832676.html

到了这里,关于鸿蒙开发系列教程(二十四)--List 列表操作(3)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙Harmony-列表组件(List)详解

    不要和别人比生活,每个人阶段不同,追求不同,活法自然也不同。只要今天的你能比昨天的你快乐一点点,那你就是自己人生赢家。 目录 一,定义 二,布局与约束 2.1 布局 2.2 约束 三,开发布局 3.1 设置主轴方向 3.2设置交叉轴布局 四,迭代列表内容 五,自定义列表样式

    2024年01月17日
    浏览(45)
  • 鸿蒙开发系列教程(二)--基础应用

    https://www.harmonyos.com/ 开发–应用开发 、设备开发 自行查看对应文档 设计指南 开发指南 HarmonyOS提供了一套UI开发框架,即方舟开发框架(ArkUI框架),可为开发者提供应用UI开发所必需的能力,比如多种组件、布局计算、动画能力、UI交互、绘制等。 方舟开发框架针对不同目

    2024年01月20日
    浏览(47)
  • 鸿蒙开发系列教程(七)--ArkTS语言:状态管理

    如果希望构建一个动态的、有交互的界面,就需要引入“状态”的概念 状态管理机制:在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状态变化

    2024年01月20日
    浏览(60)
  • 【深度学习】 Python 和 NumPy 系列教程(三):Python容器:1、列表List详解(初始化、索引、切片、更新、删除、常用函数、拆包、遍历)

    目录 一、前言 二、实验环境 三、Python容器(Containers) 0、容器介绍 1、列表(List) 1. 初始化 a. 创建空列表 b. 使用现有元素初始化列表 c. 使用列表生成式 d. 复制列表 2. 索引和切片 a. 索引 b. 负数索引 c. 切片 3. 常用操作(更新、删除) a. 更新单个元素 b. 更新切片 c. 删除单

    2024年02月09日
    浏览(53)
  • 软件设计模式系列之二十四——模板方法模式

    在软件设计领域,设计模式是一组被反复使用、多次实践验证的经典问题解决方案。其中,模板方法模式是一种行为型设计模式,用于定义一个算法的骨架,将算法中的某些步骤延迟到子类中实现,从而使子类可以重新定义算法的某些特定步骤,同时保持算法的整体结构不变

    2024年02月08日
    浏览(45)
  • 鸿蒙开发笔记(十四): UI开发概述及布局概述

    方舟开发框架(简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。 针对不同的应用场景及技术背景,方舟开发框架提供了两种开发

    2024年01月19日
    浏览(42)
  • 大数据ClickHouse(十四):Integration系列表引擎

    文章目录 Integration系列表引擎 一、HDFS 二、MySQL

    2024年01月17日
    浏览(46)
  • Python与CAD系列高级篇(二十四)分类提取坐标到excel

    本篇介绍以下功能开发: 1.对点、直线、多段线、圆、样条曲线分类读取坐标;2.提取坐标到excel。 需求: ① 用户选择内容。 ② 对选定内容分类提取坐标。 ③ 提取坐标到excel。 代码实现:

    2024年01月16日
    浏览(42)
  • 鸿蒙开发笔记(二十七): 交互事件--手势

    gesture为通用的一种手势绑定方法,可以将手势绑定到对应的组件上。 例如,可以将点击手势TapGesture通过gesture手势绑定方法绑定到Text组件上。 priorityGesture是带优先级的手势绑定方法,可以在组件上绑定优先识别的手势。 在默认情况下,当父组件和子组件使用gesture绑定同类

    2024年01月25日
    浏览(50)
  • 鸿蒙开发笔记(二十六):交互事件--触摸,按键,鼠标,焦点

    交互事件按照触发类型来分类,包括触屏事件、键鼠事件和焦点事件。 触屏事件:手指或手写笔在触屏上的单指或单笔操作。 键鼠事件:包括外设鼠标或触控板的操作事件和外设键盘的按键事件。 鼠标事件是指通过连接和使用外设鼠标/触控板操作时所响应的事件。 按键事

    2024年01月24日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包