1# Search 2 3搜索框组件，适用于浏览器的搜索内容输入框等应用场景。 4 5> **说明：** 6> 7> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 子组件 10 11无 12 13## 接口 14 15Search(options?: { value?: string, placeholder?: ResourceStr, icon?: string, controller?: SearchController }) 16 17**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数:** 22 23| 参数名 | 类型 | 必填 | 说明 | 24| ----------- | ------------- | ---- | ------------- | 25| value | string | 否 | 设置当前显示的搜索文本内容。<br />从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 26| placeholder | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置无输入时的提示文本。 | 27| icon | string | 否 | 设置搜索图标路径，默认使用系统搜索图标。<br/>**说明：** <br/>icon的数据源支持本地图片和网络图片。<br/>- 支持的图片格式包括png、jpg、bmp、svg、gif、pixelmap和heif。<br/>- 支持Base64字符串。格式data:image/[png\|jpeg\|bmp\|webp\|heif];base64,[base64 data], 其中[base64 data]为Base64字符串数据。<br/>如果与属性searchIcon同时设置，则searchIcon优先。 | 28| controller | [SearchController](#searchcontroller) | 否 | 设置Search组件控制器。 | 29 30## 属性 31 32除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 33 34### searchButton 35 36searchButton(value: string, option?: SearchButtonOptions) 37 38设置搜索框末尾搜索按钮。 39 40点击搜索按钮，同时触发onSubmit与onClick回调。 41 42**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 43 44**系统能力：** SystemCapability.ArkUI.ArkUI.Full 45 46**参数：** 47 48| 参数名 | 类型 | 必填 | 说明 | 49| ------ | ----------------------------------------------------- | ---- | ---------------------------- | 50| value | string | 是 | 搜索框末尾搜索按钮文本内容。 | 51| option | [SearchButtonOptions](#searchbuttonoptions10对象说明) | 否 | 配置搜索框文本样式。<br />默认值：<br />{<br />fontSize: '16fp',<br />fontColor: '#ff3f97e9'<br />} | 52 53### placeholderColor 54 55placeholderColor(value: ResourceColor) 56 57设置placeholder文本颜色。 58 59**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63**参数：** 64 65| 参数名 | 类型 | 必填 | 说明 | 66| ------ | ------------------------------------------ | ---- | ------------------------------------------------ | 67| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | placeholder文本颜色。<br />默认值：'#99182431'。 | 68 69### placeholderFont 70 71placeholderFont(value?: Font) 72 73设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。当前支持'HarmonyOS Sans'字体和[注册自定义字体](../js-apis-font.md)。 74 75**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 76 77**系统能力：** SystemCapability.ArkUI.ArkUI.Full 78 79**参数：** 80 81| 参数名 | 类型 | 必填 | 说明 | 82| ------ | ------------------------ | ---- | --------------------- | 83| value | [Font](ts-types.md#font) | 否 | placeholder文本样式。 | 84 85### textFont 86 87textFont(value?: Font) 88 89设置搜索框内输入文本样式，包括字体大小，字体粗细，字体族，字体风格。目前仅支持默认字体族。 90 91**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 92 93**系统能力：** SystemCapability.ArkUI.ArkUI.Full 94 95**参数：** 96 97| 参数名 | 类型 | 必填 | 说明 | 98| ------ | ------------------------ | ---- | ---------------------- | 99| value | [Font](ts-types.md#font) | 否 | 搜索框内输入文本样式。 | 100 101### textAlign<sup>9+</sup> 102 103textAlign(value: TextAlign) 104 105设置文本在搜索框中的对齐方式。目前支持的对齐方式有：Start、Center、End。 106 107**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 108 109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 110 111**参数：** 112 113| 参数名 | 类型 | 必填 | 说明 | 114| ------ | ------------------------------------------- | ---- | ------------------------------------------------------ | 115| value | [TextAlign](ts-appendix-enums.md#textalign) | 是 | 文本在搜索框中的对齐方式。<br/>默认值：TextAlign.Start | 116 117### copyOption<sup>9+</sup> 118 119copyOption(value: CopyOptions) 120 121设置输入的文本是否可复制。设置CopyOptions.None时，当前Search中的文字无法被复制、剪切和帮写，仅支持粘贴。 122 123设置CopyOptions.None时，不允许拖拽。 124 125**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 126 127**系统能力：** SystemCapability.ArkUI.ArkUI.Full 128 129**参数：** 130 131| 参数名 | 类型 | 必填 | 说明 | 132| ------ | ------------------------------------------------ | ---- | ------------------------------------------------------------ | 133| value | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 是 | 输入的文本是否可复制。<br />默认值：CopyOptions.LocalDevice，支持设备内复制。 | 134 135### searchIcon<sup>10+</sup> 136 137searchIcon(value: IconOptions | SymbolGlyphModifier) 138 139设置左侧搜索图标样式。 140 141**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 142 143**系统能力：** SystemCapability.ArkUI.ArkUI.Full 144 145**参数：** 146 147| 参数名 | 类型 | 必填 | 说明 | 148| ------ | ------------------------------------- | ---- | ------------------ | 149| value | [IconOptions](#iconoptions10对象说明) \| [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 是 | 左侧搜索图标样式。<!--RP1--><br />浅色模式默认值：<br />{<br />size: '16vp',<br />color: '#99182431',<br />src: ' '<br />}<br />深色模式默认值：<br />{<br />size: '16vp',<br />color: '#99ffffff',<br />src: ' '<br />} <!--RP1End-->| 150 151### cancelButton<sup>10+</sup> 152 153cancelButton(value: CancelButtonOptions | CancelButtonSymbolOptions) 154 155设置右侧清除按钮样式。 156 157**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 158 159**系统能力：** SystemCapability.ArkUI.ArkUI.Full 160 161**参数：** 162 163| 参数名 | 类型 | 必填 | 说明 | 164| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 165| value | [CancelButtonOptions](#cancelbuttonoptions12对象说明) \| [CancelButtonSymbolOptions](#cancelbuttonsymboloptions12对象说明) | 是 | 右侧清除按钮样式。<br>默认值：<br />{<br/>style: CancelButtonStyle.INPUT,<br/>icon: {<br/>size: '16vp',<br/>color: '#99ffffff',<br/>src: ' '<br/>}<br/>}<br/>当style为CancelButtonStyle.CONSTANT时，默认显示清除样式。 | 166 167### fontColor<sup>10+</sup> 168 169fontColor(value: ResourceColor) 170 171设置输入文本的字体颜色。[文本通用属性](ts-universal-attributes-text-style.md)fontSize、fontStyle、fontWeight和fontFamily在[textFont](#textfont)属性中设置。 172 173**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 174 175**系统能力：** SystemCapability.ArkUI.ArkUI.Full 176 177**参数：** 178 179| 参数名 | 类型 | 必填 | 说明 | 180| ------ | ------------------------------------------ | ---- | ----------------------------------------------- | 181| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 输入文本的字体颜色。<br />默认值：'#FF182431'。 | 182 183### caretStyle<sup>10+</sup> 184 185caretStyle(value: CaretStyle) 186 187设置光标样式。 188 189**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 190 191**系统能力：** SystemCapability.ArkUI.ArkUI.Full 192 193**参数：** 194 195| 参数名 | 类型 | 必填 | 说明 | 196| ------ | ----------------------------------- | ---- | ------------------------------------------------------------ | 197| value | [CaretStyle](ts-text-common.md#caretstyle10) | 是 | 光标样式。<br />默认值：<br />{<br />width: '1.5vp',<br />color: '#007DFF'<br />} | 198 199> **说明：** 200> 从API version 12开始，此接口支持设置文本手柄颜色，光标和文本手柄颜色保持一致。 201 202### enableKeyboardOnFocus<sup>10+</sup> 203 204enableKeyboardOnFocus(value: boolean) 205 206设置Search通过点击以外的方式获焦时，是否主动拉起软键盘。 207 208从API version 10开始，获焦默认绑定输入法。 209 210**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 211 212**系统能力：** SystemCapability.ArkUI.ArkUI.Full 213 214**参数：** 215 216| 参数名 | 类型 | 必填 | 说明 | 217| ------ | ------- | ---- | ----------------------------------------------- | 218| value | boolean | 是 | Search获焦时，是否主动拉起软键盘。<br/>默认值：true。 | 219 220### selectionMenuHidden<sup>10+</sup> 221 222selectionMenuHidden(value: boolean) 223 224设置是否不弹出系统文本选择菜单。 225 226**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 227 228**系统能力：** SystemCapability.ArkUI.ArkUI.Full 229 230**参数：** 231 232| 参数名 | 类型 | 必填 | 说明 | 233| ------ | ------- | ---- | ------------------------------------------------------------ | 234| value | boolean | 是 | 是否不弹出系统文本选择菜单。<br />设置为true时，单击输入框光标、长按输入框、双击输入框、三击输入框或者右键输入框，不弹出系统文本选择菜单。<br />设置为false时，弹出系统文本选择菜单。<br />默认值：false | 235 236### customKeyboard<sup>10+</sup> 237 238customKeyboard(value: CustomBuilder, options?: KeyboardOptions) 239 240设置自定义键盘。 241 242当设置自定义键盘时，输入框激活后不会打开系统输入法，而是加载指定的自定义组件。 243 244自定义键盘的高度可以通过自定义组件根节点的height属性设置，宽度不可设置，使用系统默认值。 245 246自定义键盘采用覆盖原始界面的方式呈现，当没有开启避让模式或者输入框不需要避让的场景不会对应用原始界面产生压缩或者上提。 247 248自定义键盘无法获取焦点，但是会拦截手势事件。 249 250默认在输入控件失去焦点时，关闭自定义键盘，开发者也可以通过[stopEditing](#stopediting10)方法控制键盘关闭。 251 252如果设备支持拍摄输入，设置自定义键盘后，该输入框会不支持拍摄输入。 253 254当设置自定义键盘时，可以通过绑定[onKeyPrelme](ts-universal-events-key.md#onkeypreime12)事件规避物理键盘的输入。 255 256**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 257 258**系统能力：** SystemCapability.ArkUI.ArkUI.Full 259 260**参数：** 261 262| 参数名 | 类型 | 必填 | 说明 | 263| --------------------- | ------------------------------------------- | ---- | -------------------------------- | 264| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义键盘。 | 265| options<sup>12+</sup> | [KeyboardOptions](ts-basic-components-richeditor.md#keyboardoptions12) | 否 | 设置自定义键盘是否支持避让功能。 | 266 267### type<sup>11+</sup> 268 269type(value: SearchType) 270 271设置输入框类型。 272 273<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 274 275**系统能力：** SystemCapability.ArkUI.ArkUI.Full 276 277**参数：** 278 279| 参数名 | 类型 | 必填 | 说明 | 280| ------ | ----------------------------------- | ---- | -------------------------- | 281| value | [SearchType](#searchtype11枚举说明) | 是 | 输入框类型。<br/>默认值：SearchType.Normal | 282 283### maxLength<sup>11+</sup> 284 285maxLength(value: number) 286 287设置文本的最大输入字符数。默认不设置最大输入字符数限制。到达文本最大字符限制，将无法继续输入字符。 288 289**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 290 291**系统能力：** SystemCapability.ArkUI.ArkUI.Full 292 293**参数：** 294 295| 参数名 | 类型 | 必填 | 说明 | 296| ------ | ----------------------------------- | ---- | ---------------------- | 297| value | number | 是 | 文本的最大输入字符数。 | 298 299### enterKeyType<sup>12+</sup> 300 301enterKeyType(value: EnterKeyType) 302 303设置输入法回车键类型。 304 305**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 306 307**系统能力：** SystemCapability.ArkUI.ArkUI.Full 308 309**参数：** 310 311| 参数名 | 类型 | 必填 | 说明 | 312| ------ | ------------------------------------------------ | ---- | -------------------------------------------------- | 313| value | [EnterKeyType](ts-basic-components-textinput.md#enterkeytype枚举说明) | 是 | 输入法回车键类型。<br/>默认值：EnterKeyType.Search | 314 315### lineHeight<sup>12+</sup> 316 317lineHeight(value: number | string | Resource) 318 319设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，number类型时单位为fp。 320 321**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 322 323**系统能力：** SystemCapability.ArkUI.ArkUI.Full 324 325**参数：** 326 327| 参数名 | 类型 | 必填 | 说明 | 328| ------ | ------------------------------------------------------------ | ---- | ---------------- | 329| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本的文本行高。 | 330 331### decoration<sup>12+</sup> 332 333decoration(value: TextDecorationOptions) 334 335设置文本装饰线类型样式及其颜色。 336 337**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 338 339**系统能力：** SystemCapability.ArkUI.ArkUI.Full 340 341**参数：** 342 343| 参数名 | 类型 | 必填 | 说明 | 344| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 345| value | [TextDecorationOptions](ts-types.md#textdecorationoptions12对象说明) | 是 | 文本装饰线对象。<br />默认值：{<br/> type: TextDecorationType.None,<br/> color: Color.Black,<br/> style: TextDecorationStyle.SOLID <br/>} | 346 347### letterSpacing<sup>12+</sup> 348 349letterSpacing(value: number | string | Resource) 350 351设置文本字符间距。设置该值为百分比时，按默认值显示。设置该值为0时，按默认值显示。 352 353当取值为负值时，文字会发生压缩，负值过小时会将组件内容区大小压缩为0，导致无内容显示。 354 355**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 356 357**系统能力：** SystemCapability.ArkUI.ArkUI.Full 358 359**参数：** 360 361| 参数名 | 类型 | 必填 | 说明 | 362| ------ | -------------------------- | ---- | -------------- | 363| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本字符间距。 | 364 365### fontFeature<sup>12+</sup> 366 367fontFeature(value: string) 368 369设置文字特性效果，比如数字等宽的特性。 370 371格式为：normal \| \<feature-tag-value\> 372 373\<feature-tag-value\>的格式为：\<string\> \[ \<integer\> \| on \| off ] 374 375\<feature-tag-value\>的个数可以有多个，中间用','隔开。 376 377例如，使用等宽数字的输入格式为："ss01" on。 378 379**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 380 381**系统能力：** SystemCapability.ArkUI.ArkUI.Full 382 383**参数：** 384 385| 参数名 | 类型 | 必填 | 说明 | 386| ------ | ------ | ---- | -------------- | 387| value | string | 是 | 文字特性效果。 | 388 389Font Feature当前支持的属性见 [fontFeature属性列表](ts-basic-components-text.md#fontfeature12)。 390设置 Font Feature 属性，Font Feature 是 OpenType 字体的高级排版能力，如支持连字、数字等宽等特性，一般用在自定义字体中，其能力需要字体本身支持。 391更多 Font Feature 能力介绍可参考 https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop 和 https://sparanoid.com/lab/opentype-features/ 392 393### selectedBackgroundColor<sup>12+</sup> 394 395selectedBackgroundColor(value: ResourceColor) 396 397设置文本选中底板颜色。如果未设置不透明度，默认为20%不透明度。 398 399**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 400 401**系统能力：** SystemCapability.ArkUI.ArkUI.Full 402 403**参数：** 404 405| 参数名 | 类型 | 必填 | 说明 | 406| ------ | ------------------------------------------ | ---- | ------------------------------------------ | 407| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 文本选中底板颜色。<br/>默认为20%不透明度。 | 408 409### inputFilter<sup>12+</sup> 410 411inputFilter(value: ResourceStr, error?: Callback< string >) 412 413通过正则表达式设置输入过滤器。匹配表达式的输入允许显示，不匹配的输入将被过滤。仅支持单个字符匹配，不支持字符串匹配。 414 415设置inputFilter且输入的字符不为空字符，会导致设置输入框类型(即type接口)附带的文本过滤效果失效。 416 417**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 418 419**系统能力：** SystemCapability.ArkUI.ArkUI.Full 420 421**参数：** 422 423| 参数名 | 类型 | 必填 | 说明 | 424| ------ | -------------------------------------- | ---- | ---------------------------------- | 425| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 正则表达式。 | 426| error | Callback< string > | 否 | 正则匹配失败时，返回被过滤的内容。 | 427 428### textIndent<sup>12+</sup> 429 430textIndent(value: Dimension) 431 432设置首行文本缩进。 433 434**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 435 436**系统能力：** SystemCapability.ArkUI.ArkUI.Full 437 438**参数：** 439 440| 参数名 | 类型 | 必填 | 说明 | 441| ------ | ----------------------------------- | ---- | ---------------------------- | 442| value | [Dimension](ts-types.md#dimension10)| 是 | 首行文本缩进。<br/>默认值：0 | 443 444### minFontSize<sup>12+</sup> 445 446minFontSize(value: number | string | Resource) 447 448设置文本最小显示字号。 449 450需配合[maxFontSize](#maxfontsize12)以及布局大小限制使用，单独设置不生效。 451 452自适应字号生效时，fontSize设置不生效。 453 454**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 455 456**系统能力：** SystemCapability.ArkUI.ArkUI.Full 457 458**参数：** 459 460| 参数名 | 类型 | 必填 | 说明 | 461| ------ | ------------------------------------------------------------ | ---- | ------------------ | 462| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本最小显示字号。 | 463 464### maxFontSize<sup>12+</sup> 465 466maxFontSize(value: number | string | Resource) 467 468设置文本最大显示字号。 469 470需配合[minFontSize](#minfontsize12)以及布局大小限制使用，单独设置不生效。 471 472自适应字号生效时，fontSize设置不生效。 473 474**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 475 476**系统能力：** SystemCapability.ArkUI.ArkUI.Full 477 478**参数：** 479 480| 参数名 | 类型 | 必填 | 说明 | 481| ------ | ------------------------------------------------------------ | ---- | ------------------ | 482| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 文本最大显示字号。 | 483 484### editMenuOptions<sup>12+</sup> 485 486editMenuOptions(editMenu: EditMenuOptions) 487 488设置自定义菜单扩展项，允许用户设置扩展项的文本内容、图标、回调方法。 489 490**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 491 492**系统能力：** SystemCapability.ArkUI.ArkUI.Full 493 494**参数：** 495 496| 参数名 | 类型 | 必填 | 说明 | 497| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 498| editMenu | [EditMenuOptions](ts-text-common.md#editmenuoptions) | 是 | 扩展菜单选项。 | 499 500### enablePreviewText<sup>12+</sup> 501 502enablePreviewText(enable: boolean) 503 504设置是否开启输入预上屏。 505 506预上屏内容定义为文字暂存态，目前不支持文字拦截功能，因此不触发onWillInsert、onDidInsert、onWillDelete、onDidDelete回调。 507 508**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 509 510**系统能力：** SystemCapability.ArkUI.ArkUI.Full 511 512**参数：** 513 514| 参数名 | 类型 | 必填 | 说明 | 515| ------ | ------- | ---- | ---------------------------------- | 516| enable | boolean | 是 | 是否开启输入预上屏。<br/>默认值：true | 517 518> **说明：** 519> 520> 该接口在CAPI场景使用时下，默认关闭。可以在工程的module.json5中配置[metadata](../../../../application-dev/quick-start/module-structure.md#metadata对象内部结构)字段控制是否启用预上屏，配置如下： 521> ```json 522> "metadata": [ 523> { 524> "name": "can_preview_text", 525> "value": "true", 526> } 527> ] 528> ``` 529 530### enableHapticFeedback<sup>13+</sup> 531 532enableHapticFeedback(isEnabled: boolean) 533 534设置是否开启触控反馈。 535 536**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 537 538**系统能力：** SystemCapability.ArkUI.ArkUI.Full 539 540**参数：** 541 542| 参数名 | 类型 | 必填 | 说明 | 543| ------ | ------- | ---- | ---------------------------------- | 544| isEnabled | boolean | 是 | 是否开启触控反馈。<br/>默认值：true | 545 546> **说明：** 547> 548> 开启触控反馈时，需要在工程的module.json5中配置requestPermissions字段开启振动权限，配置如下： 549> ```json 550> "requestPermissions": [ 551> { 552> "name": "ohos.permission.VIBRATE", 553> } 554> ] 555> ``` 556 557## IconOptions<sup>10+</sup>对象说明 558 559**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 560 561**系统能力：** SystemCapability.ArkUI.ArkUI.Full 562 563| 名称 | 类型 | 必填 | 说明 | 564| ------ | ------------------------------------------ | ---- | ----------- | 565| size | [Length](ts-types.md#length) | 否 | 图标尺寸，不支持百分比。 | 566| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 图标颜色。 | 567| src | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标/图片源。 | 568 569## SearchButtonOptions<sup>10+</sup>对象说明 570 571**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 572 573**系统能力：** SystemCapability.ArkUI.ArkUI.Full 574 575| 名称 | 类型 | 必填 | 说明 | 576| --------- | ------------------------------------------ | ---- | ---------------- | 577| fontSize | [Length](ts-types.md#length) | 否 | 文本按钮字体大小，不支持百分比。 | 578| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 否 | 文本按钮字体颜色。 | 579 580## CancelButtonStyle<sup>10+</sup>枚举说明 581 582**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 583 584**系统能力：** SystemCapability.ArkUI.ArkUI.Full 585 586| 名称 | 说明 | 587| ----------------------- | ---------------- | 588| CONSTANT | 清除按钮常显样式。 | 589| INVISIBLE | 清除按钮常隐样式。 | 590| INPUT | 清除按钮输入样式。 | 591 592## SearchType<sup>11+</sup>枚举说明 593 594**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 595 596**系统能力：** SystemCapability.ArkUI.ArkUI.Full 597 598| 名称 | 值 | 说明 | 599| ------------------ | ------ | ------------- | 600| NORMAL | 0 | 基本输入模式。<br/>支持输入数字、字母、下划线、空格、特殊字符。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 601| NUMBER | 2 | 纯数字输入模式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 602| PHONE_NUMBER | 3 | 电话号码输入模式。<br/>支持输入数字、空格、+ 、-、*、#、(、)，长度不限。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 603| EMAIL | 5 | 邮箱地址输入模式。<br/>支持数字，字母，下划线、小数点、!、#、$、%、&、'、*、+、-、/、=、?、^、`、\{、\|、\}、~，以及@字符（只能存在一个@字符）。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 604| NUMBER_DECIMAL<sup>12+</sup> | 12 | 带小数点的数字输入模式。<br/>支持数字，小数点（只能存在一个小数点）。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 605| URL<sup>12+</sup> | 13 | 带URL的输入模式。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 606 607## CancelButtonOptions<sup>12+</sup>对象说明 608 609**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 610 611**系统能力：** SystemCapability.ArkUI.ArkUI.Full 612 613| 名称 | 类型 | 必填 | 说明 | 614| --------- | ------------------------------------------ | ---- | ---------------- | 615| style | [CancelButtonStyle](#cancelbuttonstyle10枚举说明) | 否 | 右侧清除按钮显示状态。 | 616| icon | [IconOptions](#iconoptions10对象说明) | 否 | 右侧清除按钮图标。 | 617 618## CancelButtonSymbolOptions<sup>12+</sup>对象说明 619 620**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 621 622**系统能力：** SystemCapability.ArkUI.ArkUI.Full 623 624| 名称 | 类型 | 必填 | 说明 | 625| --------- | ------------------------------------------ | ---- | ---------------- | 626| style | [CancelButtonStyle](#cancelbuttonstyle10枚举说明) | 否 | 右侧清除按钮显示状态。 | 627| icon | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 右侧清除按钮Symbol图标。 | 628 629## 事件 630 631除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 632 633### onSubmit 634 635onSubmit(callback: (value: string) => void) 636 637点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。 638 639**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 640 641**系统能力：** SystemCapability.ArkUI.ArkUI.Full 642 643**参数：** 644 645| 参数名 | 类型 | 必填 | 说明 | 646| ------ | ------ | ---- | ---------------------------- | 647| value | string | 是 | 当前搜索框中输入的文本内容。 | 648 649### onSubmit<sup>14+</sup> 650 651onSubmit(callback: SearchSubmitCallback) 652 653点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调事件，提交事件时提供保持Search编辑状态的方法。 654 655**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 656 657**系统能力：** SystemCapability.ArkUI.ArkUI.Full 658 659**参数：** 660 661| 参数名 | 类型 | 必填 | 说明 | 662| ------ | ------- | ---- | ----------------------------- | 663| callback | [SearchSubmitCallback](#searchsubmitcallback14) | 是 | 点击搜索图标、搜索按钮或者按下软键盘搜索按钮时的回调事件。 | 664 665### onChange 666 667onChange(callback: EditableTextOnChangeCallback) 668 669输入内容发生变化时，触发该回调。 670 671在本回调中，若执行了光标操作，需要开发者在预上屏场景下依据previewText参数调整光标逻辑，以适应预上屏场景。 672 673**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 674 675**系统能力：** SystemCapability.ArkUI.ArkUI.Full 676 677**参数：** 678 679| 参数名 | 类型 | 必填 | 说明 | 680| ------ | ------ | ---- | ---------------------------- | 681| callback | [EditableTextOnChangeCallback](ts-text-common.md#editabletextonchangecallback12) | 是 | 当前输入文本内容变化时的回调。 | 682 683### onCopy 684 685onCopy(callback: (value: string) => void) 686 687进行复制操作时，触发该回调。 688 689**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 690 691**系统能力：** SystemCapability.ArkUI.ArkUI.Full 692 693**参数：** 694 695| 参数名 | 类型 | 必填 | 说明 | 696| ------ | ------ | ---- | ---------------- | 697| value | string | 是 | 复制的文本内容。 | 698 699### onCut 700 701onCut(callback: (value: string) => void) 702 703进行剪切操作时，触发该回调。 704 705**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 706 707**系统能力：** SystemCapability.ArkUI.ArkUI.Full 708 709**参数：** 710 711| 参数名 | 类型 | 必填 | 说明 | 712| ------ | ------ | ---- | ---------------- | 713| value | string | 是 | 剪切的文本内容。 | 714 715### onPaste 716 717onPaste(callback: (value: string, event: PasteEvent) => void) 718 719进行粘贴操作时，触发该回调。 720 721**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 722 723**系统能力：** SystemCapability.ArkUI.ArkUI.Full 724 725**参数：** 726| 参数名 | 类型 | 必填 | 说明 | 727| ------------------- | ------------------------------------------------------------ | ---- | ---------------------- | 728| value | string | 是 | 粘贴的文本内容。 | 729| event<sup>11+</sup> | [PasteEvent](ts-basic-components-richeditor.md#pasteevent11) | 是 | 用户自定义的粘贴事件。 | 730 731### onTextSelectionChange<sup>10+</sup> 732 733onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void) 734 735文本选择的位置发生变化或编辑状态下光标位置发生变化时，触发该回调。 736 737**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 738 739**系统能力：** SystemCapability.ArkUI.ArkUI.Full 740 741**参数：** 742 743| 参数名 | 类型 | 必填 | 说明 | 744| -------------- | ------ | ---- | ------------------------------------------------- | 745| selectionStart | number | 是 | 文本选择区域起始位置，文本框中文字的起始位置为0。 | 746| selectionEnd | number | 是 | 文本选择区域结束位置。 | 747 748### onContentScroll<sup>10+</sup> 749 750onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void) 751 752文本内容滚动时，触发该回调。 753 754**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 755 756**系统能力：** SystemCapability.ArkUI.ArkUI.Full 757 758**参数：** 759 760| 参数名 | 类型 | 必填 | 说明 | 761| ------------ | ------ | ---- | ---------------------------------- | 762| totalOffsetX | number | 是 | 文本在内容区的横坐标偏移，单位px。 | 763| totalOffsetY | number | 是 | 文本在内容区的纵坐标偏移，单位px。 | 764 765### onEditChange<sup>12+</sup> 766 767onEditChange(callback: Callback< boolean >) 768 769输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。callback返回值为true表示正在输入。 770 771**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 772 773**系统能力：** SystemCapability.ArkUI.ArkUI.Full 774 775**参数：** 776 777| 参数名 | 类型 | 必填 | 说明 | 778| --------- | ---------------------------------- | ---- | -------------------- | 779| callback | Callback< boolean > | 是 | 编辑状态改变回调，其返回值为true表示正在输入。 | 780 781### onWillInsert<sup>12+</sup> 782 783onWillInsert(callback: Callback\<InsertValue, boolean>) 784 785在将要输入时，触发该回调。 786 787**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 788 789**系统能力：** SystemCapability.ArkUI.ArkUI.Full 790 791**参数：** 792 793| 参数名 | 类型 | 必填 | 说明 | 794| ------ | ------------------------------------------------------------ | ---- | ------------------ | 795| callback | Callback\<[InsertValue](ts-text-common.md#insertvalue12对象说明), boolean> | 是 | 在将要输入时调用的回调。<br/>在返回true时，表示正常插入，返回false时，表示不插入。<br/>在预上屏操作时，该回调不触发。<br/>仅支持系统输入法输入的场景。 | 796 797### onDidInsert<sup>12+</sup> 798 799onDidInsert(callback: Callback\<InsertValue>) 800 801在输入完成时，触发该回调。 802 803**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 804 805**系统能力：** SystemCapability.ArkUI.ArkUI.Full 806 807**参数：** 808 809| 参数名 | 类型 | 必填 | 说明 | 810| ------ | ------------------------------------------------------------ | ---- | ------------------ | 811| callback | Callback\<[InsertValue](ts-text-common.md#insertvalue12对象说明)> | 是 | 在输入完成时调用的回调。<br/>仅支持系统输入法输入的场景。 | 812 813### onWillDelete<sup>12+</sup> 814 815onWillDelete(callback: Callback\<DeleteValue, boolean>) 816 817在将要删除时，触发该回调。 818 819**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 820 821**系统能力：** SystemCapability.ArkUI.ArkUI.Full 822 823**参数：** 824 825| 参数名 | 类型 | 必填 | 说明 | 826| ------ | ------------------------------------------------------------ | ---- | ------------------ | 827| callback | Callback\<[DeleteValue](ts-text-common.md#deletevalue12对象说明), boolean> | 是 | 在将要删除时调用的回调。<br/>在返回true时，表示正常删除，返回false时，表示不删除。<br/>在预上屏删除操作时，该回调不触发。<br/>仅支持系统输入法输入的场景。 | 828 829### onDidDelete<sup>12+</sup> 830 831onDidDelete(callback: Callback\<DeleteValue>) 832 833在删除完成时，触发该回调。 834 835**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 836 837**系统能力：** SystemCapability.ArkUI.ArkUI.Full 838 839**参数：** 840 841| 参数名 | 类型 | 必填 | 说明 | 842| ------ | ------------------------------------------------------------ | ---- | ------------------ | 843| callback | Callback\<[DeleteValue](ts-text-common.md#deletevalue12对象说明)> | 是 | 在删除完成时调用的回调。<br/>仅支持系统输入法输入的场景。 | 844 845## SearchController 846 847Search组件的控制器继承自[TextContentControllerBase](ts-types.md#textcontentcontrollerbase10)。 848 849### 导入对象 850``` 851controller: SearchController = new SearchController() 852``` 853 854### constructor<sup>8+</sup> 855 856constructor() 857 858SearchController的构造函数。 859 860**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 861 862**系统能力：** SystemCapability.ArkUI.ArkUI.Full 863 864### caretPosition<sup>8+</sup> 865 866caretPosition(value: number): void 867 868设置输入光标的位置。 869 870**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 871 872**系统能力：** SystemCapability.ArkUI.ArkUI.Full 873 874**参数:** 875 876| 参数名 | 类型 | 必填 | 说明 | 877| ------ | -------- | ---- | ---------------------------------- | 878| value | number | 是 | 从字符串开始到光标所在位置的长度。 | 879 880### stopEditing<sup>10+</sup> 881 882stopEditing(): void 883 884退出编辑态。 885 886**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 887 888**系统能力：** SystemCapability.ArkUI.ArkUI.Full 889 890### setTextSelection<sup>12+</sup> 891 892setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void; 893 894组件在获焦状态下，调用该接口设置文本选择区域并高亮显示，且只有在selectionStart小于selectionEnd时，文字才会被选取、高亮显示。 895 896**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 897 898**系统能力：** SystemCapability.ArkUI.ArkUI.Full 899 900**参数：** 901 902| 参数名 | 类型 | 必填 | 说明 | 903| -------------- | -------- | ---- | -------- | 904| selectionStart | number | 是 | 文本选择区域起始位置，文本框中文字的起始位置为0。<br/>当selectionStart小于0时、按照0处理；当selectionStart大于文字最大长度时、按照文字最大长度处理。<br/> | 905| selectionEnd | number | 是 | 文本选择区域结束位置。<br/>当selectionEnd小于0时、按照0处理；当selectionEnd大于文字最大长度时、按照文字最大长度处理。<br/> | 906| options | [SelectionOptions](ts-types.md#selectionoptions12对象说明) | 否 | 选中文字时的配置。<br />默认值：MenuPolicy.DEFAULT。 | 907 908> **说明：** 909> 910> 如果selectionStart或selectionEnd被赋值为undefined时，当作0处理。 911> 912> 如果selectionMenuHidden被赋值为true或设备为2in1时，即使options被赋值为MenuPolicy.SHOW，调用setTextSelection也不弹出菜单。 913> 914> 如果选中的文本含有emoji表情时，表情的起始位置包含在设置的文本选中区域内就会被选中。 915 916## SearchSubmitCallback<sup>14+</sup> 917 918type SearchSubmitCallback = (searchContent: string, event?: SubmitEvent) => void 919 920点击搜索图标、搜索按钮或者按下软键盘搜索按钮时的回调事件。 921 922**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 923 924**系统能力：** SystemCapability.ArkUI.ArkUI.Full 925 926**参数：** 927 928| 参数名 | 类型 | 必填 | 说明 | 929| -------- | ------------------------------------------------------------ | ---- | -------------------------------------------------------- | 930| searchContent | string | 是 | 当前搜索框中输入的文本内容。 | 931| event | [SubmitEvent](ts-basic-components-textinput.md#submitevent11) | 否 | 提交事件。 | 932 933## 示例 934 935### 示例1（设置与获取光标位置） 936 937该示例通过controller实现了光标位置的设置与获取的功能。 938 939```ts 940// xxx.ets 941@Entry 942@Component 943struct SearchExample { 944 @State changeValue: string = '' 945 @State submitValue: string = '' 946 @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 } 947 controller: SearchController = new SearchController() 948 949 build() { 950 Column({space: 10}) { 951 Text('onSubmit:' + this.submitValue).fontSize(18).margin(15) 952 Text('onChange:' + this.changeValue).fontSize(18).margin(15) 953 Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller }) 954 .searchButton('SEARCH') 955 .width('95%') 956 .height(40) 957 .backgroundColor('#F5F5F5') 958 .placeholderColor(Color.Grey) 959 .placeholderFont({ size: 14, weight: 400 }) 960 .textFont({ size: 14, weight: 400 }) 961 .onSubmit((value: string) => { 962 this.submitValue = value 963 }) 964 .onChange((value: string) => { 965 this.changeValue = value 966 }) 967 .margin(20) 968 Button('Set caretPosition 1') 969 .onClick(() => { 970 // 设置光标位置到输入的第一个字符后 971 this.controller.caretPosition(1) 972 }) 973 Button('Get CaretOffset') 974 .onClick(() => { 975 this.positionInfo = this.controller.getCaretOffset() 976 }) 977 }.width('100%') 978 } 979} 980``` 981 982 983 984### 示例2（设置搜索和删除图标） 985 986该示例通过searchButton、searchIcon、cancelButton属性展示了设置搜索和删除图标的效果。 987 988```ts 989// xxx.ets 990@Entry 991@Component 992struct SearchExample { 993 @State changeValue: string = '' 994 @State submitValue: string = '' 995 996 build() { 997 Column() { 998 Text('onSubmit:' + this.submitValue).fontSize(18).margin(15) 999 Search({ value: this.changeValue, placeholder: 'Type to search...' }) 1000 .searchButton('SEARCH') 1001 .searchIcon({ 1002 src: $r('app.media.search') 1003 }) 1004 .cancelButton({ 1005 style: CancelButtonStyle.CONSTANT, 1006 icon: { 1007 src: $r('app.media.cancel') 1008 } 1009 }) 1010 .width('90%') 1011 .height(40) 1012 .maxLength(20) 1013 .backgroundColor('#F5F5F5') 1014 .placeholderColor(Color.Grey) 1015 .placeholderFont({ size: 14, weight: 400 }) 1016 .textFont({ size: 14, weight: 400 }) 1017 .onSubmit((value: string) => { 1018 this.submitValue = value 1019 }) 1020 .onChange((value: string) => { 1021 this.changeValue = value 1022 }) 1023 .margin(20) 1024 }.width('100%') 1025 } 1026} 1027``` 1028 1029 1030 1031 1032### 示例3（设置自定义键盘） 1033 1034该示例通过customKeyboard属性实现了自定义键盘的功能。 1035 1036```ts 1037// xxx.ets 1038@Entry 1039@Component 1040struct SearchExample { 1041 controller: SearchController = new SearchController() 1042 @State inputValue: string = "" 1043 1044 // 自定义键盘组件 1045 @Builder CustomKeyboardBuilder() { 1046 Column() { 1047 Button('x').onClick(() => { 1048 // 关闭自定义键盘 1049 this.controller.stopEditing() 1050 }) 1051 Grid() { 1052 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => { 1053 GridItem() { 1054 Button(item + "") 1055 .width(110).onClick(() => { 1056 this.inputValue += item 1057 }) 1058 } 1059 }) 1060 }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) 1061 }.backgroundColor(Color.Gray) 1062 } 1063 1064 build() { 1065 Column() { 1066 Search({ controller: this.controller, value: this.inputValue}) 1067 // 绑定自定义键盘 1068 .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 }) 1069 } 1070 } 1071} 1072``` 1073 1074 1075 1076### 示例4（设置输入法回车键类型） 1077 1078该示例通过enterKeyType属性实现了动态切换输入法回车键的效果。 1079 1080```ts 1081// xxx.ets 1082@Entry 1083@Component 1084struct SearchExample { 1085 @State text: string = '' 1086 @State enterTypes: Array<EnterKeyType> = [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next, EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE] 1087 @State index: number = 0 1088 build() { 1089 Column({ space: 20 }) { 1090 Search({ placeholder: '请输入文本', value: this.text }) 1091 .width(380) 1092 .enterKeyType(this.enterTypes[this.index]) 1093 .onChange((value: string) => { 1094 this.text = value 1095 }) 1096 .onSubmit((value: String) => { 1097 console.log("trigger search onsubmit" + value); 1098 }) 1099 1100 Button('改变EnterKeyType').onClick(() => { 1101 this.index = (this.index + 1) % this.enterTypes.length; 1102 }) 1103 }.width('100%') 1104 } 1105} 1106``` 1107 1108 1109 1110### 示例5（设置文本样式） 1111 1112该示例通过lineHeight、letterSpacing、decoration属性展示了不同样式的文本效果。 1113 1114```ts 1115// xxx.ets 1116@Entry 1117@Component 1118struct SearchExample { 1119 build() { 1120 Row() { 1121 Column() { 1122 Text('lineHeight').fontSize(9).fontColor(0xCCCCCC) 1123 Search({value: 'lineHeight unset'}) 1124 .border({ width: 1 }).padding(10) 1125 Search({value: 'lineHeight 15'}) 1126 .border({ width: 1 }).padding(10).lineHeight(15) 1127 Search({value: 'lineHeight 30'}) 1128 .border({ width: 1 }).padding(10).lineHeight(30) 1129 1130 Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC) 1131 Search({value: 'letterSpacing 0'}) 1132 .border({ width: 1 }).padding(5).letterSpacing(0) 1133 Search({value: 'letterSpacing 3'}) 1134 .border({ width: 1 }).padding(5).letterSpacing(3) 1135 Search({value: 'letterSpacing -1'}) 1136 .border({ width: 1 }).padding(5).letterSpacing(-1) 1137 1138 Text('decoration').fontSize(9).fontColor(0xCCCCCC) 1139 Search({value: 'LineThrough, Red'}) 1140 .border({ width: 1 }).padding(5) 1141 .decoration({type: TextDecorationType.LineThrough, color: Color.Red}) 1142 Search({value: 'Overline, Red, DOTTED'}) 1143 .border({ width: 1 }).padding(5) 1144 .decoration({type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DOTTED}) 1145 Search({value: 'Underline, Red, WAVY'}) 1146 .border({ width: 1 }).padding(5) 1147 .decoration({type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY}) 1148 }.height('90%') 1149 } 1150 .width('90%') 1151 .margin(10) 1152 } 1153} 1154 1155``` 1156 1157 1158 1159### 示例6（设置文字特性效果） 1160 1161该示例通过fontFeature属性实现了文本在不同文字特性下的展示效果。 1162 1163```ts 1164// xxx.ets 1165@Entry 1166@Component 1167struct SearchExample { 1168 @State text1: string = 'This is ss01 on : 0123456789' 1169 @State text2: string = 'This is ss01 off: 0123456789' 1170 1171 build() { 1172 Column(){ 1173 Search({value: this.text1}) 1174 .margin({top:200}) 1175 .fontFeature("\"ss01\" on") 1176 Search({value: this.text2}) 1177 .margin({top:10}) 1178 .fontFeature("\"ss01\" off") 1179 } 1180 .width("90%") 1181 .margin("5%") 1182 } 1183} 1184``` 1185 1186 1187### 示例7（自定义键盘避让） 1188 1189该示例通过自定义键盘实现了键盘避让的功能。 1190 1191```ts 1192// xxx.ets 1193@Entry 1194@Component 1195struct SearchExample { 1196 controller: SearchController = new SearchController() 1197 @State inputValue: string = "" 1198 @State height1: string | number = '80%' 1199 @State supportAvoidance: boolean = true 1200 1201 // 自定义键盘组件 1202 @Builder 1203 CustomKeyboardBuilder() { 1204 Column() { 1205 Row() { 1206 Button('x').onClick(() => { 1207 // 关闭自定义键盘 1208 this.controller.stopEditing() 1209 }).margin(10) 1210 } 1211 1212 Grid() { 1213 ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => { 1214 GridItem() { 1215 Button(item + "") 1216 .width(110).onClick(() => { 1217 this.inputValue += item 1218 }) 1219 } 1220 }) 1221 }.maxCount(3).columnsGap(10).rowsGap(10).padding(5) 1222 } 1223 .backgroundColor(Color.Gray) 1224 } 1225 1226 build() { 1227 Column() { 1228 Row() { 1229 Button("20%") 1230 .fontSize(24) 1231 .onClick(() => { 1232 this.height1 = "20%" 1233 }) 1234 Button("80%") 1235 .fontSize(24) 1236 .margin({ left: 20 }) 1237 .onClick(() => { 1238 this.height1 = "80%" 1239 }) 1240 } 1241 .justifyContent(FlexAlign.Center) 1242 .alignItems(VerticalAlign.Bottom) 1243 .height(this.height1) 1244 .width("100%") 1245 .padding({ bottom: 50 }) 1246 1247 Search({ controller: this.controller, value: this.inputValue })// 绑定自定义键盘 1248 .customKeyboard(this.CustomKeyboardBuilder(), { supportAvoidance: this.supportAvoidance }) 1249 .margin(10) 1250 .border({ width: 1 }) 1251 .onChange((value: string) => { 1252 this.inputValue = value 1253 }) 1254 } 1255 } 1256} 1257``` 1258 1259 1260 1261### 示例8（设置文本自适应） 1262 1263该示例通过minFontSize、maxFontSize属性展示了文本自适应字号的效果。 1264 1265```ts 1266// xxx.ets 1267@Entry 1268@Component 1269struct SearchExample { 1270 build() { 1271 Row() { 1272 Column() { 1273 Text('adaptive font').fontSize(9).fontColor(0xCCCCCC) 1274 1275 Search({value: 'This is the text without the adaptive font'}) 1276 .width('80%').height(90).borderWidth(1) 1277 Search({value: 'This is the text without the adaptive font'}) 1278 .width('80%').height(90).borderWidth(1) 1279 .minFontSize(4) 1280 .maxFontSize(40) 1281 }.height('90%') 1282 } 1283 .width('90%') 1284 .margin(10) 1285 } 1286} 1287``` 1288 1289 1290 1291### 示例9（支持插入和删除回调） 1292 1293该示例通过onWillInsert、onDidInsert、onWillDelete、onDidDelete接口实现了插入和删除的功能。 1294 1295```ts 1296// xxx.ets 1297@Entry 1298@Component 1299struct SearchExample { 1300 @State insertValue: string = "" 1301 @State deleteValue: string = "" 1302 @State insertOffset: number = 0 1303 @State deleteOffset: number = 0 1304 @State deleteDirection: number = 0 1305 1306 build() { 1307 Row() { 1308 Column() { 1309 Search({ value: "Search支持插入回调文本" }) 1310 .height(60) 1311 .onWillInsert((info: InsertValue) => { 1312 this.insertValue = info.insertValue 1313 return true; 1314 }) 1315 .onDidInsert((info: InsertValue) => { 1316 this.insertOffset = info.insertOffset 1317 }) 1318 1319 Text("insertValue:" + this.insertValue + " insertOffset:" + this.insertOffset).height(30) 1320 1321 Search({ value: "Search支持删除回调文本b" }) 1322 .height(60) 1323 .onWillDelete((info: DeleteValue) => { 1324 this.deleteValue = info.deleteValue 1325 info.direction 1326 return true; 1327 }) 1328 .onDidDelete((info: DeleteValue) => { 1329 this.deleteOffset = info.deleteOffset 1330 this.deleteDirection = info.direction 1331 }) 1332 1333 Text("deleteValue:" + this.deleteValue + " deleteOffset:" + this.deleteOffset).height(30) 1334 Text("deleteDirection:" + (this.deleteDirection == 0 ? "BACKWARD" : "FORWARD")).height(30) 1335 1336 }.width('100%') 1337 } 1338 .height('100%') 1339 } 1340} 1341``` 1342 1343 1344 1345### 示例10（文本扩展自定义菜单） 1346 1347该示例通过editMenuOptions接口实现了文本设置自定义菜单扩展项的文本内容、图标以及回调的功能。 1348 1349```ts 1350// xxx.ets 1351@Entry 1352@Component 1353struct SearchExample { 1354 @State text: string = 'Search editMenuOptions' 1355 onCreateMenu = (menuItems: Array<TextMenuItem>) => { 1356 let item1: TextMenuItem = { 1357 content: 'custom1', 1358 icon: $r('app.media.startIcon'), 1359 id: TextMenuItemId.of('custom1'), 1360 } 1361 let item2: TextMenuItem = { 1362 content: 'custom2', 1363 id: TextMenuItemId.of('custom2'), 1364 icon: $r('app.media.startIcon'), 1365 } 1366 menuItems.push(item1) 1367 menuItems.unshift(item2) 1368 return menuItems 1369 } 1370 onMenuItemClick = (menuItem: TextMenuItem, textRange: TextRange) => { 1371 if (menuItem.id.equals(TextMenuItemId.of("custom2"))) { 1372 console.log("拦截 id: custom2 start:" + textRange.start + "; end:" + textRange.end) 1373 return true 1374 } 1375 if (menuItem.id.equals(TextMenuItemId.COPY)) { 1376 console.log("拦截 COPY start:" + textRange.start + "; end:" + textRange.end) 1377 return true 1378 } 1379 if (menuItem.id.equals(TextMenuItemId.SELECT_ALL)) { 1380 console.log("不拦截 SELECT_ALL start:" + textRange.start + "; end:" + textRange.end) 1381 return false 1382 } 1383 return false 1384 } 1385 @State editMenuOptions: EditMenuOptions = { 1386 onCreateMenu: this.onCreateMenu, onMenuItemClick: this.onMenuItemClick 1387 } 1388 1389 build() { 1390 Column() { 1391 Search({ value: this.text }) 1392 .width('95%') 1393 .editMenuOptions(this.editMenuOptions) 1394 .margin({ top: 100 }) 1395 } 1396 .width("90%") 1397 .margin("5%") 1398 } 1399} 1400``` 1401 1402 1403 1404### 示例11（设置symbol类型清除按钮） 1405 1406该示例通过searchIcon、cancelButton属性展示了自定义右侧symbol类型清除按钮样式的效果。 1407 1408```ts 1409// xxx.ets 1410import { SymbolGlyphModifier } from '@kit.ArkUI' 1411 1412@Entry 1413@Component 1414struct SearchExample { 1415 controller: SearchController = new SearchController() 1416 @State changeValue: string = '' 1417 @State submitValue: string = '' 1418 1419 build() { 1420 Column() { 1421 Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller }) 1422 .searchIcon(new SymbolGlyphModifier($r('sys.symbol.magnifyingglass')).fontColor([Color.Red])) 1423 .cancelButton({ 1424 style: CancelButtonStyle.CONSTANT, 1425 icon: new SymbolGlyphModifier($r('sys.symbol.xmark')).fontColor([Color.Green]) 1426 }) 1427 .searchButton('SEARCH') 1428 .width('95%') 1429 .height(40) 1430 .backgroundColor('#F5F5F5') 1431 .placeholderColor(Color.Grey) 1432 .placeholderFont({ size: 14, weight: 400 }) 1433 .textFont({ size: 14, weight: 400 }) 1434 .margin(10) 1435 } 1436 .width('100%') 1437 .height('100%') 1438 } 1439} 1440``` 1441 1442 1443 1444
