鸿蒙5.0版开发：ArkTS基础组件（Search）

往期鸿蒙全套实战文章必看：

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技能最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

Search

搜索框组件，适用于欣赏器的搜索内容输入框等应用场景。
   说明：
  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  子组件

无
接口

Search(options?: { value?: string, placeholder?: ResourceStr, icon?: string, controller?: SearchController })
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数:
参数名参数类型必填参数形貌valuestring否设置当前显示的搜索文本内容。
从API version 10开始，该参数支持$$双向绑定变量。placeholderResourceStr10+否设置无输入时的提示文本。iconstring否设置搜索图标路径，默认使用体系搜索图标。
说明：
icon的数据源支持当地图片和网络图片。
- 支持的图片格式包括png、jpg、bmp、svg、gif、pixelmap和heif。
- 支持Base64字符串。格式data:image/[png|jpeg|bmp|webp|heif];base64,[base64 data], 其中[base64 data]为Base64字符串数据。
如果与属性searchIcon同时设置，则searchIcon优先。controllerSearchController否设置Search组件控制器。 属性

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

searchButton(value: string, option?: SearchButtonOptions)
设置搜索框末尾搜索按钮。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuestring是搜索框末尾搜索按钮文本内容。optionSearchButtonOptions否设置搜索框文本样式。
默认值：
{
fontSize: ‘16fp’,
color: ‘#ff3f97e9’
} placeholderColor

placeholderColor(value: ResourceColor)
设置placeholder文本颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是placeholder文本颜色。
默认值：‘#99182431’。 placeholderFont

placeholderFont(value?: Font)
设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。现在仅支持默认字体族。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueFont否placeholder文本样式。 textFont

textFont(value?: Font)
设置搜索框内输入文本样式，包括字体大小，字体粗细，字体族，字体风格。现在仅支持默认字体族。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueFont否搜索框内输入文本样式。 textAlign

textAlign(value: TextAlign)
设置文本在搜索框中的对齐方式。现在支持的对齐方式有：Start、Center、End。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueTextAlign是文本在搜索框中的对齐方式。
默认值：TextAlign.Start copyOption9+

copyOption(value: CopyOptions)
设置输入的文本是否可复制。设置CopyOptions.None时，当前Search中的文字无法被复制或剪切，仅支持粘贴。
copyOption对于拖拽，只限制是否选中，不涉及拖拽范围。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueCopyOptions是输入的文本是否可复制。
默认值：CopyOptions.LocalDevice，支持设备内复制。 searchIcon10+

searchIcon(value: IconOptions)
设置左侧搜索图标样式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueIconOptions是左侧搜索图标样式。
默认值：
{
size: ‘16vp’,
color: ‘#99ffffff’,
src: ’ '
} cancelButton10+

cancelButton(value: { style?: CancelButtonStyle, icon?: IconOptions })
设置右侧扫除按钮样式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明value{ style:? CancelButtonStyle, icon:? IconOptions }是右侧扫除按钮样式。
style：右侧图标显示状态。
icon：右侧图标。
默认值：
{
style：CancelButtonStyle.INPUT,
icon: {
size: ‘16vp’,
color: ‘#99ffffff’,
src: ’ '
}
}
当style为CancelButtonStyle.CONSTANT时，默认显示扫除样式。 fontColor10+

fontColor(value: ResourceColor)
设置输入文本的字体颜色。文本通用属性fontSize、fontStyle、fontWeight和fontFamily在textFont属性中设置。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是输入文本的字体颜色。
默认值：‘#FF182431’。 caretStyle10+

caretStyle(value: CaretStyle)
设置光标样式。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueCaretStyle是光标样式。
默认值：
{
width: ‘1.5vp’,
color: ‘#007DFF’
}   说明：
从API version 12开始，此接口支持设置文本手柄颜色，光标和文本手柄颜色保持一致。
  enableKeyboardOnFocus10+

enableKeyboardOnFocus(value: boolean)
设置Search通过点击以外的方式获焦时，是否绑定输入法。
从API version 10开始，获焦默认绑定输入法。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueboolean是Search获焦时，是否绑定输入法
默认值：true。 selectionMenuHidden10+

selectionMenuHidden(value: boolean)
设置长按输入框或者右键输入框时，是否弹出文本选择菜单。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueboolean是长按输入框或者右键输入框时，是否弹出文本选择菜单。
默认值：false customKeyboard10+

