0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkTS声明式组件:Search

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-07-01 10:18 次阅读

Search

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

说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

Search(options?: { value?: string, placeholder?: ResourceStr, icon?: string, controller?: SearchController })

参数:

参数名参数类型必填参数描述
valuestring设置当前显示的搜索文本内容。 从API version 10开始,该参数支持[$$]双向绑定变量。
placeholder[ResourceStr]10+设置无输入时的提示文本。
iconstring设置搜索图标路径,默认使用系统搜索图标。**说明:**icon的数据源支持本地图片和网络图片。 - 支持的图片格式包括png、jpg、bmp、svg、gif和pixelmap。 - 支持Base64字符串。格式data:image/[png
controllerSearchController设置Search组件控制器

属性

除支持[通用属性]外,还支持以下属性:

名称参数类型描述
searchButton10+value: string, option?: [SearchButtonOptions]搜索框末尾搜索按钮文本内容,默认无搜索按钮。
placeholderColor[ResourceColor]设置placeholder文本颜色。 默认值:'#99182431'。
placeholderFont[Font]设置placeholder文本样式,包括字体大小,字体粗细,字体族,字体风格。目前仅支持默认字体族。
textFont[Font]设置搜索框内输入文本样式,包括字体大小,字体粗细,字体族,字体风格。目前仅支持默认字体族。
textAlign[TextAlign]设置文本在搜索框中的对齐方式。目前支持的对齐方式有:Start、Center、End。 默认值:TextAlign.Start
copyOption9+[CopyOptions]设置输入的文本是否可复制。 默认值:CopyOptions.LocalDevice,支持设备内复制。 设置CopyOptions.None时,当前Search中的文字无法被复制或剪切,仅支持粘贴。
searchIcon10+[IconOptions]设置左侧搜索图标样式。
cancelButton10+{ style? : [CancelButtonStyle]icon?: [IconOptions] }设置右侧清除按钮样式。 默认值: { style:CancelButtonStyle.INPUT }
fontColor10+[ResourceColor]设置输入文本的字体颜色。 默认值:'#FF182431'。说明:[文本通用属性]fontSize、fontStyle、fontWeight和fontFamily在textFont属性中设置。
caretStyle10+[CaretStyle]设置光标样式。 默认值: { width: '1.5vp', color: '#007DFF' }
enableKeyboardOnFocus10+booleanSearch获焦时,是否绑定输入法 默认值:true。从API version 10开始,获焦默认绑定输入法。
selectionMenuHidden10+boolean设置长按输入框或者右键输入框时,是否弹出文本选择菜单。 默认值:false
customKeyboard10+[CustomBuilder]设置自定义键盘。**说明:**当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载指定的自定义组件。 自定义键盘的高度可以通过自定义组件根节点的height属性设置,宽度不可设置,使用系统默认值。 自定义键盘采用覆盖原始界面的方式呈现,不会对应用原始界面产生压缩或者上提。 自定义键盘无法获取焦点,但是会拦截手势事件。 默认在输入控件失去焦点时,关闭自定义键盘,开发者也可以通过[stopEditing]方法控制键盘关闭。

IconOptions10+对象说明

参数名参数类型必填参数描述
size[Length]图标尺寸,不支持百分比。
color[ResourceColor]图标颜色。
src[ResourceStr]图标/图片源。

CaretStyle10+对象说明

参数名参数类型必填参数描述
width[Length]光标尺寸,不支持百分比。
color[ResourceColor]光标颜色。

SearchButtonOptions10+对象说明

参数名参数类型必填参数描述
fontSize[Length]文本按钮字体大小,不支持百分比。
fontColor[ResourceColor]文本按钮字体颜色。

CancelButtonStyle10+枚举说明

名称描述
CONSTANT清除按钮常显样式。
INVISIBLE清除按钮常隐样式。
INPUT清除按钮输入样式。

事件

除支持[通用事件]外,还支持以下事件:

名称功能描述
onSubmit(callback: (value: string) => void)点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。 -value: 当前搜索框中输入的文本内容。
onChange(callback: (value: string) => void)输入内容发生变化时,触发该回调。 -value: 当前搜索框中输入的文本内容。
onCopy(callback: (value: string) => void)长按搜索框弹出剪切板之后,点击剪切板的复制按钮触发该回调。 -value: 复制的文本内容。
onCut(callback: (value: string) => void)长按搜索框弹出剪切板之后,点击剪切板的剪切按钮触发该回调。 -value: 剪切的文本内容。
onPaste(callback: (value: string) => void)长按搜索框弹出剪切板之后,点击剪切板的粘贴按钮触发该回调。 -value: 粘贴的文本内容。
onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)10+文本选择的位置发生变化时,触发该回调。 selectionStart:文本选择区域起始位置,文本框中文字的起始位置为0。 selectionEnd:文本选择区域结束位置。
onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void)10+文本内容滚动时,触发该回调。 totalOffsetX:文本在内容区的横坐标偏移。 totalOffsetY:文本在内容区的纵坐标偏移。

