1# Filter 2 3 4多条件筛选，帮助用户在大量信息中找到所需内容，应结合具体场景选择合适筛选方式。多条件筛选控件由筛选器与悬浮条构成，悬浮条可下拉展示悬浮筛选器。筛选器样式可分为多行可折叠类型与多行列表类型，并可以在筛选器最后一行附加快捷筛选器。 5 6 7>  **说明：** 8> 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10 11## 导入模块 12 13``` 14import { Filter } from '@ohos.arkui.advanced.Filter' 15``` 16 17 18## 子组件 19 20无 21 22 23## Filter 24 25Filter({ multiFilters: Array<FilterParams>, additionFilters: FilterParams, filterType: FilterType, onFilterChanged: (Array<FilterResult>) => void }) 26 27**装饰器类型：**\@Component 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31**参数：** 32 33 34| 参数名 | 参数类型 | 必选 | 装饰器类型 | 参数描述 | 35| -------- | -------- | -------- | -------- | -------- | 36| multiFilters | Array<[FilterParams](#filterparams)> | 是 | \@Prop | 多条件筛选列表。 | 37| additionFilters | [FilterParams](#filterparams) | 否 | \@Prop | 附加快捷筛选项。 | 38| filterType | [FilterType](#filtertype) | 否 | \@Prop | 筛选器的样式类型。 | 39| onFilterChanged | (Array<[FilterResult](#filterresult)>) => void | 是 | \@Prop | 用户点击后的回调事件。回调函数的参数为选中的筛选项结果列表。 | 40| container | ()=>void | 否 | \@BuilderParam | 筛选结果展示区域自定义内容，通过尾随闭包形式传入。 | 41 42 43## FilterParams 44 45| 名称 | 值 | 是否必选 | 描述 | 46| -------- | -------- | -------- | -------- | 47| name | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 筛选项维度名称。 | 48| options | Array<[ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr)> | 是 | 筛选项维度可选项列表。 | 49 50 51## FilterType 52 53| 参数名 | 描述 | 54| -------- | -------- | 55| MULTI_LINE_FILTER | 多行可折叠类型筛选器。 | 56| LIST_FILTER | 多行列表类型筛选器。 | 57 58 59## FilterResult 60 61| 名称 | 值 | 是否必选 | 描述 | 62| -------- | -------- | -------- | -------- | 63| name | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 筛选项维度名称。 | 64| index | number | 是 | 该维度筛选项选中项目的索引值。<br/>默认值：-1 | 65| value | [ResourceStr](https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/reference/arkui-ts/ts-types.md/#resourcestr) | 是 | 该维度筛选项选中项目的值。<br/>默认值："" | 66 67 68## 示例 69 70多行可折叠Filter：内容区可完全自定义。 71 72``` 73import { Filter, FilterParams, FilterResult, FilterType } from '@ohos.arkui.advanced.Filter' 74 75@Entry 76@Component 77struct Index { 78 private filterParam: Array<FilterParams> = [{name: '月份', options: ['全部','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']}, 79 {name: '年份', options: ['全部','2023','2022','2021','2020','2019','2018','2017','2016','2015','2014','2013','2012','2011','2010','2009','2008']}, 80 {name: '节气', options: ['全部','立春','雨水','惊蛰','春分','清明','谷雨','立夏','小满','芒种','夏至','小暑','大暑','立秋','处暑','白露','秋分','寒露','霜降','立冬','小雪','大雪','冬至','小寒','大寒']}] 81 private additionParam: FilterParams = { name: '您还可以搜', options: ['运营栏目1','运营栏目2','运营栏目3','运营栏目4','运营栏目5','运营栏目6']} 82 private arr: number[] = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]; 83 build() { 84 Column() { 85 Filter({ 86 multiFilters: this.filterParam, 87 additionFilters: this.additionParam, 88 filterType: FilterType.MULTI_LINE_FILTER, 89 onFilterChanged: (select: Array<FilterResult>) => { 90 console.log('rec filter change') 91 for (let filter of select) { 92 console.log('name:' + filter.name + ',index:' + filter.index + ',value:' + filter.value) 93 } 94 } 95 }){ 96 List({ initialIndex: 0 }) { 97 ForEach(this.arr, (item, index: number) => { 98 ListItem() { 99 Text(item.toString()) 100 .width("100%") 101 .height(100) 102 .fontSize(16) 103 .textAlign(TextAlign.Center) 104 .borderRadius(10) 105 .backgroundColor(Color.White) 106 .margin({ top:10, bottom: 10 }) 107 } 108 }) 109 }.backgroundColor(Color.Gray) 110 .padding({ left: 20, right: 20 }) 111 } 112 } 113 .height('100%') 114 .width('100%') 115 } 116} 117``` 118 119 120
