#鸿蒙通关秘籍#如何使用NavDestination组件的Dialog模式实现评论弹窗的联动效果？

为了在鸿蒙开发中创建一个带有评论弹窗的商品介绍页面，通过使用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);
       });
     }
     .width($r('app.string.navdialog_full_size'))
   }
           
   @Builder
   shopBar(callback: () => void) {
     Row({ space: Consts.SHOP_BAR_SPACE }) {
       ...
       
       Image($r("app.media.nd_comment"))
         .width(Consts.SHOP_BAR_ICON_SIZE)
         .height(Consts.SHOP_BAR_ICON_SIZE)
         .onClick(callback)
   
       ...
     }
     ...
   }
   

2. 创建评论区组件：

   使用NavDestination组件作为评论区子页面的根容器，设置mode属性为NavDestinationMode.DIALOG。该模式默认透明，需要自定义转场动画，同时实现主页收缩动画来匹配评论区弹出的动画。

   Column() {
     Column()
       .width($r('app.string.navdialog_full_size'))
       .height(this.windowHeight - this.dialogHeight - Consts.SHOP_BAR_HEIGHT)
       .backgroundColor(Color.Transparent)
   
     Column() {
       Comment({
         isGesture: this.isGesture,
         listScrollAble: this.listScrollAble,
         close: () => {
           this.closeDialog();
         }
       })
     }
     .height(this.dialogHeight + Consts.SHOP_BAR_HEIGHT)
     .backgroundColor(Color.White)
     .transition(
       TransitionEffect
         .move(TransitionEdge.BOTTOM)
         .animation({ duration: Consts.COMMENT_DIALOG_TRANS_DURATION, curve: Curve.Ease }))
   }
   .height($r('app.string.navdialog_full_size'))