鸿蒙界面开发——组件（10）：单选框Radio复选框checkbox 下拉框select 多条件筛选Filter

单选框Radio

单选框一直会有这个圆圈，在选中和未选中之间切换状态。

Radio通过调用接口来创建，接口调用形式如下：

Radio(options: RadioOptions)
Radio(options: {value: string, group: string
,indicatorType:RadioIndicatorType,(新增)
indicatorBuilder：CustomBuilder(新增)
})

其中，value是单选框的名称，group是单选框的所属群组名称。
checked属性可以设置单选框的状态，状态分别为false和true，设置为true时表示单选框被选中。

Radio支持设置选中状态和非选中状态的样式，不支持自定义形状。
从API version 12开始，Radio支持自定义选中状态。

1.首先将RadioIndicatorType设为Custom，表示选中样式为indicatorBuilder中的内容。
2.指定indicatorBuilder,可以在builder创建选中的样式
Radio( {value: '1', group: '1'
,indicatorType: RadioIndicatorType.CUSTOM,
indicatorBuilder: this.myCustomBuilder
})Radio({ value: 'Radio3', group: 'radioGroup',indicatorType:RadioIndicatorType.CUSTOM,
indicatorBuilder:()=>{this.indicatorBuilder()} 这里为什么是一个箭头函数
})

Radio添加事件

