实现下拉筛选框多选鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

该示例利用网格布局实现下拉筛选框效果，构建下拉筛选框多选日期弹窗页面。

实现下拉筛选框多选源码链接

效果预览

使用说明

安装到手机后点击应用图标即可进入本应用。如果在运行该示例代码时，出现运行不了的情况，可尝试选择DevEco Studio菜单栏Build里面的Clean Project选项，来清理工程。

实现思路

• 利用Grid网格布局实现下拉筛选框效果。

  Grid() {
  ForEach(this.hoursList, (item: string) => {
    GridItem() {
      Toggle({ type: ToggleType.Button, isOn: this.checkedList[item] }) {
        Text(item).fontSize(14)
          .fontColor(this.checkedList[item] ? Color.Orange : Color.Black)
      }
      .height(40)
      .width('100%')
      .selectedColor('#fffadad1')
      .onChange((isOn: boolean) => {
        this.checkedList[item] = isOn
        if (isOn) {
          this.recordTitleList.push(item)
          this.businessHours = item + '....'
        } else {
          this.recordTitleList = this.recordTitleList.filter(title => item !== title);
          let length = this.recordTitleList.length - 1
          if (length >= 0) {
            this.businessHours = this.recordTitleList[length] + '....'
          } else {
            this.businessHours = '营业时间'
          }
        }
      })
    }
  })
  }
  .columnsGap(10)
  .rowsGap(10)
  .padding({ left: 16, right: 16 })
  .width('100%')
  .height(180)
  .columnsTemplate('1fr 1fr 1fr')
  .rowsTemplate('1fr 1fr 1fr')

• 点击重置按钮将选择清空，全部改为false。点击确认按钮，收起弹窗。

  Row() {
  Button('重置')
    ...
    .onClick(() => {
      this.checkedList = {
        '周一': false,
        '周二': false,
        '周三': false,
        '周四': false,
        '周五': false,
        '周六': false,
        '周日': false,
      }
      this.businessHours = '营业时间'
    })
  Button('确认')
    ...
    .onClick(() => {
      this.showDialog = false
    })
  }