鸿蒙HarmonyOS NEXT开发：Search（基础组件）

于 2024-08-18 20:54:38 发布
阅读量597 收藏 7
点赞数 6
分类专栏： ArkTS 鸿蒙 文章标签： harmonyos 华为 android 驱动开发 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanBBQ/article/details/141305322
版权
鸿蒙 同时被 2 个专栏收录
115 篇文章 0 订阅
订阅专栏
ArkTS
110 篇文章 0 订阅
订阅专栏

搜索框组件，适用于浏览器的搜索内容输入框等应用场景。

说明：

该组件从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。

导入对象

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

// xxx.ets
@Entry
@Component
struct SearchExample {
  @State changeValue: string = ''
  @State submitValue: string = ''
  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
  controller: SearchController = new SearchController()

  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%')
  }
}
ts

示例2

// xxx.ets
@Entry
@Component
struct SearchExample {
  @State changeValue: string = ''
  @State submitValue: string = ''

  build() {
    Column() {
      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
      Search({ value: this.changeValue, placeholder: 'Type to search...' })
        .searchButton('SEARCH')
        .searchIcon({
          src: $r('app.media.search')
        })
        .cancelButton({
          style: CancelButtonStyle.CONSTANT,
          icon: {
            src: $r('app.media.cancel')
          }
        })
        .width('90%')
        .height(40)
        .maxLength(20)
        .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)
    }.width('100%')
  }
}
ts

示例3

// xxx.ets
@Entry
@Component
struct SearchExample {
  controller: SearchController = new SearchController()
  @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 })
    }
  }
}
ts

示例4

// xxx.ets
@Entry
@Component
struct SearchExample {
  @State Text: string = ''
  @State enterTypes: Array<EnterKeyType> = [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next, EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE]
  @State index: number = 0
  build() {
    Column({ space: 20 }) {
      Search({ placeholder: '请输入文本', value: this.Text })
        .width(380)
        .enterKeyType(this.enterTypes[this.index])
        .onChange((value: string) => {
          this.Text = value
        })
        .onSubmit((value: String) => {
          console.log("trigger search onsubmit" + value);
        })

      Button('改变EnterKeyType').onClick(() => {
        this.index = (this.index + 1) % this.enterTypes.length;
      })
    }.width('100%')
  }
}
ts

示例5

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

// xxx.ets
@Entry
@Component
struct SearchExample {
  build() {
    Row() {
      Column() {
        Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
        Search({value: 'lineHeight unset'})
          .border({ width: 1 }).padding(10)
        Search({value: 'lineHeight 15'})
          .border({ width: 1 }).padding(10).lineHeight(15)
        Search({value: 'lineHeight 30'})
          .border({ width: 1 }).padding(10).lineHeight(30)

        Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
        Search({value: 'letterSpacing 0'})
          .border({ width: 1 }).padding(5).letterSpacing(0)
        Search({value: 'letterSpacing 3'})
          .border({ width: 1 }).padding(5).letterSpacing(3)
        Search({value: 'letterSpacing -1'})
          .border({ width: 1 }).padding(5).letterSpacing(-1)

        Text('decoration').fontSize(9).fontColor(0xCCCCCC)
        Search({value: 'LineThrough, Red'})
          .border({ width: 1 }).padding(5)
          .decoration({type: TextDecorationType.LineThrough, color: Color.Red})
        Search({value: 'Overline, Red, DOTTED'})
          .border({ width: 1 }).padding(5)
          .decoration({type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DOTTED})
        Search({value: 'Underline, Red, WAVY'})
          .border({ width: 1 }).padding(5)
          .decoration({type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY})
      }.height('90%')
    }
    .width('90%')
    .margin(10)
  }
}

ts

示例6

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

@Entry
@Component
struct search {
  @State text1: string = 'This is ss01 on : 0123456789'
  @State text2: string = 'This is ss01 off: 0123456789'

  build() {
    Column(){
      Search({value: this.text1})
        .margin({top:200})
        .fontFeature("\"ss01\" on")
      Search({value: this.text2})
        .margin({top:10})
        .fontFeature("\"ss01\" off")
    }
    .width("90%")
    .margin("5%")
  }
}
ts

示例7

自定义键盘弹出发生避让示例

@Entry
@Component
struct SearchExample {
  controller: SearchController = new SearchController()
  @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 })
    }
  }
}
ts

示例8

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

// xxx.ets
@Entry
@Component
struct SearchExample {
  build() {
    Row() {
      Column() {
        Text('adaptive font').fontSize(9).fontColor(0xCCCCCC)

        Search({value: 'This is the text without the adaptive font'})
          .width('80%').height(90).borderWidth(1)
        Search({value: 'This is the text without the adaptive font'})
          .width('80%').height(90).borderWidth(1)
          .minFontSize(4)
          .maxFontSize(40)
      }.height('90%')
    }
    .width('90%')
    .margin(10)
  }
}
ts

