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

鸿蒙场景化示例代码技术工程师

发布于 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.