鸿蒙应用开发-自定义可删除列表弹窗-编程知识

鸿蒙应用开发-自定义可删除列表弹窗

功能介绍：

自定义列表弹窗，可以对弹窗的列表点击删除，参考文档创建列表，自定义弹窗文档自定义弹窗（CustomDialog）。

知识点：

熟悉对List控件的使用。
熟悉对List点击删除
熟悉自定义弹窗。

使用环境：

API 9
DevEco Studio 4.0 Release
Windows 11
Stage模型
ArkTS语言

所需权限：

无需权限

效果图：
在这里插入图片描述

核心代码：

src/main/ets/model/Intention.ets是定义列表内容的实体类：

export class Intention {key: stringname: stringconstructor(name: string) {this.key = `${Date.now()}_${Math.floor(Math.random() * 1000)}`this.name = name}
}

src/main/ets/model/IntentionDataSource.ets是列表的操作类。

import { Intention } from './Intention';class BasicDataSource implements IDataSource {private listeners: DataChangeListener[] = [];private originDataArray: Array<Intention> = new Array<Intention>();public totalCount(): number {return 0;}public getData(index: number): Intention {return this.originDataArray[index];}registerDataChangeListener(listener: DataChangeListener): void {if (this.listeners.indexOf(listener) < 0) {console.info('add listener');this.listeners.push(listener);}}unregisterDataChangeListener(listener: DataChangeListener): void {const pos = this.listeners.indexOf(listener);if (pos >= 0) {console.info('remove listener');this.listeners.splice(pos, 1);}}notifyDataReload(): void {this.listeners.forEach(listener => {listener.onDataReloaded();})}notifyDataAdd(index: number): void {this.listeners.forEach(listener => {listener.onDataAdd(index);})}notifyDataChange(index: number): void {this.listeners.forEach(listener => {listener.onDataChange(index);})}notifyDataDelete(index: number): void {this.listeners.forEach(listener => {listener.onDataDelete(index);})}
}export class IntentionDataSource extends BasicDataSource {private dataArray: Array<Intention> = new Array<Intention>();public totalCount(): number {return this.dataArray.length;}public getData(index: number): Intention {return this.dataArray[index];}public addData(index: number, data: Intention): void {this.dataArray.splice(index, 0, data);this.notifyDataAdd(index);}public pushData(data: Intention): void {this.dataArray.push(data);this.notifyDataAdd(this.dataArray.length - 1);}public deleteData(index: number): void {this.dataArray.splice(index, 1);this.notifyDataDelete(index);}public reloadData(): void {this.notifyDataReload();}
}

src/main/ets/view/CustomDialog.ets是自定义弹窗。

import { Intention } from '../model/Intention'
import { IntentionDataSource } from '../model/IntentionDataSource'@CustomDialog
export struct AddIntentionDialog {private controller: CustomDialogControllerprivate intentionList: IntentionDataSourcecancel: () => voidconfirm: () => voidbuild() {Column() {Text('任务列表').fontSize(22).fontWeight(FontWeight.Bold).margin({ top: 20, bottom: 20 })List({ space: 5 }) {LazyForEach(this.intentionList, (item: Intention, index: number) => {ListItem() {Row() {Column() {Text(item?.name).padding(5)}.width('50%').alignItems(HorizontalAlign.Center)Column() {Button('删除').onClick(() => {// 删除数据this.intentionList.deleteData(index)// 重置所有子组件的index索引this.intentionList.reloadData()})}.width('50%').alignItems(HorizontalAlign.Center)}.width('100%')}}, (item: Intention, index: number) => item.key + index.toString()) // 不能忽略这个}.width('100%')Flex({ justifyContent: FlexAlign.SpaceAround }) {Button("取消").onClick(() => {this.controller.close()this.cancel()}).fontColor(Color.Black).backgroundColor(Color.Pink).margin({ top: 20, bottom: 20 })Button("确定").onClick(() => {this.controller.close()this.confirm()}).fontColor(Color.White).backgroundColor(Color.Blue).margin({ top: 20, bottom: 20 })}}}
}

页面代码如下：

import { AddIntentionDialog } from '../view/CustomDialog'
import { Intention } from '../model/Intention'
import { IntentionDataSource } from '../model/IntentionDataSource'@Entry
@Component
struct Index {private dialogController:CustomDialogControllerbuild() {Row() {Button('显示弹窗').onClick(() => {this.show()}).width('100%').margin({top: 10})}.width('100%')}show() {let intentionList:IntentionDataSource = new IntentionDataSource()for (let index = 0; index < 4; index++) {let intention:Intention = new Intention(`任务${index}`)intentionList.addData(index, intention)}this.dialogController = new CustomDialogController({builder: AddIntentionDialog({intentionList: intentionList,cancel: () => {console.info('点击取消按钮')},confirm: () => {console.info('点击确认按钮')},}),// 点击其他空白区域自动关闭弹窗autoCancel: true,// 弹窗的位置alignment: DialogAlignment.Center,})this.dialogController.open()}
}