【HarmonyOS 鸿蒙实战开发】NavDestination弹窗

---

📚往期笔录记录🔖：

🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🔖记录一场鸿蒙开发岗位面试经历~

🔖持续更新中……

---

介绍

本案例介绍了使用NavDestination组件的Dialog模式实现与前一个页面的联动的评论弹窗。

效果预览图

使用说明

点击案例中的商品介绍页面底部商店信息栏中的评论图标，即可拉起评论区弹窗，同时商品介绍页面自适应缩小。
此时在商品介绍页区域（或者未滑动浏览的评论区）可以通过手势向下滑动，缩小评论区高度的同时，增加商品介绍页面的高度，实现联动效果。

实现思路

1. 创建商品介绍页面。

通过Navigation组件作为路由导航根容器，同时也作为本案例的商品介绍页的容器。

具体商品介绍组件内容省略。

build() {
   
   
  Column() {
   
   
    this.goodsItem()
  }
  .width($r('app.string.navdialog_full_size'))
}

@Builder
goodsItem() {
   
   
  Column() {
   
   
    // 商品图片
    ...
    // 底部栏
    this.shopBar(() => {
   
   
      // 触发弹窗的回调函数
      animateTo({
   
    duration: Consts.COMMENT_DIALOG_TRANS_DURATION, curve: Curve.Ease }, () => {
   
   
        this.ndDialogHeight = this.ndPageHeight * Consts.COMMENT_DIALOG_SCALE;
      })

      DynamicsRouter.push(RouterInfo.NAVDESTINATION_COMMENT_DIALOG)
      logger.info(TAG, `open dialog`)