除支持通用事件外，Radio还用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为。

  Radio({ value: 'Radio1', group: 'radioGroup' }).onChange((isChecked: boolean) => {if(isChecked) {//需要执行的操作}})Radio({ value: 'Radio2', group: 'radioGroup' }).onChange((isChecked: boolean) => {if(isChecked) {//需要执行的操作}})

Radio参数

Radio(options: RadioOptions)
RadioOptions:value|string; 
group|string; 
indicatorType|RadioIndicatorType; RadioIndicatorType: TICK	选中样式为系统默认TICK图标。DOT	选中样式为系统默认DOT图标。CUSTOM	选中样式为indicatorBuilder中的内容。indicatorBuilder|CustomBuilder

自定义选中样式

// xxx.ets
@Entry
@Component
struct RadioExample {@Builder //定义自定义结构样式indicatorBuilder() {Image($r("app.media.star"))}build() {Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {Column() {Text('Radio3')Radio({ value: 'Radio3', group: 'radioGroup',//设置选中样式类型indicatorType:RadioIndicatorType.CUSTOM,indicatorBuilder:()=>{this.indicatorBuilder()}}).checked(false).height(50).width(80).onChange((isChecked: boolean) => {console.log('Radio3 status is ' + isChecked)})}}.padding({ top: 30 })}
}

Radio属性

checked(value: boolean)设置单选框的选中状态。
radioStyle(value?: RadioStyle)设置单选框选中状态和非选中状态的样式。
RadioStyle：checkedBackgroundColor	ResourceColor	否	开启状态底板颜色。默认值：#007DFFuncheckedBorderColor	ResourceColor	否	关闭状态描边颜色。默认值：#182431indicatorColor	ResourceColor	否	开启状态内部圆饼颜色。选中之后的颜色√或者dot的颜色。默认值：#FFFFFF从API version 12开始，indicatorType设置为RadioIndicatorType.TICK和RadioIndicatorType.DOT时，支持修改内部颜色。indicatorType设置为RadioIndicatorType.CUSTOM时，不支持修改内部颜色。默认值：#FFFFFFcontentModifier(modifier: ContentModifier<RadioConfiguration>)定制Radio内容区的方法。
在Radio组件上，定制内容区的方法。modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

Radio事件

除支持通用事件外，还支持以下事件：

onChange
onChange(callback: (isChecked: boolean) => void)

单选框选中状态改变时触发回调。

复选框Checkbox

Checkbox(options?: CheckboxOptions)

API version 11开始，Checkbox默认样式由圆角方形变为圆形。
CheckboxOptions对象说明：

• name string 否 用于指定多选框名称。
• group string 否 用于指定多选框所属群组的名称（即所属CheckboxGroup的名称）。说明：未配合使用CheckboxGroup组件时，此值无用。
• indicatorBuilder CustomBuilder 否 配置多选框的选中样式为自定义组件。自定义组件与Checkbox组件为中心点对齐显示。indicatorBuilder设置为undefined/null时，默认为indicatorBuilder未设置状态。

Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).select(true).selectedColor(0xed6f21).shape(CheckBoxShape.CIRCLE).onChange((value: boolean) => {console.info('Checkbox1 change is' + value)})

Checkbox属性

1. select(value: boolean)设置多选框是否选中。从API version 10开始，该属性支持$$双向绑定变量。
2. selectedColor(value: ResourceColor) 设置多选框选中状态颜色。
3. unselectedColor(value: ResourceColor)设置多选框非选中状态边框颜色。
4. mark(value: MarkStyle)设置多选框内部图标样式。
   从API version 12开始，设置了indicatorBuilder时，按照indicatorBuilder中的内容显示。默认值：

{strokeColor : $r('sys.color.ohos_id_color_foreground_contrary'),
strokeWidth: $r('sys.float.ohos_id_checkbox_stroke_width'),
size: '20vp'}

5. shape(value: CheckBoxShape)设置CheckBox组件形状, 包括圆形和圆角方形。CheckBox组件形状, 包括圆形和圆角方形。默认值：CheckBoxShape.CIRCLE
6. contentModifier(modifier: ContentModifier)定制CheckBox内容区的方法。

事件

支持通用事件外，还支持以下事件：

onChange
onChange(callback: (value: boolean) => void)

当选中状态发生变化时，触发该回调。

CheckboxGroup

多选框群组，用于控制多选框全选或者不全选状态。

CheckboxGroup(options?: CheckboxGroupOptions)

创建多选框群组，可以控制群组内的Checkbox全选或者不全选，group值相同的Checkbox和CheckboxGroup为同一群组。
在结合带缓存组件使用时(如List)，未被创建的Checkbox选中状态需要应用手动控制。

CheckboxGroupOptions对象说明：

• group string 否 群组名称。多个相同群组名称的CheckboxGroup，仅第一个CheckboxGroup生效。

CheckBoxGroup属性

1. selectAll(value: boolean)设置是否全选。若同组的Checkbox显式设置了select属性，则Checkbox的优先级高。
2. unselectedColor
3. mark
4. checkboxShape

CheckBoxGroup事件

除支持通用事件外，还支持以下事件：

onChange(callback: (event: CheckboxGroupResult) => void )

CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。

下拉框select

提供下拉选择菜单，可以让用户在多个选项之间选择。

Select(options: Array<SelectOption>)

SelectOption对象说明：

• value ResourceStr 是 下拉选项内容。
• icon ResourceStr 否 下拉选项图片。
• symbolIcon SymbolGlyphModifier 否 下拉选项Symbol图片。symbolIcon优先级高于icon。

Select属性

除支持通用属性外，还支持以下属性：

1. selected(value: number | Resource) 设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。从API version 10开始，该参数支持$$双向绑定变量。
2. value(value: ResourceStr)设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。从API version 10开始，该参数支持$$双向绑定变量。
3. controlSize(value: ControlSize)设置Select组件的尺寸。默认值:ControlSize.NORMAL

controlSize、width、height接口作用优先级：

	1）如果开发者只设置了width和height，当文字大小设置的是比较大的值的时候，文字超出组件大小，且以省略号方式显示；2）如果开发者只设置了controlSize，没有设置width和height，`组件宽高自适应文字`，文字不超出组件，并设置最小宽度minWidth和最小高度minHeight；3）如果controlSize、width、height接口都设置了，width和height设置的值生效，但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight，width和height设置的值不生效，宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。

4. menuItemContentModifier定制Select下拉菜单项内容区的方法。

5. divider(options: Optional | null) 设置分割线样式，不设置该属性则按“默认值”展示分割线。

6. font fontColor selectedOptionBgColor selectedOptionFont selectedOptionFontColor optionBgColor optionFont optionFontColor

7. space(value: Length)设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined，或者小于等于8的值，取默认值。
   arrowPosition
   menuAlign
   optionWidth
   optionHeight
   menuBackgroundColor
   menuBackgroundBlurStyle

Select事件

onSelect(callback: (index: number, value: string) => void)

下拉菜单选中某一项的回调。
示例：

Select([{ value: 'aaa', icon: $r("app.media.selection") },{ value: 'bbb', icon: $r("app.media.selection") },{ value: 'ccc', icon: $r("app.media.selection") },{ value: 'ddd', icon: $r("app.media.selection") }]).selected(this.index).value(this.text).font({ size: 16, weight: 500 }).fontColor('#182431').selectedOptionFont({ size: 16, weight: 400 }).optionFont({ size: 16, weight: 400 }).space(this.space).arrowPosition(this.arrowPosition).menuAlign(MenuAlignType.START, {dx:0, dy:0}).optionWidth(200).optionHeight(300).onSelect((index:number, text?: string | undefined)=>{console.info('Select:' + index)this.index = index;if(text){this.text = text;}})

多条件筛选Filter

多条件筛选，帮助用户在大量信息中找到所需内容，应结合具体场景选择合适筛选方式。多条件筛选控件由筛选器与悬浮条构成，悬浮条可下拉展示悬浮筛选器。筛选器样式可分为多行可折叠类型与多行列表类型，并可以在筛选器最后一行附加快捷筛选器。

1. 首先需要导入模块

import { Filter } from '@kit.ArkUI'Filter({ multiFilters: Array<FilterParams>, 
additionFilters: FilterParams, 
filterType: FilterType, 
onFilterChanged: (Array<FilterResult>) => void, 
container: ()=> void })
装饰器类型：@Component

FilterType：

MULTI_LINE_FILTER	0	多行可折叠类型筛选器。
LIST_FILTER	1	多行列表类型筛选器。

Filter支持通用属性，不支持通用事件

// 多条件筛选列表private filterParam: Array<FilterParams> = [{name: '月份', options: ['全部','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']},
{name: '年份', options: ['全部','2023','2022','2021','2020','2019','2018','2017','2016','2015','2014','2013','2012','2011','2010']},
{name: '节气', options: ['全部','立春','雨水','惊蛰','春分','清明','谷雨','立夏','小满','芒种','夏至','小暑','大暑','立秋','处暑','白露','秋分','寒露','霜降','立冬','小雪','大雪','冬至','小寒','大寒']}]// 附加快捷项
private additionParam: FilterParams = { name: '您还可以搜', options: ['运营栏目1','运营栏目2','运营栏目3','运营栏目4','运营栏目5','运营栏目6']}private arr: number[] = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10];
Filter({multiFilters: this.filterParam,additionFilters: this.additionParam,filterType: FilterType.MULTI_LINE_FILTER,onFilterChanged: (select: Array<FilterResult>) => {console.log('rec filter change')for (let filter of select) {console.log('name:' + filter.name + ',index:' + filter.index + ',value:' + filter.value)}}})

组合下拉筛选框？

省市区组合下拉筛选框如何实现？