中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
本文原创发布在华为开发者社区。
该示例利用网格布局实现下拉筛选框效果,构建下拉筛选框多选日期弹窗页面。
实现下拉筛选框多选源码链接
安装到手机后点击应用图标即可进入本应用。如果在运行该示例代码时,出现运行不了的情况,可尝试选择DevEco Studio菜单栏Build里面的Clean Project选项,来清理工程。
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')
Row() { Button('重置') ... .onClick(() => { this.checkedList = { '周一': false, '周二': false, '周三': false, '周四': false, '周五': false, '周六': false, '周日': false, } this.businessHours = '营业时间' }) Button('确认') ... .onClick(() => { this.showDialog = false }) }
微信扫码分享