HarmonyOS 如何给在其他UI组件给Text输入文本？

Question

怎么把event.title输入到图中的Text

import { ComponentContent, PromptAction, promptAction } from '@kit.ArkUI';
import { RHWebViewControllerProxy } from '@ohos/rhbridge';
import { BaseBridge } from '../../service/jsbridge/base/BaseBridge';
import { RHLoginBridge } from '../../service/jsbridge/base/RHLoginBridge';

export class WebDialog{
  private contentNode?:ComponentContent<WebParam>
  private promptAction?:PromptAction
  private webController: RHWebViewControllerProxy = RHWebViewControllerProxy.createController()
  show(uiContext:UIContext,url:string,showCloseBtn:number,showTitle:number,title:string,showBackgroud:number){
    this.promptAction = uiContext.getPromptAction();
    this.webController.addJavascriptObject(new RHLoginBridge(this.webController))
    this.webController.addJavascriptObject(new BaseBridge(this.webController,undefined,uiContext))
    let param:WebParam={
      controller:this.webController,
      url:url,showCloseBtn:showCloseBtn,
      showTitle:showTitle,title:title,
      showBackgroud:showBackgroud,
      close:(this.close).bind(this)
    }
    this.contentNode = new ComponentContent<WebParam>(uiContext, wrapBuilder(customDialogBuilder),param);
    let options: promptAction.BaseDialogOptions = {
      alignment: DialogAlignment.Bottom,
      // 这里设置两个动画，分别对应弹窗显示和隐藏动画
      transition: TransitionEffect.asymmetric(
        TransitionEffect.OPACITY.animation({ duration: 500 }).combine(
          TransitionEffect.translate({ y: 1000 }).animation({ duration: 500 }))
        ,
        TransitionEffect.OPACITY.animation({duration: 500 }).combine(
          TransitionEffect.translate({ y: 0 }).animation({ duration: 500 }))
      )
    };
    try {
      if(this.contentNode){
        this.promptAction.openCustomDialog(this.contentNode, options);
      }
    } catch (error) {

    }
  }

  close(){
    if(this.promptAction){
      this.promptAction.closeCustomDialog(this.contentNode)
    }
  }

}

interface   WebParam{
  controller: RHWebViewControllerProxy
  url:string
  showCloseBtn:number
  showTitle:number
  title:string
  showBackgroud:number
  close:()=>void
}

@Builder
function customDialogBuilder(param:WebParam) {
  Column() {
    RelativeContainer(){
      Text((param.title==undefined||param.title==null)?"":param.title)
        .id("title")
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          right: { anchor: "__container__", align: HorizontalAlign.Center }
        })

        .visibility(param.showTitle==1?Visibility.Visible:Visibility.None)
      Button({ type: ButtonType.Normal, stateEffect: true }) {
        Image($r('app.media.ic_close'))
          .width(30)
          .height(30)
      }
      .backgroundColor(Color.White)
      .visibility(param.showCloseBtn==1?Visibility.Visible:Visibility.None)
      .width(30)
      .height(30)
      .margin({right:20,top:5})
      .alignRules({
        center: { anchor: "__container__", align: VerticalAlign.Center },
        right: { anchor: "__container__", align: HorizontalAlign.End }
      })
      .onClick(() => {
         param.close()
      })
    }
    .backgroundColor(Color.White)
    .height((param.showCloseBtn==1)||(param.showTitle==1)?40:20)
    .width('100%')
    .borderRadius({topLeft:'20vp',topRight:'20vp'})

    Web({
      src: param.url,
      controller: param.controller?.getWebViewController()
    })
      .onControllerAttached(()=>{
        let userAgent = param.controller.getWebViewController().getUserAgent() + " RedCapHarmony";
        param.controller.getWebViewController().setCustomUserAgent(userAgent);
        // 设置完UA之后，再次加载url
        param.controller.getWebViewController().loadUrl(param.url)
      })
      .onTitleReceive((event)=>{
        event.title

      })
      .javaScriptProxy(param.controller?.getJavaScriptProxy())
      .backgroundColor(Color.White)
  }
  .backgroundColor(Color.Transparent)
  .width('100%')
  .height('85%')
}

Answer 1

您demo中使用的是ComponentContent去加载组件内容，ComponentContent修改页面UI视图需要通过update方法去修改，使用emit在web回调后传给ComponentContent绑定的节点，从而修改视图，修改demo如下：

WebDialog里面：

    let options: promptAction.BaseDialogOptions = {
      alignment: DialogAlignment.Bottom,
      // 这里设置两个动画，分别对应弹窗显示和隐藏动画
      transition: TransitionEffect.asymmetric(
        TransitionEffect.OPACITY.animation({ duration: 500 }).combine(
          TransitionEffect.translate({ y: 1000 }).animation({ duration: 500 }))
        ,
        TransitionEffect.OPACITY.animation({duration: 500 }).combine(
          TransitionEffect.translate({ y: 0 }).animation({ duration: 500 }))
      )
    };
    try {
      if(this.contentNode){
        this.promptAction.openCustomDialog(this.contentNode, options);
        emitter.once("changeTitle",(eventData: emitter.EventData)=>{
            let param1 = param
          if(eventData.data){
            param1.title = eventData.data.toString()
          }
            this.contentNode?.update(param1)
        })
      }
    } catch (error) {

    }

customDialogBuilder里面：

.onTitleReceive((event)=>{
  emitter.emit("changeTitle",{data:event.title})
})