写在最后

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

蜀道叁QAQ
关注
  • 6
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
鸿蒙HarmonyOS NEXT开发：拖拽事件（ArkTS组件事件）
shudaoshanBBQ的博客
08-06 815
拖拽事件指组件被长按后拖拽时触发的事件。
鸿蒙HarmonyOS NEXT开发：Navigation（基础组件）
shudaoshanBBQ的博客
08-16 904
Navigation组件是路由导航的根视图容器...........
HarmonyOS应用开发：Search（基础组件）
situnanQAQ的博客
06-11 989
搜索框组件，适用于浏览器的搜索内容输入框等应用场景。
鸿蒙HarmonyOS NEXT开发：焦点控制（ArkTS通用属性）
shudaoshanBBQ的博客
08-09 971
自定义组件的走焦效果，可设置组件是否走焦和具体的走焦顺序，tab键或者方向键切换焦点。
鸿蒙HarmonyOS NEXT开发：拖拽控制
shudaoshanBBQ的博客
08-13 653
设置组件是否可以响应拖拽事件。
鸿蒙HarmonyOS NEXT开发：RichEditor（基础组件）
最新发布
shudaoshanBBQ的博客
08-18 617
支持图文混排和文本交互式编辑的组件。
鸿蒙HarmonyOS NEXT开发：自定义绘制设置（ArkTS通用属性）
shudaoshanBBQ的博客
08-11 678
自定义组件绘制提供了自定义绘制修改器，来实现更自由地组件绘制。
HarmonyOS开发探索：Search组件实现搜索栏
DMZDAMS的博客
07-01 915
自定义搜索图标
HarmonyOS Next开发学习手册——基础组件(search开发指导)
maniuT的博客
07-18 591
提供搜索框组件，用于提供用户搜索内容的输入区域，具体用法请参考 search。
鸿蒙HarmonyOS应用开发者认证 题库+答案案
01-18
本资源提供了鸿蒙HarmonyOS应用开发者认证的题库和答案，涵盖了HarmonyOS应用开发的多个方面，包括容器组件、 Ability、Web组件、网络请求、首选项、自定义组件、弹窗组件、图片加载、网络权限等。通过学习和理解...
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程
02-11
### 全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战教程解析 #### 一、鸿蒙开发环境准备与工具下载 本教程旨在帮助初学者从零开始学习鸿蒙 HarmonyOS NEXT 星河版的开发技术。首先，我们需要准备开发环境。...
HarmonyOS应用开发者基础认证考试题目及答案
12-17
HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目及答案HarmonyOS应用开发者基础认证考试题目...
HarmonyOS应用开发学习-ArkUI-容器组件
08-15 1193
设置导航点样式:-left: 设置导航点距离Swiper组件左边的距离。-size:设置导航点的直径。例如,"1fr 1fr 2fr'是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。例如,"1fr 1fr 2fr”是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。网格容器，由“行”和“列”分割的单元格所组成，通过指定”项目”所在的单元格做出各种各样的布局。设置为false是为横向Tabs，设置为true时为纵向Tabs。
鸿蒙（API 12 Beta3版）【扩展屏投播开发指导】使用投播组件
鸿蒙的技术博客
08-14 1206
通过本节开发指导，可在系统镜像投屏后，获取投屏设备信息，实现扩展屏模式的投播，实现双屏协作的能力。
鸿蒙（API 12 Beta3版）【本地媒体会话概述】 音视频播控服务
鸿蒙的技术博客
08-13 1099
本地媒体会话的数据源均在设备本地，交互过程如图所示。
HarmonyOS Developer之生成二维码
weixin_47988426的博客
08-14 367
生成二维码
HarmonyOS NEXT
06-25
HarmonyOS NEXT，也称为鸿蒙操作系统，是华为自主研发的面向全场景的分布式操作系统。它最初是为了应对智能手机市场变化，特别是面对谷歌服务受限的情况而开发的。HarmonyOS NEXT强调了三个核心特点： 1. **统一性**：HarmonyOS旨在提供一个跨设备、跨平台的统一体验，包括手机、智能穿戴、智能家居等各类终端设备，用户界面和操作逻辑更加一致。 2. **模块化**：系统架构采用微内核设计，允许各组件独立升级，提高系统的灵活性和安全性。 3. **分布式能力**：利用分布式技术，HarmonyOS可以实现不同设备之间的无缝协同，数据共享和实时通信。 此外，HarmonyOS NEXT还支持自定义引擎（HMS Core）和开源生态，鼓励开发者构建创新应用和服务。它正逐渐成为一个开放、安全、智能的物联网操作系统平台。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值