鸿蒙界面开发——组件（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	否	开启状态底板颜色。默认值：#007DFF
	uncheckedBorderColor	ResourceColor	否	关闭状态描边颜色。默认值：#182431
	indicatorColor	ResourceColor	否	开启状态内部圆饼颜色。选中之后的颜色√或者dot的颜色。默认值：#FFFFFF
	从API version 12开始，indicatorType设置为RadioIndicatorType.TICK和RadioIndicatorType.DOT时，支持修改内部颜色。indicatorType设置为RadioIndicatorType.CUSTOM时，不支持修改内部颜色。

默认值：#FFFFFF

contentModifier(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属性

select(value: boolean)设置多选框是否选中。从API version 10开始，该属性支持$$双向绑定变量。
selectedColor(value: ResourceColor) 设置多选框选中状态颜色。
unselectedColor(value: ResourceColor)设置多选框非选中状态边框颜色。
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'}

shape(value: CheckBoxShape)设置CheckBox组件形状, 包括圆形和圆角方形。CheckBox组件形状, 包括圆形和圆角方形。默认值：CheckBoxShape.CIRCLE
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属性

selectAll(value: boolean)设置是否全选。若同组的Checkbox显式设置了select属性，则Checkbox的优先级高。
unselectedColor
mark
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属性

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

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

menuItemContentModifier定制Select下拉菜单项内容区的方法。
divider(options: Optional | null) 设置分割线样式，不设置该属性则按“默认值”展示分割线。
font fontColor selectedOptionBgColor selectedOptionFont selectedOptionFontColor optionBgColor optionFont optionFontColor
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

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

首先需要导入模块

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)
      }
    }
  })