【鸿蒙ArkUI路由/导航系列】十一：Navigation弹窗页面开发

1、概述

Navigation的子页（NavDesination）具有两种模式：Standard和Dialog，通过NavDestination的mode属性设置。

• Standard：标准页面，默认具有白色背景，页面栈中仅有最上层的Standard页面可以显示，其他Standard页面会隐藏不可见，且不可刷新状态，一般用于常规的页面信息显示；

• Dialog：Dialog页面，默认具有透明背景，Dialog页面可在Standard页面之上显示，可同时显示多个，Dialog页面不影响其下层Standard页面的显示和交互，一般用于弹窗信息显示。

示例效果如下：

• NavDestinationMode.STANDARD

• NavDestinationMode.DIALOG

需要注意的是：

API version 13之前，Dialog页面默认无系统转场动画。从API version 13开始，默认支持从底部弹出的系统转场动画。

具体动画类型可以参考： NavDestination-导航与切换-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

2、案例分享

这里用Dialog类型的NavDestination来演示一个购物应用的购物车页面场景：

首先定义一个STANDARD类型的产品页，然后产品页有一个购物车按钮，点击该按钮时会弹出一个Dialog页面，而购物车的信息就承载在该Dialog页面。

2.1 Navigation首页

//src/main/ets/pages/Index.ets
@Entry
@Component
struct Index {
  private stack: NavPathStack = new NavPathStack();
  aboutToAppear(): void {
    // 这里为了演示功能，一开始就push一个产品页
    this.stack.pushPath({name: 'Product'})
  }
  build() {
    Navigation(this.stack) {
    }
    .hideNavBar(true)
    .height('100%')
    .width('100%')
  }
}

2.2 产品页

//src/main/ets/pages/ProductPage.ets
import { SymbolGlyphModifier } from "@kit.ArkUI";
@Component
struct ProductPage {
  private stack: NavPathStack | undefined = undefined;
  build() {
    NavDestination() {
    }.title('产品页')
    .toolbarConfiguration([
      {
        value: '购物车',
        symbolIcon: new SymbolGlyphModifier($r('sys.symbol.cart')),
        action: () => {
          this.stack?.pushPath({name: "ShoppingCart"})
        }
      }
    ])
    .mode(NavDestinationMode.STANDARD)
    .onReady((ctx: NavDestinationContext) => {
      this.stack = ctx.pathStack;
    })
  }
}
@Builder
export function ProductPageBuilder() {
  ProductPage()
}

2.3 购物车页

//src/main/ets/pages/ShoppingCartPage.ets
class ProductInfo  {
  // 产品名称
  name: string;
  // 产品数量
  count: number;
  constructor(name: string, count: number) {
    this.name = name;
    this.count = count;
  }
}
@Component
struct ShoppingCartPage {
  private stack: NavPathStack | undefined = undefined;
  private products: Array<ProductInfo> = new Array<ProductInfo>();
  aboutToAppear(): void {
    // 这里假设购物车中已经有一些产品了
    for (let i = 0; i < 50; i++) {
      this.products.push(new ProductInfo(`产品${i}`, i + 1));
    }
  }
  build() {
    NavDestination() {
      Column() {
        Blank().onClick(() => {
          // 点击Dialog页面空白区域时会自动返回到产品页
          this.stack?.pop()
        }).width('100%').layoutWeight(1)
        Column() {
          // 购物车列表
          Text('购物车').fontSize(20).margin(8)
          List() {
            ForEach(this.products, (info: ProductInfo, index: number) => {
              ListItem() {
                Row() {
                  Text(`${info.name}`).margin(12).fontSize(18).fontColor(Color.Black)
                  Text(`数量：${info.count}`).fontSize(13).margin({right: 18})
                }.margin({bottom: 15 }).backgroundColor('#fff3dab9').width('100%').justifyContent(FlexAlign.SpaceBetween)
                .borderRadius(15).height(80)
              }.width('100%')
            }, (info: ProductInfo, index: number) => {
              return info.name;
            })
          }
        }.width('100%').layoutWeight(2).backgroundColor('#ffdaf3b5').border({})
      }.width('100%').height('100%')//.backgroundColor('#2df8e8e8')
    }
    .hideTitleBar(true)
    .hideToolBar(true)
    // 购物车页面为Dialog类型页面
    .mode(NavDestinationMode.DIALOG)
    .onReady((ctx: NavDestinationContext) => {
      this.stack = ctx.pathStack;
    })
  }
}
@Builder
export function ShoppingCartPageBuilder() {
  ShoppingCartPage()
}

2.4 demo运行效果

3、附件

上述案例完整示例代码如下：

(代码链接待补充)