HarmonyOS NEXT练习：Search搜索和清空内容

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

接口

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

• value：设置当前显示的搜索文本内容。从API version 10开始，该参数支持$$双向绑定变量。
• placeholder：设置无输入时的提示文本。
• icon：设置搜索图标路径，默认使用系统搜索图标。
• controller：设置Search组件控制器。

组件属性

.searchButton(value: string, option?: SearchButtonOptions) //设置搜索框末尾搜索按钮。点击搜索按钮，同时触发onSubmit与onClick回调。
.placeholderColor(value: ResourceColor) //设置placeholder文本颜色。
.placeholderFont(value?: Font) //设置placeholder文本样式，包括字体大小，字体粗细，字体族，字体风格。当前支持'HarmonyOS Sans'字体和注册自定义字体。
.textFont(value?: Font) //设置搜索框内输入文本样式，包括字体大小，字体粗细，字体族，字体风格。目前仅支持默认字体族。
.textAlign(value: TextAlign) //设置文本在搜索框中的对齐方式。目前支持的对齐方式有：Start、Center、End。
.copyOption(value: CopyOptions) //设置输入的文本是否可复制。设置CopyOptions.None时，当前Search中的文字无法被复制、剪切、翻译和帮写，仅支持粘贴。
.searchIcon(value: IconOptions | SymbolGlyphModifier) //设置左侧搜索图标样式。
.cancelButton(value: CancelButtonOptions | CancelButtonSymbolOptions) //设置右侧清除按钮样式。

组件事件

.onSubmit(callback: (value: string) => void) //点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。
.onChange(callback: EditableTextOnChangeCallback) //输入内容发生变化时，触发该回调。
.onCopy(callback: (value: string) => void) //进行复制操作时，触发该回调。
.onCut(callback: (value: string) => void) //进行剪切操作时，触发该回调。
.onPaste(callback: (value: string, event: PasteEvent) => void) //进行粘贴操作时，触发该回调。

练习：SearchPage

@Entry
@Component
struct SearchPage {
  @State changeValue: string = ''
  @State submitValue: string = ''

  build() {
    Column() {
      Text('Search练习：搜索和清空内容')

      Search({ value: this.changeValue, placeholder: '请输入搜索内容' })
        .searchButton('搜索')
        .searchIcon({
          src: $r('sys.media.ohos_ic_public_search_filled')
        })
        .cancelButton({
          style: CancelButtonStyle.CONSTANT,
          icon: {
            src: $r('sys.media.ohos_ic_public_cancel_filled')
          }
        })
        .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)

      Text('搜索内容为:' + this.submitValue).fontSize(18).margin(15)
    }.width('100%')
  }
}