customKeyboard(value: CustomBuilder, options?: KeyboardOptions)
设置自界说键盘。
当设置自界说键盘时，输入框激活后不会打开体系输入法，而是加载指定的自界说组件。
自界说键盘的高度可以通过自界说组件根节点的height属性设置，宽度不可设置，使用体系默认值。
自界说键盘采用覆盖原始界面的方式呈现，不会对应用原始界面产生压缩或者上提。
自界说键盘无法获取核心，但是会拦截手势变乱。
默认在输入控件失去核心时，关闭自界说键盘，开发者也可以通过stopEditing方法控制键盘关闭。
如果设备支持拍摄输入，设置自界说键盘后，该输入框会不支持拍摄输入。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueCustomBuilder是自界说键盘。options12+KeyboardOptions否设置自界说键盘是否支持避让功能。 type11+

type(value: SearchType)
设置输入框类型。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueSearchType是输入框类型。
默认值：SearchType.Normal maxLength11+

maxLength(value: number)
设置文本的最大输入字符数。默认不设置最大输入字符数限制。到达文本最大字符限制，将无法继续输入字符。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuenumber是文本的最大输入字符数。 enterKeyType12+

enterKeyType(value: EnterKeyType)
设置输入法回车键类型。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueEnterKeyType是输入法回车键类型。
默认值：EnterKeyType.Search lineHeight12+

lineHeight(value: number | string | Resource)
设置文本的文本行高，设置值不大于0时，不限制文本行高，自顺应字体大小，number类型时单位为fp。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuenumber | string | Resource是文本的文本行高。 decoration12+

decoration(value: TextDecorationOptions)
设置文本装饰线类型样式及其颜色。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueTextDecorationOptions是文本装饰线对象。
默认值：{
 type: TextDecorationType.None,
 color: Color.Black,
 style: TextDecorationStyle.SOLID 
} letterSpacing12+

letterSpacing(value: number | string | Resource)
设置文本字符间距。设置该值为百分比时，按默认值显示。设置该值为0时，按默认值显示。
当取值为负值时，文字会发生压缩，负值过小时会将组件内容区大小压缩为0，导致无内容显示。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuenumber | string | Resource是文本字符间距。 fontFeature12+

fontFeature(value: string)
设置文字特性结果，比如数字等宽的特性。
格式为：normal | <feature-tag-value>
<feature-tag-value>的格式为：<string> [ <integer> | on | off ]
<feature-tag-value>的个数可以有多个，中间用’,'隔开。
例如，使用等宽数字的输入格式为：“ss01” on。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuestring是文字特性结果。 设置 Font Feature 属性，Font Feature 是 OpenType 字体的高级排版本领，如支持连字、数字等宽等特性，一样平常用在自界说字体中，其本领需要字体本身支持。 更多 Font Feature 本领介绍可参考 https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop 和 https://sparanoid.com/lab/opentype-features/
selectedBackgroundColor12+

selectedBackgroundColor(value: ResourceColor)
设置文本选中底板颜色。如果未设置不透明度，默以为20%不透明度。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceColor是文本选中底板颜色。
默以为20%不透明度。 inputFilter12+

inputFilter(value: ResourceStr, error?:  Callback< string >)
通过正则表达式设置输入过滤器。匹配表达式的输入允许显示，不匹配的输入将被过滤。仅支持单个字符匹配，不支持字符串匹配。
设置inputFilter且输入的字符不为空字符，会导致设置输入框类型(即type接口)附带的文本过滤结果失效。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueResourceStr是正则表达式。error Callback< string >否正则匹配失败时，返回被过滤的内容。 textIndent12+

textIndent(value: Dimension)
设置首行文本缩进。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valueDimension是首行文本缩进。
默认值：0 minFontSize12+

minFontSize(value: number | string | Resource)
设置文本最小显示字号。
需共同maxFontSize以及布局大小限制使用，单独设置不生效。
自顺应字号生效时，fontSize设置不生效。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuenumber | string | Resource是文本最小显示字号。 maxFontSize12+

