1# AtomicServiceSearch 2 3AtomicServiceSearch为开发者提供满足定制化需求的功能，内容包括默认显示的搜索区、可自定义的选择区和功能区（最多两个）。 4 5> **说明：** 6> 7> 该组件从API version 18开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 导入模块 11 12``` 13import { AtomicServiceSearch } from '@kit.ArkUI'; 14``` 15 16 17## AtomicServiceSearch 18```ts 19AtomicServiceSearch({ 20 value?: ResourceStr, 21 placeholder?: ResourceStr, 22 controller?: SearchController, 23 select?: SelectParams, 24 search?: SearchParams, 25 operation?: OperationParams, 26}) 27``` 28 29**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 30 31**装饰器类型：** @Component 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 38| ----------- | :--------------- | ---- | ---------- | ------------------------------------------------------------ | 39| value | [ResourceStr](ts-types.md#resourcestr) | 否 | @Prop | 设置当前显示的搜索文本内容。默认值为空字符串。 | 40| placeholder | [ResourceStr](ts-types.md#resourcestr) | 否 | @Prop | 搜索框内默认显示的提示文本。默认值为`Search`。 | 41| controller | [SearchController](ts-basic-components-search.md#searchcontroller) | 否 | - | 原生Search组件控制器，用于设置输入光标的位置、退出编辑态等操作。默认值为`undefined`。 | 42| select | [SelectParams](#selectparams) | 否 | @Prop | select选择区的内容、事件及样式。默认值为`undefined`。 | 43| search | [SearchParams](#searchparams) | 否 | @Prop | search搜索区可支持的事件及样式。默认值为`undefined`。 | 44| operation | [OperationParams](#operationparams) | 否 | - | 选择区（右侧）的功能设置项。默认值为`undefined`。 | 45 46 47## SelectParams 48 49AtomicServiceSearch中“选择区”的可选属性。 50 51**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55| 名称 | 类型 | 必填 | 说明 | 56| ----------------------- | -------------------------------------------- | ------------------------------------------------------------ | ---- | 57| options | Array<[SelectOption](ts-basic-components-select.md#selectoption对象说明)> | 否 | 下拉选项内容。默认值为`undefined`。 | 58| selected | number| 否 | 设置下拉菜单初始选项的索引。第一项的索引为0。当不设置selected属性时，默认选择值为-1，菜单项不选中。 | 59| selectValue | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置下拉按钮本身的文本内容。默认值为`undefined`。 | 60| onSelect | [OnSelectCallback](#onselectcallback) | 否 | 下拉菜单选中某一项的回调。默认值为`undefined`。 | 61| menuItemContentModifier | [ContentModifier<MenuItemConfiguration>](ts-basic-components-select.md#menuitemconfiguration12对象说明) | 否 | 在Select组件上，定制下拉菜单项内容区的方法。在应用了该属性后，下拉菜单的内容将完全由开发者自定义，此时为选择区设置的下拉菜单分割线、背景色及字体样式等属性将不再生效。<br/>modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。默认值为`undefined`。 | 62| divider | [Optional](ts-universal-attributes-custom-property.md#optional12)<[DividerOptions](ts-basic-components-textpicker.md#divideroptions12对象说明)> \| null | 否 | 1.设置DividerOptions，则按设置的样式显示分割线。默认值：`{strokeWidth: '1px', color: '#33182431'}`。<br/>2.设置为null时，不显示分割线。<br/>3.strokeWidth设置过宽时，会覆盖文字。分割线会从每一个Item底部开始，同时向上向下画分割线。<br/>4.startMargin和endMargin的默认值与不设置divider属性时的分割线样式保持一致。startMargin和endMargin的和与optionWidth的值相等时，不显示分割线。 startMargin和endMargin的和超过optionWidth的值时，按照默认样式显示分割线。 | 63| font | [Font](ts-types.md#font) | 否 | 下拉按钮本身的文本样式。默认值：`{size: $r('sys.float.ohos_id_text_size_body1')}`。 | 64| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下拉菜单选中项的文本颜色。默认值：`{fontColor: $r('sys.color.ohos_id_color_text_primary')}`。 | 65| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下拉菜单选中项的背景色。默认值：`$r('sys.color.ohos_id_color_component_activated')`混合`$r('sys.color.ohos_id_alpha_highlight_bg')`的透明度。 | 66| selectedOptionFont | [Font](ts-types.md#font) | 否 | 下拉菜单选中项的文本样式。默认值：`{size: $r('sys.color.ohos_id_text_size_body1'), weight: FontWeight.Regular}`。 | 67| selectedOptionFontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下拉菜单选中项的文本颜色。默认值：`$r('sys.color.ohos_id_color_text_primary_activated')`。 | 68| optionBgColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下拉菜单项的背景色。默认值：`Color.Transparent`。 | 69| optionFont | [Font](ts-types.md#font) | 否 | 下拉菜单项的文本样式。默认值：`{size: $r('sys.float.ohos_id_text_size_body1'), weight: FontWeight.Regular}`。 | 70| optionFontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下拉菜单项的文本颜色。默认值：`$r('sys.color.ohos_id_color_text_primary')`。 | 71| optionWidth | [Dimension](ts-types.md#dimension10) \| [OptionWidthMode](ts-appendix-enums.md#optionwidthmode11) | 否 | 设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为枚举类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。当设置为异常值或小于最小宽度56vp时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。 | 72| optionHeight | [Dimension](ts-types.md#dimension10) | 否 | 设置下拉菜单显示的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。 | 73| space | [Length](ts-types.md#length) | 否 | 下拉菜单项的文本与箭头之间的间距。默认值：`8`。 | 74| arrowPosition | [ArrowPosition](ts-basic-components-select.md#arrowposition10枚举说明) | 否 | 下拉菜单项的文本与箭头之间的对齐方式。默认值：`ArrowPosition.END`。 | 75| menuAlign | [MenuAlignParams](#menualignparams) | 否 | 设置下拉按钮与下拉菜单间的对齐方式。默认值：`{alignType: MenuAlignType.START, offset: {dx: 0, dy: 0}}`。 | 76| menuBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下拉菜单的背景色。默认值：`Color.Transparent`。 | 77| menuBackgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 下拉菜单的背景模糊材质。默认值：`BlurStyle.COMPONENT_ULTRA_THICK`。 | 78 79 80## SearchParams 81 82AtomicServiceSearch中“搜索区”的可选属性。 83 84**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 85 86**系统能力：** SystemCapability.ArkUI.ArkUI.Full 87 88| 名称 | 类型 | 必填 | 说明 | 89| ------------------------ | ---------------------------------------------- | ------------------------------------------------------------ | ---- | 90| searchKey | [ResourceStr](ts-types.md#resourcestr) | 否 | 用作找到一个唯一的search组件。默认值：`undefined`。 | 91| componentBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置组件的背景色。默认值：`$r('sys.color.ohos_id_color_text_field_sub_bg')`。 | 92| pressedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 设置组件按压态的背景色。默认值：`$r('sys.color.ohos_id_color_click_effect')`。 | 93| searchButton | [SearchButtonParams](#searchbuttonparams) | 否 | 设置搜索框末尾搜索按钮。点击搜索按钮，同时触发onSubmit与onClick回调。<br />-value：搜索框末尾搜索按钮文本内容。<br /> -option: 配置搜索框文本样式。默认值：`{fontSize: '16fp', fontColor: '#ff3f97e9'}`。 | 94| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | placeholder文本颜色。默认值：`$r('sys.color.ohos_id_color_text_secondary')`。 | 95| placeholderFont | [Font](ts-types.md#font) | 否 | 设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。默认值：`{size: $r('sys_float.ohos_id_text_size_body1')}`。 | 96| textFont | [Font](ts-types.md#font) | 否 | 设置搜索框内输入文本样式，包括字体大小，字体粗细，字体族，字体风格。目前仅支持默认字体族。默认值：`{size: $r('sys_float.ohos_id_text_size_body1')}`。 | 97| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 否 | 文本在搜索框中的对齐方式。默认值：`TextAlign.Start`。 | 98| copyOptions | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 否 | 输入的文本是否可复制。默认值：`CopyOptions.LocalDevice`，支持设备内复制。 | 99| searchIcon | [IconOptions](ts-basic-components-search.md#iconoptions10对象说明) \| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 左侧搜索图标样式。<!--RP1--><br />浅色模式默认值：`{size: '16vp', color: '#99182431', src: ' '}`。<br />深色模式默认值：`{size: '16vp', color: '#99ffffff', src: ' '}`。 <!--RP1End--> | 100| cancelIcon | [IconOptions](ts-basic-components-search.md#iconoptions10对象说明) | 否 | 右侧清除按钮样式。默认值：`{style: CancelButtonStyle.INPUT, icon: {size: '16vp', color: '#99ffffff', src: ' '}}`。<br/>当style为CancelButtonStyle.CONSTANT时，默认显示清除样式。 | 101| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 输入文本的字体颜色。默认值：`$r('sys.color.ohos_id_color_text_secondary')`。 | 102| caretStyle | [CaretStyle](ts-text-common.md#caretstyle10) | 否 | 光标样式。默认值：`{width: '1.5vp', color: '#007DFF'}`。 | 103| enableKeyboardOnFocus | boolean | 否 | Search获焦时，是否主动拉起软键盘。默认值：`true`。 | 104| hideSelectionMenu | boolean | 否 | 是否不弹出系统文本选择菜单。<br />设置为true时，单击输入框光标、长按输入框、双击输入框、三击输入框或者右键输入框，不弹出系统文本选择菜单。设置为false时，弹出系统文本选择菜单。默认值：`false`。 | 105| type | [SearchType](ts-basic-components-search.md#searchtype11枚举说明) | 否 | 输入框类型。默认值：`SearchType.Normal`。 | 106| maxLength | number | 否 | 设置文本的最大输入字符数。默认不设置最大输入字符数限制。到达文本最大字符限制，将无法继续输入字符。默认值：`-1`; | 107| enterKeyType | [EnterKeyType](ts-basic-components-textinput.md#enterkeytype枚举说明) | 否 | 输入法回车键类型。默认值：`EnterKeyType.Search`。 | 108| decoration | [TextDecorationOptions](ts-types.md#textdecorationoptions12对象说明) | 否 | 文本装饰线对象。默认值：`{type: TextDecorationType.None, color: Color.Black, style: TextDecorationStyle.SOLID}`。 | 109| letterSpacing | number \| string \| [Resource](ts-types.md#resource) | 否 | 设置文本字符间距。正数拉开字符距离，负数则拉近字符距离。浮点数默认值为0.0，单位为物理像素px。若输入类型非number且无法解析为数字，则使用默认值。 | 110| fontFeature | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置文字特性效果，比如数字等宽的特性。<br />格式为：normal \| \<feature-tag-value\><br />\<feature-tag-value\>的格式为：\<string\> \[ \<integer\> \| on \| off ]<br />\<feature-tag-value\>的个数可以有多个，中间用','隔开。<br />例如，使用等宽数字的输入格式为："ss01" on。默认值为`undefined`。 | 111| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 文本选中底板颜色。默认为20%不透明度。 | 112| inputFilter | [InputFilterParams](#inputfilterparams) | 否 | 通过正则表达式设置输入过滤器。匹配表达式的输入允许显示，不匹配的输入将被过滤。仅支持单个字符匹配，不支持字符串匹配。默认值为`undefined`。<br /> -value: 正则表达式。 <br /> -error: 正则匹配失败时，返回被过滤的内容。 | 113| textIndent | [Dimension](ts-types.md#dimension10) | 否 | 首行文本缩进。默认值：`0`。 | 114| minFontSize | number \| string \| [Resource](ts-types.md#resource) | 否 | 设置文本最小显示字号。需要配合maxFontSize以及布局大小限制使用，单独设置不生效。默认值为`undefined`。 | 115| maxFontSize | number \| string \| [Resource](ts-types.md#resource) | 否 | 设置文本最大显示字号。需要配合minFontSize以及布局大小限制使用，单独设置不生效。默认值为`undefined`。 | 116| editMenuOptions | [EditMenuOptions](ts-text-common.md#editmenuoptions) | 否 | 设置自定义菜单扩展项，允许用户设置扩展项的文本内容、图标、回调方法。默认值为`undefined`。 | 117| enablePreviewText | boolean | 否 | 是否开启输入预上屏。默认值：`true`。 <br/> 需要配合开启输入法的预上屏功能。预上屏内容定义为文字暂存态，目前不支持文字拦截功能，因此该值为true时不触发onWillInsert、onDidInsert回调。 | 118| enableHapticFeedback | boolean | 否 | 是否开启触控反馈。默认值：`true`。 | 119| onSubmit | Callback<string> \| [SearchSubmitCallback](ts-basic-components-search.md#searchsubmitcallback14) | 否 | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。默认值为`undefined`。 | 120| onChange | [EditableTextOnChangeCallback](ts-text-common.md#editabletextonchangecallback12) | 否 | 输入内容发生变化时，触发该回调。默认值为`undefined`。 | 121| onCopy | Callback<string> | 否 | 进行复制操作时，触发该回调。默认值为`undefined`。 | 122| onCut | Callback<string> | 否 | 进行剪切操作时，触发该回调。默认值为`undefined`。 | 123| onPaste | [OnPasteCallback](#onpastecallback) | 否 | 进行粘贴操作时，触发该回调。默认值为`undefined`。 | 124| onTextSelectionChange | [OnTextSelectionChangeCallback](#ontextselectionchangecallback) | 否 | 文本选择的位置发生变化或编辑状态下光标位置发生变化时，触发该回调。默认值为`undefined`。 | 125| onContentScroll | [OnContentScrollCallback](#oncontentscrollcallback) | 否 | 文本内容滚动时，触发该回调。默认值为`undefined`。 | 126| onEditChange | Callback<boolean> | 否 | 输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。isEditing为true表示正在输入。默认值为`undefined`。 | 127| onWillInsert | Callback<[InsertValue](ts-text-common.md#insertvalue12对象说明), boolean> | 否 | 在将要输入时，触发该回调。默认值为`undefined`。 | 128| onDidInsert | Callback<[InsertValue](ts-text-common.md#insertvalue12对象说明)> | 否 | 在输入完成时，触发该回调。默认值为`undefined`。 | 129| onWillDelete | Callback<[DeleteValue](ts-text-common.md#deletevalue12对象说明), boolean> | 否 | 在将要删除时，触发该回调。默认值为`undefined`。 | 130| onDidDelete | Callback<[DeleteValue](ts-text-common.md#deletevalue12对象说明)> | 否 | 在删除完成时，触发该回调。默认值为`undefined`。 | 131 132## OperationParams 133 134AtomicServiceSearch中“功能区”的初始化参数。 135 136**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 137 138**系统能力：** SystemCapability.ArkUI.ArkUI.Full 139 140| 名称 | 类型 | 必填 | 说明 | 141| ------------- | --------------- | ---------------------------- | ---- | 142| auxiliaryItem | [OperationOption ](ohos-arkui-advanced-SubHeader.md#operationoption)| 否 | 附属于搜索区（右侧）的功能位。默认值为`undefined`。 | 143| independentItem | [OperationOption ](ohos-arkui-advanced-SubHeader.md#operationoption)| 否 | 独立于搜索区（右侧）的功能位。默认值为`undefined`。 | 144 145 146## InputFilterParams 147 148搜索框过滤设置项。 149 150**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 151 152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 153 154| 名称 | 类型 | 必填 | 说明 | 155| ---------------- | ---------------- | ---- | ---------------------------------- | 156| inputFilterValue | [ResourceStr](ts-types.md#resourcestr) | 是 | 正则表达式。 | 157| error | Callback<string> | 否 | 正则匹配失败时，返回被过滤的内容。默认值为`undefined`。 | 158 159## SearchButtonParams 160 161搜索框末尾搜索按钮设置项。 162 163**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 164 165**系统能力：** SystemCapability.ArkUI.ArkUI.Full 166 167| 名称 | 类型 | 必填 | 说明 | 168| ----------------- | ------------------- | ---- | ------------------------------------------------------------ | 169| searchButtonValue | [ResourceStr](ts-types.md#resourcestr) | 是 | 搜索框末尾搜索按钮文本内容。 | 170| options | [SearchButtonOptions](ts-basic-components-search.md#searchbuttonoptions10对象说明) | 否 | 配置搜索框文本样式。默认值：`{fontSize: '16fp',fontColor: '#ff3f97e9'}`。 | 171 172 173## MenuAlignParams 174 175下拉按钮与下拉菜单间的对齐方式设置项。 176 177**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 178 179**系统能力：** SystemCapability.ArkUI.ArkUI.Full 180 181| 名称 | 类型 | 必填 | 说明 | 182| --------- | ------------- | ---- | ------------------------------------------------------------ | 183| alignType | [MenuAlignType](ts-basic-components-select.md#menualigntype10枚举说明) | 是 | 对齐方式类型。默认值：`MenuAlignType.START`。 | 184| offset | [Offset](ts-types.md#offset) | 否 | 按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。默认值：`{dx: 0, dy: 0}`。 | 185 186 187## OnSelectCallback 188 189type OnSelectCallback = (index: number, selectValue: string) => void 190 191下拉菜单选中某一项的回调。 192 193**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 194 195**系统能力：** SystemCapability.ArkUI.ArkUI.Full 196 197**参数：** 198 199| 参数名 | 类型 | 必填 | 说明 | 200| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 201| index | number | 是 | 选中项的索引，索引从0开始。 | 202| selectValue | string | 是 | 选中项的值。 | 203 204 205## OnPasteCallback 206 207type OnPasteCallback = (pasteValue: string, event: PasteEvent) => void 208 209进行粘贴操作时，触发该回调。 210 211**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 212 213**系统能力：** SystemCapability.ArkUI.ArkUI.Full 214 215**参数：** 216 217| 参数名 | 类型 | 必填 | 说明 | 218| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 219| pasteValue | string | 是 | 要粘贴的文本内容。 | 220| event | [PasteEvent](ts-basic-components-richeditor.md#pasteevent) | 是 | 用户自定义粘贴事件。 | 221 222 223## OnTextSelectionChangeCallback 224 225type OnTextSelectionChangeCallback = (selectionStart: number, selectionEnd: number) => void 226 227文本选择的位置发生变化或编辑状态下光标位置发生变化时，触发该回调。 228 229**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 230 231**系统能力：** SystemCapability.ArkUI.ArkUI.Full 232 233**参数：** 234 235| 参数名 | 类型 | 必填 | 说明 | 236| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 237| selectionStart | number | 是 | 文本选择区域的起始位置。 | 238| selectionEnd | number | 是 | 文本选择区域的结束位置。 | 239 240 241## OnContentScrollCallback 242 243type OnContentScrollCallback = (totalOffsetX: number, totalOffsetY: number) => void 244 245文本内容滚动时，触发该回调。 246 247**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 248 249**系统能力：** SystemCapability.ArkUI.ArkUI.Full 250 251**参数：** 252 253| 参数名 | 类型 | 必填 | 说明 | 254| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 255| totalOffsetX | number | 是 | 文本左上角横坐标相较于整个内容输入区左上角横坐标的偏移量。 | 256| totalOffsetY | number | 是 | 文本左上角纵坐标相较于整个内容输入区左上角纵坐标的偏移量。 | 257 258 259## 示例 260 261### 示例1（AtomicServiceSearch添加选择区） 262该示例通过select参数为AtomicServiceSearch组件添加左侧选择区。 263 264```ts 265import { AtomicServiceSearch } from '@kit.ArkUI'; 266 267@Entry 268@Component 269struct Index { 270 build() { 271 Column({ space: 6 }) { 272 Text('AtomicServiceSearch添加选择区').alignSelf(ItemAlign.Start).decoration({ 273 type: TextDecorationType.Underline, 274 color: Color.Black, 275 style: TextDecorationStyle.SOLID 276 }).margin({top:20, bottom: 20}) 277 278 AtomicServiceSearch({ 279 select: { 280 options: [ 281 { value: 'Select1', icon: $r("app.media.sweep") }, // 自定义资源 282 { value: 'Select2', icon: $r("app.media.sweep") }, // 自定义资源 283 { value: 'Select3', icon: $r("app.media.sweep") }, // 自定义资源 284 { value: 'Select4', icon: $r("app.media.sweep") } // 自定义资源 285 ], 286 selected: -1, 287 selectValue: 'Select1', 288 onSelect: (index: number, selectValue: string) => { // 自定义事件 289 if (index === 0) { 290 this.alert(`index: ${index}, selectValue: ${selectValue}`); 291 } else if (index === 1) { 292 this.alert(`index: ${index}, selectValue: ${selectValue}`); 293 } else if (index === 2) { 294 this.alert(`index: ${index}, selectValue: ${selectValue}`); 295 } else if (index === 3) { 296 this.alert(`index: ${index}, selectValue: ${selectValue}`); 297 } 298 }, 299 } 300 }) 301 }.padding({ left: 16, right: 16 }) 302 } 303 304 private alert(message: string): void { 305 this.getUIContext().showAlertDialog({ message: message }); 306 } 307} 308``` 309 310 311 312 313 314### 示例2（AtomicServiceSearch添加功能位） 315该示例通过operation参数为AtomicServiceSearch组件添加右侧功能位。 316 317```ts 318import { AtomicServiceSearch } from '@kit.ArkUI'; 319 320@Entry 321@Component 322struct Index { 323 build() { 324 Column({ space: 6 }) { 325 Text('AtomicServiceSearch添加功能位').alignSelf(ItemAlign.Start).decoration({ 326 type: TextDecorationType.Underline, 327 color: Color.Black, 328 style: TextDecorationStyle.SOLID 329 }).margin({top:20, bottom: 20}) 330 331 AtomicServiceSearch({ 332 operation: { 333 // 附属于Search组件的功能位 334 auxiliaryItem: { 335 value: $r("app.media.sweep"), // 自定义资源 336 action: () => { 337 this.alert('扫一扫'); // 自定义事件 338 } 339 }, 340 // 独立于Search组件的功能位 341 independentItem: { 342 value: $r("app.media.dingding"), // 自定义资源 343 action: () => { 344 this.alert('通知'); // 自定义事件 345 } 346 } 347 } 348 }) 349 }.padding({ left: 16, right: 16 }) 350 } 351 352 private alert(message: string): void { 353 this.getUIContext().showAlertDialog({ message: message }); 354 } 355} 356``` 357 358 359 360 361 362### 示例3（AtomicServiceSearch添加选择区及功能位） 363该示例中为AtomicServiceSearch组件同时添加左侧选择区和右侧功能位。 364 365```ts 366import { AtomicServiceSearch } from '@kit.ArkUI'; 367 368@Entry 369@Component 370struct Index { 371 build() { 372 Column({ space: 6 }) { 373 Text('AtomicServiceSearch+选择区+功能位').alignSelf(ItemAlign.Start).decoration({ 374 type: TextDecorationType.Underline, 375 color: Color.Black, 376 style: TextDecorationStyle.SOLID 377 }).margin({top:20, bottom: 20}) 378 379 AtomicServiceSearch({ 380 select: { 381 options: [ 382 { value: 'Select1', icon: $r("app.media.sweep") }, // 自定义资源 383 { value: 'Select2', icon: $r("app.media.sweep") }, // 自定义资源 384 { value: 'Select3', icon: $r("app.media.sweep") }, // 自定义资源 385 { value: 'Select4', icon: $r("app.media.sweep") } // 自定义资源 386 ], 387 selected: -1, 388 selectValue: 'Select1', 389 onSelect: (index: number, selectValue:string) => { 390 if (index === 0) { 391 this.alert(`index: ${index}, selectValue: ${selectValue}`); 392 } else if (index === 1) { 393 this.alert(`index: ${index}, selectValue: ${selectValue}`); 394 } else if (index === 2) { 395 this.alert(`index: ${index}, selectValue: ${selectValue}`); 396 } else if (index === 3) { 397 this.alert(`index: ${index}, selectValue: ${selectValue}`); 398 } 399 }, 400 }, 401 operation: { 402 auxiliaryItem: { 403 value: $r("app.media.sweep"), // 自定义资源 404 action: () => { 405 this.alert('扫一扫'); // 自定义事件 406 } 407 }, 408 independentItem: { 409 value: $r("app.media.dingding"), // 自定义资源 410 action: () => { 411 this.alert('通知'); // 自定义事件 412 } 413 } 414 } 415 }) 416 }.padding({ left: 16, right: 16 }) 417 } 418 419 private alert(message: string): void { 420 this.getUIContext().showAlertDialog({ message: message }); 421 } 422} 423``` 424 425 426 427 428 429### 示例4（search回调事件） 430该示例通过onWillInsert、onDidInsert、onWillDelete、onDidDelete接口实现了插入和删除的功能。 431通过onSubmit接口实现了搜索区内容提交的功能。 432通过onChange接口实现了监听搜索区内容变化的功能。 433 434```ts 435import { AtomicServiceSearch } from '@kit.ArkUI'; 436 437@Entry 438@Component 439struct Index { 440 @State insertValue: string = ""; 441 @State deleteValue: string = ""; 442 @State insertOffset: number = 0; 443 @State deleteOffset: number = 0; 444 @State deleteDirection: number = 0; 445 @State startIndex: number = 0; 446 @State endIndex: number = 0; 447 @State offsetX: number = 0; 448 @State offsetY: number = 0; 449 @State changeValue: string = ''; 450 @State value: string = 'false'; 451 @State submitValue: string = ''; 452 @State text: string = 'Search editMenuOptions'; 453 454 build() { 455 Column({ space: 6 }) { 456 Text('AtomicServiceSearch绑定事件').alignSelf(ItemAlign.Start).decoration({ 457 type: TextDecorationType.Underline, 458 color: Color.Black, 459 style: TextDecorationStyle.SOLID 460 }).margin({top:20, bottom: 20}) 461 462 Column({ space: 6 }) { 463 Text('editing: ' + this.value).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 464 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 465 Text('onSubmit:' + this.submitValue).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 466 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 467 Text('onChange:' + this.changeValue).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 468 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 469 Text('offset x:' + this.offsetX + ' y:' + this.offsetY).width('100%').height(25).borderRadius(15).padding({ left: 15 }) 470 .backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE }); 471 Text("insertValue:" + this.insertValue + " insertOffset:" + this.insertOffset).width('100%').height(25) 472 .borderRadius(15).padding({ left: 15 }).backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1) 473 .textOverflow({ overflow: TextOverflow.MARQUEE }); 474 Text("deleteValue:" + this.deleteValue + " deleteOffset:" + this.deleteOffset).width('100%').height(25) 475 .borderRadius(15).padding({ left: 15 }).backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1) 476 .textOverflow({ overflow: TextOverflow.MARQUEE }); 477 Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).width('100%').height(25) 478 .borderRadius(15).padding({ left: 15 }).backgroundColor('rgba(0, 0, 0, 0.1)').maxLines(1) 479 .textOverflow({ overflow: TextOverflow.MARQUEE }); 480 AtomicServiceSearch({ 481 select: { 482 options: [ 483 { value: 'Select1', icon: $r("app.media.sweep") }, 484 { value: 'Select2', icon: $r("app.media.sweep") }, 485 { value: 'Select3', icon: $r("app.media.sweep") }, 486 { value: 'Select4', icon: $r("app.media.sweep") } 487 ], 488 selected: -1, 489 selectValue: 'Select1', 490 onSelect: (index: number) => { 491 if (index === 0) { 492 this.alert('Select1'); 493 } else if (index === 1) { 494 this.alert('Select2'); 495 } else if (index === 2) { 496 this.alert('Select3'); 497 } else if (index === 3) { 498 this.alert('Select4'); 499 } 500 }, 501 }, 502 search: { 503 onSubmit: (value: string) => { 504 this.submitValue = value 505 }, 506 onChange: (value: string) => { 507 this.changeValue = value 508 }, 509 onCopy: () => { 510 this.alert('onCopy'); 511 }, 512 onCut: () => { 513 this.alert('onCut'); 514 }, 515 onPaste: () => { 516 this.alert('onPaste'); 517 }, 518 onTextSelectionChange: (selectionStart: number, selectionEnd: number) => { 519 this.startIndex = selectionStart 520 this.endIndex = selectionEnd 521 }, 522 onContentScroll: (totalOffsetX: number, totalOffsetY: number) => { 523 this.offsetX = totalOffsetX 524 this.offsetY = totalOffsetY 525 }, 526 onEditChange: (data: boolean) => { 527 this.value = data ? 'true' : 'false' 528 }, 529 onWillInsert: (info: InsertValue) => { 530 this.insertValue = info.insertValue 531 return true; 532 }, 533 onDidInsert: (info: InsertValue) => { 534 this.insertOffset = info.insertOffset 535 }, 536 onWillDelete: (info: DeleteValue) => { 537 this.deleteValue = info.deleteValue 538 info.direction 539 return true; 540 }, 541 onDidDelete: (info: DeleteValue) => { 542 this.deleteOffset = info.deleteOffset 543 this.deleteDirection = info.direction 544 } 545 } 546 }) 547 } 548 }.padding({ left: 16, right: 16 }) 549 } 550 551 private alert(message: string): void { 552 this.getUIContext().showAlertDialog({ message: message }); 553 } 554} 555``` 556 557 558 559 560### 示例5（AtomicServiceSearch修改样式） 561该示例通过search、select、value、placeholder参数实现了AtomicServiceSearch组件样式的自定义。 562 563```ts 564import { AtomicServiceSearch, SearchParams, SelectParams } from '@kit.ArkUI'; 565 566@Entry 567@Component 568struct Index { 569 @State private placeholder: string = 'Type to Search...'; 570 @State private defaultValue: string = 'default'; 571 @State private search?: SearchParams = {}; 572 @State private select?: SelectParams = { 573 options: [ 574 { value: 'Select1', icon: $r("app.media.sweep") }, 575 { value: 'Select2', icon: $r("app.media.sweep") }, 576 { value: 'Select3', icon: $r("app.media.sweep") }, 577 { value: 'Select4', icon: $r("app.media.sweep") } 578 ], 579 selected: -1, 580 selectValue: 'Select1', 581 onSelect: (index: number) => { 582 if (index === 0) { 583 this.alert('Select1'); 584 } else if (index === 1) { 585 this.alert('Select2'); 586 } else if (index === 2) { 587 this.alert('Select3'); 588 } else if (index === 3) { 589 this.alert('Select4'); 590 } 591 } 592 }; 593 594 build() { 595 Column({ space: 8 }) { 596 Text('AtomicServiceSearch修改样式').alignSelf(ItemAlign.Start).decoration({ 597 type: TextDecorationType.Underline, 598 color: Color.Black, 599 style: TextDecorationStyle.SOLID 600 }).margin({ top: 20, bottom: 20 }) 601 602 AtomicServiceSearch({ 603 value: this.defaultValue, 604 placeholder: this.placeholder, 605 select: this.select, 606 search: this.search, 607 operation: { 608 independentItem: { 609 value: $r(`app.media.dingding`), 610 action: () => { 611 this.alert('通知'); 612 } 613 } 614 } 615 }) 616 Button("修改placeholder") 617 .width('100%') 618 .type(ButtonType.Normal) 619 .borderRadius(20) 620 .onClick(() => { 621 if (this.placeholder === 'Search...') { 622 this.placeholder = 'Type to Search...'; 623 } else { 624 this.placeholder = 'Search...'; 625 } 626 }); 627 Button("修改defaultValue") 628 .width('100%') 629 .type(ButtonType.Normal) 630 .borderRadius(20) 631 .onClick(() => { 632 if (this.defaultValue === 'value') { 633 this.defaultValue = 'defaultValue'; 634 } else { 635 this.defaultValue = 'value'; 636 } 637 }); 638 Button("修改Select样式") 639 .width('100%') 640 .type(ButtonType.Normal) 641 .borderRadius(20) 642 .onClick(() => { 643 this.select = { 644 options: [ 645 { value: '选项1', icon: $r("app.media.dingding") }, 646 { value: '选项2', icon: $r("app.media.dingding") }, 647 ], 648 selected: -1, 649 selectValue: '选项1', 650 onSelect: (index: number) => { 651 if (index === 0) { 652 this.alert('选项1'); 653 } else if (index === 1) { 654 this.alert('选项2'); 655 } 656 } 657 }; 658 }); 659 660 Button("修改Search样式") 661 .width('100%') 662 .type(ButtonType.Normal) 663 .borderRadius(20) 664 .onClick(() => { 665 this.search = { 666 componentBackgroundColor: '#e0eee8' 667 } 668 }); 669 }.padding({ left: 16, right: 16 }) 670 } 671 672 private alert(message: string): void { 673 this.getUIContext().showAlertDialog({ message: message }); 674 } 675} 676``` 677 678 679 680 681 682 683### 示例6（通过controller实现光标位置的设置） 684该示例通过controller参数实现了光标位置的设置、选择指定区域中的内容及关闭编辑状态的功能。 685 686 687```ts 688import { AtomicServiceSearch } from '@kit.ArkUI'; 689 690@Entry 691@Component 692struct Index { 693 controller: SearchController = new SearchController(); 694 695 build() { 696 Column({ space : 10 }) { 697 Text('通过controller实现光标位置的设置').alignSelf(ItemAlign.Start).decoration({ 698 type: TextDecorationType.Underline, 699 color: Color.Black, 700 style: TextDecorationStyle.SOLID 701 }).margin({top:20, bottom: 20}) 702 703 AtomicServiceSearch( 704 { 705 value: 'Default Value', 706 placeholder: 'Type to Search...', 707 controller: this.controller, 708 search: { 709 searchButton: { 710 searchButtonValue: 'SEARCH', 711 options: { fontSize: '12fp', fontColor: '#ff0e1216' } 712 } 713 } 714 }, 715 ); 716 Button('caretPosition to 1').onClick(() => { 717 this.controller.caretPosition(1); 718 }).width('100%') 719 Button('stopEditing').onClick(() => { 720 this.controller.stopEditing(); 721 }).width('100%') 722 Button('Selection [0,3]').onClick(() => { 723 this.controller.setTextSelection(0, 3) 724 }).width('100%') 725 }.padding({ left: 16, right: 16 }) 726 } 727 728 public alert(message: string): void { 729 this.getUIContext().showAlertDialog({ message: message }); 730 } 731} 732``` 733 734 735 736 737 738 739### 示例7（设置输入法回车键类型） 740该示例通过enterKeyType属性实现了动态切换输入法回车键的效果。 741 742```ts 743import { AtomicServiceSearch } from '@kit.ArkUI'; 744 745@Entry 746@Component 747struct Index { 748 @State enterTypes: Array<EnterKeyType> = [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next, EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE] 749 @State index: number = 0 750 751 build() { 752 Column({ space : 10 }) { 753 Text('输入法回车键类型为搜索').alignSelf(ItemAlign.Start).decoration({ 754 type: TextDecorationType.Underline, 755 color: Color.Black, 756 style: TextDecorationStyle.SOLID 757 }).margin({top:20, bottom: 20}) 758 759 AtomicServiceSearch({ 760 placeholder: '输入法回车键类型为搜索', 761 search: { 762 enterKeyType: this.enterTypes[this.index] 763 } 764 }) 765 766 Button('改变EnterKeyType').onClick(() => { 767 this.index = (this.index + 1) % this.enterTypes.length; 768 }).width('100%') 769 770 }.padding({ left: 16, right: 16 }) 771 } 772 773 public alert(message: string): void { 774 this.getUIContext().showAlertDialog({ message: message }); 775 } 776} 777``` 778 779 780 781 782 783### 示例8（设置文字特性效果） 784该示例通过fontFeature属性实现了文本在不同文字特性下的展示效果。 785 786```ts 787import { AtomicServiceSearch } from '@kit.ArkUI'; 788 789@Entry 790@Component 791struct Index { 792 build() { 793 Column({ space : 10 }) { 794 Text('设置文字特性效果').alignSelf(ItemAlign.Start).decoration({ 795 type: TextDecorationType.Underline, 796 color: Color.Black, 797 style: TextDecorationStyle.SOLID 798 }).margin({top:20, bottom: 20}) 799 800 AtomicServiceSearch({ 801 value: 'This is ss01 on : 0123456789', 802 search: { 803 fontFeature: "\"ss012\" on" 804 } 805 }); 806 807 AtomicServiceSearch({ 808 value: 'This is ss01 off : 0123456789', 809 search: { 810 fontFeature: "\"ss01\" off" 811 } 812 }); 813 }.padding({ left: 16, right: 16 }) 814 } 815 816 public alert(message: string): void { 817 this.getUIContext().showAlertDialog({ message: message }); 818 } 819} 820``` 821 822 823 824 825 826### 示例9（设置文本自适应） 827该示例通过minFontSize、maxFontSize属性展示了文本自适应字号的效果。 828 829```ts 830import { AtomicServiceSearch } from '@kit.ArkUI'; 831 832@Entry 833@Component 834struct Index { 835 build() { 836 Column({ space : 10 }) { 837 Text('设置文本自适应').alignSelf(ItemAlign.Start).decoration({ 838 type: TextDecorationType.Underline, 839 color: Color.Black, 840 style: TextDecorationStyle.SOLID 841 }).margin({top:20, bottom: 20}) 842 843 AtomicServiceSearch({ 844 value: 'This is the text without the adaptive font', 845 }).width('80%').height(40).borderWidth(1).borderRadius(20) 846 847 AtomicServiceSearch({ 848 value: 'This is the text without the adaptive font', 849 search: { 850 minFontSize: 4, 851 maxFontSize: 40 852 } 853 }).width('80%').height(40).borderWidth(1).borderRadius(20) 854 }.padding({ left: 16, right: 16 }) 855 } 856 857 public alert(message: string): void { 858 this.getUIContext().showAlertDialog({ message: message }); 859 } 860} 861``` 862 863 864 865 866 867### 示例10（文本扩展自定义菜单） 868该示例通过editMenuOptions接口实现了文本设置自定义菜单扩展项的文本内容、图标以及回调的功能。 869 870```ts 871import { AtomicServiceSearch } from '@kit.ArkUI'; 872 873@Entry 874@Component 875struct Index { 876 onCreateMenu = (menuItems: Array<TextMenuItem>) => { 877 let item1: TextMenuItem = { 878 content: 'custom1', 879 icon: $r('app.media.startIcon'), 880 id: TextMenuItemId.of('custom1'), 881 } 882 let item2: TextMenuItem = { 883 content: 'custom2', 884 id: TextMenuItemId.of('custom2'), 885 icon: $r('app.media.startIcon'), 886 } 887 menuItems.push(item1) 888 menuItems.unshift(item2) 889 return menuItems 890 } 891 892 onMenuItemClick = (menuItem: TextMenuItem, textRange: TextRange) => { 893 if (menuItem.id.equals(TextMenuItemId.of("custom2"))) { 894 console.log("拦截 id: custom2 start:" + textRange.start + "; end:" + textRange.end) 895 return true 896 } 897 if (menuItem.id.equals(TextMenuItemId.COPY)) { 898 console.log("拦截 COPY start:" + textRange.start + "; end:" + textRange.end) 899 return true 900 } 901 if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) { 902 console.log("不拦截 SELECT_ALL start:" + textRange.start + "; end:" + textRange.end) 903 return false 904 } 905 return false 906 } 907 908 @State editMenuOptions: EditMenuOptions = { 909 onCreateMenu: this.onCreateMenu, onMenuItemClick: this.onMenuItemClick 910 } 911 912 build() { 913 Column({ space : 10 }) { 914 Text('文本扩展自定义菜单').alignSelf(ItemAlign.Start).decoration({ 915 type: TextDecorationType.Underline, 916 color: Color.Black, 917 style: TextDecorationStyle.SOLID 918 }).margin({top:20, bottom: 20}) 919 920 AtomicServiceSearch({ 921 value:'Default input', 922 search: { 923 editMenuOptions : this.editMenuOptions 924 } 925 }) 926 }.padding({ left: 16, right: 16 }) 927 } 928 929 public alert(message: string): void { 930 this.getUIContext().showAlertDialog({ message: message }); 931 } 932} 933``` 934 935 936 937 938 939 940 941### 示例11（设置文本水平对齐/光标样式/选中背景色） 942该示例通过textAlign、caretStyle、selectedBackgroundColor属性展示如何设置文本的水平对齐、光标样式和选中背景色。 943 944```ts 945import { AtomicServiceSearch } from '@kit.ArkUI'; 946 947@Entry 948@Component 949struct Index { 950 build() { 951 Column() { 952 Text('设置文本水平对齐/光标样式/选中背景色').alignSelf(ItemAlign.Start).decoration({ 953 type: TextDecorationType.Underline, 954 color: Color.Black, 955 style: TextDecorationStyle.SOLID 956 }).margin({top:20, bottom: 20}) 957 958 AtomicServiceSearch({ 959 value: 'Search textAlign sample', 960 search: { 961 textAlign: TextAlign.Center, 962 caretStyle: { width: 3, color: Color.Green }, 963 selectedBackgroundColor: Color.Gray 964 } 965 }) 966 }.padding({ left: 16, right: 16 }) 967 } 968 969 public alert(message: string): void { 970 this.getUIContext().showAlertDialog({ message: message }); 971 } 972} 973``` 974 975 976 977 978 979### 示例12（对输入的文本进行过滤） 980该示例通过inputFilter属性展示如何对输入的文本进行内容的过滤，以限制输入内容。 981 982```ts 983import { AtomicServiceSearch } from '@kit.ArkUI'; 984 985@Entry 986@Component 987struct Index { 988 @State filterValue: string = ''; 989 990 build() { 991 Column() { 992 Column({ space: 10 }) { 993 Text('对输入的文本进行过滤').alignSelf(ItemAlign.Start).decoration({ 994 type: TextDecorationType.Underline, 995 color: Color.Black, 996 style: TextDecorationStyle.SOLID 997 }).margin({top:20, bottom: 20}) 998 AtomicServiceSearch({ 999 placeholder: 'please enter...', 1000 search: { 1001 inputFilter: { 1002 inputFilterValue : '[a-z]', 1003 error: (filterValue: string) => {this.filterValue = filterValue} 1004 } 1005 } 1006 }) 1007 Text('Filter:' + this.filterValue).alignSelf(ItemAlign.Start) 1008 1009 } 1010 }.padding({ left: 16, right: 16 }) 1011 } 1012 1013 public alert(message: string): void { 1014 this.getUIContext().showAlertDialog({ message: message }); 1015 } 1016} 1017``` 1018 1019 1020
