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

CTrup

于 2024-09-19 14:22:41 发布

阅读量1.3k

点赞数 31

CC 4.0 BY-SA版权

分类专栏：移动开发鸿蒙开发 HarmonyOS 文章标签： harmonyos 鸿蒙开发 ArkUI 移动开发组件化界面布局

本文链接：https://blog.youkuaiyun.com/CTrup/article/details/142359304

往期知识点整理

介绍

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

效果预览图

使用说明

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

实现思路

创建商品介绍页面。

通过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