美文网首页
鸿蒙~ArkUI基础 list 第三篇 之编辑列表

鸿蒙~ArkUI基础 list 第三篇 之编辑列表

作者: 胡修波 | 来源:发表于2023-12-25 08:33 被阅读0次
class toDo {
  name: string;

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

@Entry
@Component
struct Main {
  @State toDos: toDo[]  = []
  @State idEditMode: boolean = false
  @State selectItems:Object[] = []

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

  build() {

    Column() {
      Row() {
        Text("待办").fontSize(25).fontStyle(FontStyle.Italic)
        Blank()
        Image($r('app.media.icon'))
          .size({width:30, height:30})
          .onClick(() => {{
            TextPickerDialog.show({
              range:this.availableThings,
              onAccept: (value: TextPickerResult) => {
                this.toDos.push(new toDo(this.availableThings[value.index])); // 新增列表项数据toDoData
              },
            })
          }})
      }
      .width("100%").padding({left: 20, right: 20, top: 20})


      List({space: 20}) {
        ForEach(this.toDos, (item: toDo) => {
          ListItem() {
            Row() {
              Text(item.name)
                .fontSize(20)
              Blank()
              if (this.idEditMode) {
                Checkbox()
                  .onChange((isSelectd) => {
                     if (isSelectd) {
                       this.selectItems.push(item)
                     } else {
                       let index = this.selectItems.indexOf(item)
                       if (index !== -1) {
                         this.selectItems.splice(index, 1) // 取消勾选时,则将此项从selectedItems中删除
                       }
                     }
                  })
              }
            }
            .width("100%")
            .padding({left: 10, right: 10})
          }.width("90%")
          .height(50)
          .margin(10)
          .borderRadius(16)
          .backgroundColor(this.idEditMode? Color.Orange: Color.Gray)
          .alignSelf(ItemAlign.Center)
           .gesture(
             LongPressGesture()
               .onAction(()=> {
                 if (!this.idEditMode) {
                   this.idEditMode = true;
                   this.selectItems.push(item)
                 }
               })
           )
        })
      }

      .margin({top: 30})
      .width("100%")
      .alignListItem(ListItemAlign.Center)

      if (this.idEditMode) {
        Button("删除")
          .width("90%")
          .borderRadius(15)
          .backgroundColor(this.selectItems.length > 0 ? Color.Red : Color.Pink)
          .margin({ left: 20, right: 20 })
          .height(60)
          .onClick(() => {
            let leftData = this.toDos.filter((item) => {
              return this.selectItems.find((selectedItem) => selectedItem !== item);
            })

            this.toDos = leftData;

            this.idEditMode = false;
          })
      }
    }
    .padding({right:10})
    .size({width: "100%",height: "100%"})

  }
}
微信图片_20231225213014.png

相关文章

  • eyoucms list 列表数据标签

    [基础用法] 名称:list 功能:获取列表模板中的列表内容。 语法: {eyou:list pagesize='...

  • Day01自学 - Python 列表(List)

    学习参考博客地址:Python 列表(List) | python list(列表)操作用法总结 一、基础语法 创...

  • Bootstrap列表组与面板

    列表组 1、列表组(基础列表组) 首先在 上添加“list-group”类名然后在 上添加“list-group-...

  • jmeter处理参数(json提取器和BeanShell脚本)

    场景:1、调用/list接口返回json对象列表,返回参数结构如下 2、调用数据编辑接口/edit循环编辑上述列表...

  • Python从入门到精通

    列表(list) 列表非常适合用于存储在程序运行期间可能变化的数据集。 基础操作:list = [ ]append...

  • Python基本数据类型之List与Tuple

    Python基本数据类型之List、Tuple以及Dictionary 部分参考资料 List(列表) 列表简介 ...

  • 2018-12-29

    ### 列表基础 1.已知一个列表,求列表中心元素。 ``` list1 = ['abc', 'b', 'c', ...

  • 列表、元组

    1、列表基础 列表list,是使用最多的一种容器(数据类型),每个数据之间使用逗号隔开1.1列表作用●List (...

  • Python_基础_数据类型_2

    在看完基础数据类型后,我们看看列表和字典类型 list Python 中 list 和 java 中的 List ...

  • Python基础 - 列表 List

    列表是最常用的Python数据类型,由数字、字符串等组成,可随意修改,列表是可变的。 创建列表: 在方括号[]中,...

网友评论

      本文标题:鸿蒙~ArkUI基础 list 第三篇 之编辑列表

      本文链接:https://www.haomeiwen.com/subject/zpvhndtx.html