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