VoiceSearchCustomDialog.ets 1.94 KB

import { VoiceRecoginizer } from 'wdHwAbility'
import { common, UIAbility } from '@kit.AbilityKit'
import { VoiceInputView } from '../comment/view/VoiceInputView'

@Preview
@CustomDialog
export struct VoiceSearchCustomDialog {
  controller?: CustomDialogController
  onSearchBtnClick?: (content: string) => void
  @State voiceContent: string = ""

  build() {
    Column() {
      Row() {
        TextArea({
          placeholder: '我来说两句',
          text: this.voiceContent
        })
          .placeholderColor("#999999")
          .id("textAreaId")
          .defaultFocus(false) // 获取默认焦点
          .enableKeyboardOnFocus(true)
          .height('100%')
          .width('100%')
          .backgroundColor($r('app.color.color_transparent'))
          .caretColor("#ED2800")
          .onFocus(() => {
            this.controller?.close()
          })
      }
      .backgroundColor('#F9F9F9')
      .margin({ top: 12, right: 12, left: 12, bottom:10})
      .height(80)
      .borderRadius(4)
      Row() {
        Image($r('app.media.WDInput_keyboardImage'))
          .width(30)
          .height(30)
          .onClick(() => {
            this.controller?.close()
          })
        Text('搜索')
          .backgroundColor("#ED2800")
          .width(80)
          .height(30)
          .fontSize(15)
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
          .borderRadius(4)
          .opacity(this.voiceContent.length > 0 ? 1.0 : 0.5)
          .enabled(this.voiceContent.length > 0)
          .onClick(() => {
            if (this.onSearchBtnClick) {
              this.onSearchBtnClick(this.voiceContent)
            }
          })
      }
      .padding({ left: 12, right: 12 })
      .width('100%')
      .justifyContent(FlexAlign.SpaceBetween)
      VoiceInputView({voiceRecoginizerResult:(result: string) => {
          this.voiceContent = result
      }}).height(150)
  }.backgroundColor(Color.White)
    .width('100%')
}

}