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

HarmonyOS
2024-12-02 15:00:01
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
樱花语P9P

为了在鸿蒙开发中创建一个带有评论弹窗的商品介绍页面,通过使用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'))
    
分享
微博
QQ
微信
回复
2024-12-02 16:30:02
相关问题