maxFontSize(value: number | string | Resource)
设置文本最大显示字号。
需共同minFontSize以及布局大小限制使用，单独设置不生效。
自顺应字号生效时，fontSize设置不生效。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuenumber | string | Resource是文本最大显示字号。 IconOptions10+对象说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数名参数类型必填参数形貌sizeLength否图标尺寸，不支持百分比。colorResourceColor否图标颜色。srcResourceStr否图标/图片源。 SearchButtonOptions10+对象说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数名参数类型必填参数形貌fontSizeLength否文本按钮字体大小，不支持百分比。fontColorResourceColor否文本按钮字体颜色。 TextDecorationOptions12+对象说明

名称参数类型必填形貌typeTextDecorationType是设置文本装饰线样式。color ResourceColor否设置文本装饰线颜色。styleTextDecorationStyle否设置文本装饰线样式。 CancelButtonStyle10+罗列说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
名称形貌CONSTANT扫除按钮常显样式。INVISIBLE扫除按钮常隐样式。INPUT扫除按钮输入样式。 SearchType11+罗列说明

名称值形貌NORMAL0基本输入模式。
支持输入数字、字母、下划线、空格、特殊字符。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。NUMBER2纯数字输入模式。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。PHONE_NUMBER3电话号码输入模式。
支持输入数字、空格、+ 、-、*、#、(、)，长度不限。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。EMAIL5邮箱地址输入模式。
支持数字，字母，下划线、小数点、!、#、$、%、&、'、*、+、-、/、=、?、^、`、{、|、}、~，以及@字符（只能存在一个@字符）。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。NUMBER_DECIMAL12+12带小数点的数字输入模式。
支持数字，小数点（只能存在一个小数点）。 SelectionOptions12+

setTextSelection的选中文字时的设置。
名称类型必填说明menuPolicyMenuPolicy否菜单弹出的计谋。 变乱

除支持通用变乱外，还支持以下变乱：
onSubmit

onSubmit(callback: (value: string) => void)
点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuestring是当前搜索框中输入的文本内容。 onChange

onChange(callback: (value: string) => void)
输入内容发生变化时，触发该回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuestring是当前搜索框中输入的文本内容。 onCopy

onCopy(callback: (value: string) => void)
长按搜索框弹出剪切板之后，点击剪切板的复制按钮触发该回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuestring是复制的文本内容。 onCut

onCut(callback: (value: string) => void)
长按搜索框弹出剪切板之后，点击剪切板的剪切按钮触发该回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuestring是剪切的文本内容。 onPaste

onPaste(callback: (value: string, event: PasteEvent) => void)
长按搜索框弹出剪切板之后，点击剪切板的粘贴按钮触发该回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明valuestring是粘贴的文本内容。event11+PasteEvent否用户自界说的粘贴变乱。 onTextSelectionChange10+

onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)
文本选择的位置发生变化时，触发该回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明selectionStartnumber是文本选择区域起始位置，文本框中文字的起始位置为0。selectionEndnumber否文本选择区域结束位置。 onContentScroll10+

onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void)
文本内容滚动时，触发该回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明totalOffsetXnumber是文本在内容区的横坐标偏移，单位px。totalOffsetYnumber否文本在内容区的纵坐标偏移，单位px。 onEditChange12+

onEditChange(callback: Callback< boolean >)
输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。isEditing为true表示正在输入。
体系本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填说明isEditing Callback< boolean >是为true表示正在输入。 SearchController

Search组件的控制器继续自TextContentControllerBase。
导入对象

1. controller: SearchController = new SearchController()

复制代码

caretPosition

caretPosition(value: number): void
设置输入光标的位置。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数:
参数名参数类型必填参数形貌valuenumber是从字符串开始到光标地点位置的长度。 stopEditing10+

stopEditing(): void
退出编辑态。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系本领： SystemCapability.ArkUI.ArkUI.Full
setTextSelection12+

setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void;
组件在获焦状态下，调用该接口设置文本选择区域并高亮显示，且只有在selectionStart小于selectionEnd时，文字才会被选取、高亮显示。
参数：
参数名参数类型必填参数形貌selectionStartnumber是文本选择区域起始位置，文本框中文字的起始位置为0。
当selectionStart小于0时、按照0处理；当selectionStart大于文字最大长度时、按照文字最大长度处理。selectionEndnumber是文本选择区域结束位置。
当selectionEnd小于0时、按照0处理；当selectionEnd大于文字最大长度时、按照文字最大长度处理。optionsSelectionOptions否选中文字时的设置。
默认值：MenuPolicy.DEFAULT。   说明：
  如果selectionStart或selectionEnd被赋值为undefined时，当作0处理。
  如果selectionMenuHidden被赋值为true或设备为2in1时，即使options被赋值为MenuPolicy.SHOW，调用setTextSelection也不弹出菜单。
  如果选中的文本含有emoji表情时，表情的起始位置包含在设置的文本选中区域内就会被选中。
  KeyboardOptions12+

