如何实现列表项的何实新增和删除—OpenHarmony

作者：野生菌君 2023-06-14 15:15:13系统 OpenHarmony 下面以待办事项管理为例，介绍如何快速实现新增和删除列表项功能。现列

想了解更多关于开源的表项内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com

场景介绍

列表的增和编辑模式用途十分广泛，常见于待办事项管理、删除文件管理、何实备忘录的现列记录管理等应用场景。在列表的表项编辑模式下，新增和删除列表项是增和最基础的功能，其核心是删除对列表项对应的数据集合进行数据添加和删除。

下面以待办事项管理为例，何实介绍如何快速实现新增和删除列表项功能。现列

环境要求

本例基于以下环境开发，表项开发者也可以基于其他适配的增和版本进行开发：

• IDE: DevEco Studio 3.1 Release
• SDK: Ohos_sdk_public 3.2.12.5(API Version 9 Release)

新增列表项

如下图所示，当用户点击添加按钮时，删除将弹出列表项选择界面，用户点击确定后，列表中新增对应项目。

图17 新增待办

开发步骤

定义列表项数据结构和初始化列表数据，构建列表整体布局和列表项。
以待办事项管理为例，首先定义待办事项的数据结构：

import util from '@ohos.util';export class ToDo {   key: string = util.generateRandomUUID(true);  name: string;  constructor(name: string) {     this.name = name;  }}

然后，初始化待办事项列表和可选事项列表：

@State toDoData: ToDo[] = [];private availableThings: string[] = ['读书', '运动', '旅游', '听音乐', '看电影', '唱歌'];

构建UI界面。
初始界面包含“待办”和新增按钮“+”：

Text('待办')  .fontSize(36)  .margin({  left: 40})Blank()Text('+')  .fontWeight(FontWeight.Lighter)  .fontSize(40)  .margin({  right: 30 })

构建列表布局并通过ForEach循环渲染列表项：

List({  space: 10 }) {   ForEach(this.toDoData, (toDoItem) => {     ListItem() {       ...    }  }, toDoItem => toDoItem.key)}

为新增按钮绑定点击事件，并在事件中通过TextPickerDialog.show添加新增列表项的逻辑：

Text('+')  .onClick(() => {     TextPickerDialog.show({       range: this.availableThings, // 将可选事项列表配置到选择对话框中      onAccept: (value: TextPickerResult) => {          this.toDoData.push(new ToDo(this.availableThings[value.index])); // 用户点击确认，将选择的数据添加到待办列表toDoData中      },    })  })

删除列表项

如下图所示，当用户长按列表项进入删除模式时，提供用户删除列表项选择的交互界面，用户勾选完成后点击删除按钮，列表中删除对应的项目。

图18 长按删除待办事项

开发步骤

列表的删除功能一般进入编辑模式后才可使用，所以需要提供编辑模式的入口。
以待办列表为例，通过LongPressGesture()监听列表项的长按事件，当用户长按列表项时，进入编辑模式。

// ToDoListItem.etsFlex({  justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {   ...}.gesture(GestureGroup(GestureMode.Exclusive,  LongPressGesture() // 监听长按事件    .onAction(() => {       if (!this.isEditMode) {         this.isEditMode = true; //进入编辑模式        this.selectedItems.push(this.toDoItem); // 记录长按时选中的列表项      }    })  ))

需要响应用户的选择交互，记录要删除的列表项数据。
在待办列表中，通过勾选框的勾选或取消勾选，响应用户勾选列表项变化，记录所有选择的列表项。

// ToDoListItem.etsif (this.isEditMode) {   Checkbox()    .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) // 取消勾选时，则将此项从selectedItems中删除        }      }    })    ...}

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

// ToDoList.etsButton('删除')  .onClick(() => {     // 删除选中的列表项对应的toDoData数据    let leftData = this.toDoData.filter((item) => {       return this.selectedItems.find((selectedItem) => selectedItem !== item);    })    this.toDoData = leftData;    this.isEditMode = false;  })  ...

完整示例代码

新增和删除列表项的实现共涉及三个文件，各文件完整代码如下：

待办事项数据结构代码（ToDo.ets）：

// ToDo.etsimport util from '@ohos.util';export class ToDo {   key: string = util.generateRandomUUID(true)  name: string;  constructor(name: string) {     this.name = name;  }}

待办事项列表代码（ToDoList.ets）：

// ToDoList.etsimport {  ToDo } from '../model/ToDo';import {  ToDoListItem } from './ToDoListItem';@Entry@Componentstruct ToDoList {   @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.key)        }        .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%')  }}

待办事项代码（ToDoListItem.ets）：

// ToDoListItem.etsimport {  ToDo } from '../model/ToDo';@Componentexport 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)        }      })    )    )  }}

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com

责任编辑：jianghua 来源： 51CTO 开源基础软件社区 删除列表项新增列表项

(责任编辑：百科)