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

鸿蒙场景化示例代码技术工程师
发布于 2025-3-14 15:36
浏览
0收藏

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

介绍

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

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

效果预览

实现下拉筛选框多选鸿蒙示例代码-鸿蒙开发者社区

使用说明

安装到手机后点击应用图标即可进入本应用。如果在运行该示例代码时,出现运行不了的情况,可尝试选择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')
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 点击重置按钮将选择清空,全部改为false。点击确认按钮,收起弹窗。
Row() {
  Button('重置')
    ...
    .onClick(() => {
      this.checkedList = {
        '周一': false,
        '周二': false,
        '周三': false,
        '周四': false,
        '周五': false,
        '周六': false,
        '周日': false,
      }
      this.businessHours = '营业时间'
    })
  Button('确认')
    ...
    .onClick(() => {
      this.showDialog = false
    })
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

分类
收藏
回复
举报
回复
    相关推荐