SearchController

Search组件的控制器,目前通过它可控制Search组件的光标位置。

导入对象

controller: SearchController = new SearchController()

caretPosition

caretPosition(value: number): void

设置输入光标的位置。

参数:

参数名参数类型必填参数描述
valuenumber从字符串开始到光标所在位置的长度。

stopEditing10+

stopEditing(): void

退出编辑态。

getTextContentRect10+

getTextContentRect(): [RectResult]

获取已编辑文本内容区域相对组件的位置和大小,返回值单位为像素。

返回值:

类型说明
[RectResult]已编辑文本内容的相对组件的位置和大小。

说明:

  • 返回的位置信息是相对Search组件中搜索图标的偏移值。
  • 不输入文本时,返回值中有相对Search组件的位置信息,但大小为0。
  • 返回值中的位置信息是第一个字符相对于可编辑组件的位置。

RectResult10+

位置和大小。

参数类型描述
xnumber水平方向横坐标。
ynumber竖直方向纵坐标。
widthnumber内容宽度大小。
heightnumber内容高度大小。

getTextContentLineCount10+

getTextContentLineCount(): number

获取已编辑文本内容的行数。

返回值:

类型说明
number已编辑文本内容行数。HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿

搜狗高速浏览器截图20240326151547.png

示例

示例1

// xxx.ets
@Entry
@Component
struct SearchExample {
  @State changeValue: string = ''
  @State submitValue: string = ''
  controller: SearchController = new SearchController()

  build() {
    Column() {
      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)
        })
    }.width('100%')
  }
}

search

示例2

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

  build() {
    Column() {
      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
      Search({ 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)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) = > {
          this.submitValue = value
        })
        .margin(20)
    }.width('100%')
  }
}

searchButton

示例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 })
    }
  }
}

customKeyboard

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 组件
    +关注

    关注

    1

    文章

    503

    浏览量

    17781
  • 鸿蒙
    +关注

    关注

    57

    文章

    2301

    浏览量

    42668
收藏 人收藏

    评论

    相关推荐

    HarmonyOS/OpenHarmony应用开发-ArkTS声明开发范式

    轨迹。状态与数据管理状态数据管理作为基于ArkTS声明开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协
    发表于 01-17 15:09

    鸿蒙ArkTS声明组件:Blank

    空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。
    的头像 发表于 06-19 16:21 479次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Blank

    鸿蒙ArkTS声明组件:DataPanel

    数据面板组件,用于将多个数据占比情况使用占比图进行展示。
    的头像 发表于 06-21 09:42 326次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:DataPanel

    鸿蒙ArkTS声明组件:Marquee

    跑马灯组件,用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动,不超过时不滚动。
    的头像 发表于 06-25 15:52 366次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Marquee

    鸿蒙ArkTS声明组件:NavDestination

    作为NavRouter组件的子组件,用于显示导航内容区。
    的头像 发表于 06-27 14:05 396次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:NavDestination

    鸿蒙ArkTS声明组件:PatternLock

    图案密码锁组件,以九宫格图案的方式输入密码,用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态,手指离开屏幕时结束输入状态完成密码输入。
    的头像 发表于 06-27 09:59 361次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:PatternLock

    鸿蒙ArkTS声明组件:【RichText】

    富文本组件,解析并显示HTML格式文本。
    的头像 发表于 06-29 09:35 571次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:【RichText】

    鸿蒙ArkTS声明组件:ScrollBar

    滚动条组件ScrollBar,用于配合可滚动组件使用,如List、Grid、Scroll。
    的头像 发表于 07-01 15:52 450次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:ScrollBar

    鸿蒙ArkTS声明组件:Span

    作为Text组件的子组件,用于显示行内文本的组件
    的头像 发表于 07-01 09:14 391次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:Span

    鸿蒙ArkTS声明组件:StepperItem

    用作[Stepper]组件的页面子组件
    的头像 发表于 07-02 17:47 352次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:StepperItem

    鸿蒙ArkTS声明组件:TextArea

    多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。
    的头像 发表于 07-02 15:02 513次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextArea

    鸿蒙ArkTS声明组件:TextInput

    单行文本输入框组件
    的头像 发表于 07-03 09:14 731次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextInput

    鸿蒙ArkTS声明组件:TextPicker

    滑动选择文本内容的组件
    的头像 发表于 07-03 15:07 330次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextPicker

    鸿蒙ArkTS声明组件:TextTimer

    通过文本显示计时信息并控制其计时器状态的组件
    的头像 发表于 07-03 17:06 407次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:TextTimer

    鸿蒙ArkTS声明组件:XComponent

    可用于EGL/OpenGLES和媒体数据写入,并显示在XComponent组件
    的头像 发表于 07-05 09:56 533次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b><b class='flag-5'>式</b><b class='flag-5'>组件</b>:XComponent