设置自界说键盘是否支持避让功能。
名称类型必填形貌supportAvoidanceboolean否设置自界说键盘是否支持避让功能；默认值为false不支持避让，true为支持避让。 示例

示例1

1. // xxx.ets@Entry@Componentstruct SearchExample {  @State changeValue: string = ''  @State submitValue: string = ''  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }  controller: SearchController = new SearchController()
2.   build() {    Column({space: 10}) {      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)      Text('onChange:' + this.changeValue).fontSize(18).margin(15)      Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })        .searchButton('SEARCH')        .width('95%')        .height(40)        .backgroundColor('#F5F5F5')        .placeholderColor(Color.Grey)        .placeholderFont({ size: 14, weight: 400 })        .textFont({ size: 14, weight: 400 })        .onSubmit((value: string) => {          this.submitValue = value        })        .onChange((value: string) => {          this.changeValue = value        })        .margin(20)      Button('Set caretPosition 1')        .onClick(() => {          // 设置光标位置到输入的第一个字符后          this.controller.caretPosition(1)        })      Button('Get CaretOffset')        .onClick(() => {          this.positionInfo = this.controller.getCaretOffset()        })    }.width('100%')  }}

复制代码

示例2

1. // xxx.ets
2. @Entry
3. @Component
4. struct SearchExample {
5.   @State changeValue: string = ''
6.   @State submitValue: string = ''
8.   build() {
9.     Column() {
10.       Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
11.       Search({ value: this.changeValue, placeholder: 'Type to search...' })
12.         .searchButton('SEARCH')
13.         .searchIcon({
14.           src: $r('app.media.search')
15.         })
16.         .cancelButton({
17.           style: CancelButtonStyle.CONSTANT,
18.           icon: {
19.             src: $r('app.media.cancel')
20.           }
21.         })
22.         .width('90%')
23.         .height(40)
24.         .maxLength(20)
25.         .backgroundColor('#F5F5F5')
26.         .placeholderColor(Color.Grey)
27.         .placeholderFont({ size: 14, weight: 400 })
28.         .textFont({ size: 14, weight: 400 })
29.         .onSubmit((value: string) => {
30.           this.submitValue = value
31.         })
32.         .onChange((value: string) => {
33.           this.changeValue = value
34.         })
35.         .margin(20)
36.     }.width('100%')
37.   }
38. }

复制代码

示例3

1. // xxx.ets@Entry@Componentstruct SearchExample {  controller: SearchController = new SearchController()
2.   @State inputValue: string = ""  // 自界说键盘组件  @Builder CustomKeyboardBuilder() {    Column() {      Button('x').onClick(() => {        // 关闭自界说键盘        this.controller.stopEditing()      })      Grid() {        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {          GridItem() {            Button(item + "")              .width(110).onClick(() => {              this.inputValue += item            })          }        })      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)    }.backgroundColor(Color.Gray)  }  build() {    Column() {      Search({ controller: this.controller, value: this.inputValue})        // 绑定自界说键盘        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })    }  }}

复制代码

示例4

1. // xxx.ets
2. @Entry
3. @Component
4. struct SearchExample {
5.   @State Text: string = ''
6.   @State enterTypes: Array<EnterKeyType> = [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next, EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE]
7.   @State index: number = 0
8.   build() {
9.     Column({ space: 20 }) {
10.       Search({ placeholder: '请输入文本', value: this.Text })
11.         .width(380)
12.         .enterKeyType(this.enterTypes[this.index])
13.         .onChange((value: string) => {
14.           this.Text = value
15.         })
16.         .onSubmit((value: String) => {
17.           console.log("trigger search onsubmit" + value);
18.         })
20.       Button('改变EnterKeyType').onClick(() => {
21.         this.index = (this.index + 1) % this.enterTypes.length;
22.       })
23.     }.width('100%')
24.   }
25. }

复制代码

示例5

该示例实现了使用lineHeight设置文本的文本行高，使用letterSpacing设置文本字符间距，使用decoration设置文本装饰线样式。

1. // xxx.ets
2. @Entry
3. @Component
4. struct SearchExample {
5.   build() {
6.     Row() {
7.       Column() {
8.         Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
9.         Search({value: 'lineHeight unset'})
10.           .border({ width: 1 }).padding(10)
11.         Search({value: 'lineHeight 15'})
12.           .border({ width: 1 }).padding(10).lineHeight(15)
13.         Search({value: 'lineHeight 30'})
14.           .border({ width: 1 }).padding(10).lineHeight(30)
16.         Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
17.         Search({value: 'letterSpacing 0'})
18.           .border({ width: 1 }).padding(5).letterSpacing(0)
19.         Search({value: 'letterSpacing 3'})
20.           .border({ width: 1 }).padding(5).letterSpacing(3)
21.         Search({value: 'letterSpacing -1'})
22.           .border({ width: 1 }).padding(5).letterSpacing(-1)
24.         Text('decoration').fontSize(9).fontColor(0xCCCCCC)
25.         Search({value: 'LineThrough, Red'})
26.           .border({ width: 1 }).padding(5)
27.           .decoration({type: TextDecorationType.LineThrough, color: Color.Red})
28.         Search({value: 'Overline, Red, DOTTED'})
29.           .border({ width: 1 }).padding(5)
30.           .decoration({type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DOTTED})
31.         Search({value: 'Underline, Red, WAVY'})
32.           .border({ width: 1 }).padding(5)
33.           .decoration({type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY})
34.       }.height('90%')
35.     }
36.     .width('90%')
37.     .margin(10)
38.   }
39. }

复制代码

示例6

fontFeature属性使用示例，对比了fontFeature使用ss01属性和不使用ss01属性的结果

1. @Entry
2. @Component
3. struct search {
4.   @State text1: string = 'This is ss01 on : 0123456789'
5.   @State text2: string = 'This is ss01 off: 0123456789'
7.   build() {
8.     Column(){
9.       Search({value: this.text1})
10.         .margin({top:200})
11.         .fontFeature(""ss01" on")
12.       Search({value: this.text2})
13.         .margin({top:10})
14.         .fontFeature(""ss01" off")
15.     }
16.     .width("90%")
17.     .margin("5%")
18.   }
19. }

复制代码

示例7

自界说键盘弹出发生避让示例

1. @Entry@Componentstruct SearchExample {  controller: SearchController = new SearchController()
2.   @State inputValue: string = ""  @State height1:string|number = '80%'  @State supportAvoidance:boolean = true;  // 自界说键盘组件  @Builder CustomKeyboardBuilder() {    Column() {      Row(){        Button('x').onClick(() => {          // 关闭自界说键盘          this.controller.stopEditing()        }).margin(10)      }      Grid() {        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {          GridItem() {            Button(item + "")              .width(110).onClick(() => {              this.inputValue += item            })          }        })      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)    }    .backgroundColor(Color.Gray)  }  build() {    Column() {      Row(){        Button("20%")          .fontSize(24)          .onClick(()=>{            this.height1 = "20%"          })        Button("80%")          .fontSize(24)          .margin({left:20})          .onClick(()=>{            this.height1 = "80%"          })      }      .justifyContent(FlexAlign.Center)      .alignItems(VerticalAlign.Bottom)      .height(this.height1)      .width("100%")      .padding({bottom:50})      Search({ controller: this.controller, value: this.inputValue})        // 绑定自界说键盘        .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 })    }  }}

复制代码

示例8

该示例实现了使用minFontSize及maxFontSize设置文本自顺应字号。

1. // xxx.ets
2. @Entry
3. @Component
4. struct SearchExample {
5.   build() {
6.     Row() {
7.       Column() {
8.         Text('adaptive font').fontSize(9).fontColor(0xCCCCCC)
10.         Search({value: 'This is the text without the adaptive font'})
11.           .width('80%').height(90).borderWidth(1)
12.         Search({value: 'This is the text without the adaptive font'})
13.           .width('80%').height(90).borderWidth(1)
14.           .minFontSize(4)
15.           .maxFontSize(40)
16.       }.height('90%')
17.     }
18.     .width('90%')
19.     .margin(10)
20.   }
21. }

复制代码

看完三件事❤️

• 如果你觉得这篇内容对你还蛮有资助，我想邀请你帮我三个小忙：
  
• 点赞，转发，有你们的 『点赞和批评』，才是我创造的动力。
  
• 关注作者，不定期分享原创知识。
  
• 同时可以期待后续文章ing