“答开发者问”之HarmonyOS鸿蒙Next技术问题解析 第8期

问题一：如何在自定义类中展示带图片的toast？

问题描述： 我想在自定义类的方法中调用自定义组件的toast展示，怎么实现呢？ 代码如下图，在action方法中，通过接收toast的参数属性值，传给UI组件，最终展示需要的toast效果。这里官方提供的promptAction.showToast是可以正常显示的，但自定义组件不知道应该如何展示？

解决方案： ArkUI中的自定义组件展示是需要window的，比如所有界面都是EntryAbility中的windowStage.loadContent()执行后，才被展示的。单个页面内部也有UIContext来执行toast/dialog的操作。 可以将UIContext作为参数传入action方法实现，示例demo如下，其余业务逻辑可以自行补充：

import { ComponentContent, UIContext, window } from '[@kit](/user/kit).ArkUI'
import { hilog } from '[@kit](/user/kit).PerformanceAnalysisKit'

class FakeToastManager {
  private currentContent: ComponentContent<Object> | undefined = undefined

  action(uiContext: UIContext) {
    this.currentContent = new ComponentContent<string>(uiContext, wrapBuilder(BuilderFake), '我是传递的内容')
    uiContext.getPromptAction().openCustomDialog(this.currentContent, {
      autoCancel: false,
      alignment: DialogAlignment.Bottom,
      isModal: false,
      offset: {
        dx: 0,
        dy: '-90vp'
      }
    })
    setTimeout(() => {
      uiContext.getPromptAction().closeCustomDialog(this.currentContent)
    }, 2000)
  }

  // Preview不可用，需要运行在模拟器跟真机
  actionFake() {
    window.getLastWindow(getContext()).then((windowClass) => {
      let uiContext = windowClass.getUIContext()
      this.action(uiContext)
    })
  }
}

[@Entry](/user/Entry)
[@ComponentV2](/user/ComponentV2)
struct Index {
  private fakeToast: FakeToastManager = new FakeToastManager()

  build() {
    Navigation() {

      Column() {
        Button('Fake Toast').onClick(() => {
          this.fakeToast.action(this.getUIContext())
        })
        Blank()
        Text('在fake toast展示时不影响界面点击').onClick(() => {
          hilog.debug(0x000000, 'rainrain', 'click ---')
        })
      }.size({ width: '100%', height: '100%' })

    }.size({ width: '100%', height: '100%' })

  }
}

[@Builder](/user/Builder)
function BuilderFake(text: string) {
  FakeToast({ text: text })
}

[@ComponentV2](/user/ComponentV2)
struct FakeToast {
  [@Param](/user/Param) text: string = ''

  build() {
    Column() {
      Text('我是假Toast')
      Text(this.text)
    }.backgroundColor(Color.Green)
  }
}
``>

原链接：
[如何在普通类中调用自定义组件，并正常展示-华为开发者问答 | 华为开发者联盟 (huawei.com)](https://developer.huawei.com/consumer/cn/forum/topic/0203171882627439025?fid=0101587866109860105&pid=0302171892804342012)

问题四：要实现promptAction.openCustomDialog的弹窗关闭动画完成后蒙层才消失，应该怎么做？

问题描述：

使用promptAction.openCustomDialog如何实现，在打开的时候蒙层立马出现，弹窗从底部向上划出；关闭的时候弹窗先向下划出去，然后蒙层再消失？

目前只实现了打开的效果，弹窗关闭的动画好像只有在蒙层消失了才会触发。

export function openActionSheet() {
  window.getLastWindow(getContext()).then((windowClass) => {
    const uiContext = windowClass.getUIContext()
    const promptAction = uiContext.getPromptAction()

    let contentNode = new ComponentContent<boolean>(uiContext, wrapBuilder(ActionBuilder), false)
    promptAction.openCustomDialog(contentNode, {
      autoCancel: true,
      alignment: DialogAlignment.Bottom,
      transition: TransitionEffect.opacity(0.99).animation({ duration: 200 }),
      onWillDismiss: (action) => {
        animateTo({
          duration: 200,
          onFinish: () => {
            action.dismiss()
          }
        }, () => {
          contentNode.update(true)
        })
      }
    })
  })
}

@Builder
export function ActionBuilder(isEnd: boolean) {
  Column() {
    Row() {
      Text('2173781637163')
    }.width('100%').height(40)

    Row() {
      Text('2173781637163')
    }.width('100%').height(59)

    Row() {
      Text('2173781637163')
    }.width('100%').height(90)
  }
  .translate({
    y: isEnd ? '100%' : 0
  })
  .backgroundColor(Color.White)
  .transition(TransitionEffect.translate({ y: '100%' }).animation({ duration: 200 }))
}

解决方案：

可以通过onWillDismiss拦截返回事件，在事件回调中通过animateTo和update自定义关闭动画，以下示例供参考：

export function openActionSheet() {
  window.getLastWindow(getContext()).then((windowClass) => {
    const uiContext = windowClass.getUIContext()
    const promptAction = uiContext.getPromptAction()

    let contentNode = new ComponentContent<boolean>(uiContext, wrapBuilder(ActionBuilder), false)
    promptAction.openCustomDialog(contentNode, {
      autoCancel: true,
      alignment: DialogAlignment.Bottom,
      transition: TransitionEffect.opacity(0.99).animation({ duration: 200 }),
      onWillDismiss: (action) => {
        animateTo({
          duration: 200,
          onFinish: () => {
            action.dismiss()
          }
        }, () => {
          contentNode.update(true)
        })
      }
    })
  })
}

@Builder
export function ActionBuilder(isEnd: boolean) {
  Column() {
    Row() {
      Text('2173781637163')
    }.width('100%').height(40)

    Row() {
      Text('2173781637163')
    }.width('100%').height(59)

    Row() {
      Text('2173781637163')
    }.width('100%').height(90)
  }
  .translate({
    y: isEnd ? '100%' : 0
  })
  .backgroundColor(Color.White)
  .transition(TransitionEffect.translate({ y: '100%' }).animation({ duration: 200 }))
}