HarmonyOS 鸿蒙Next 这段示例代码没有配置route_map为什么能够通过this.stack.pushPath({ name: "page" })跳转页面?

发布于 1周前 作者 caililin 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 这段示例代码没有配置route_map为什么能够通过this.stack.pushPath({ name: “page” })跳转页面?

this.stack.pushPath({ name: “page” }) 这里的“page”是哪个?怎么实现的name设定?

代码如下:

let COLOR1: string = "#80004AAF";
let COLOR2: string = "#802787D9";
let BLUR_STYLE_1: BlurStyle = BlurStyle.BACKGROUND_THIN;
let BLUR_STYLE_2: BlurStyle = BlurStyle.BACKGROUND_THICK;

@Component
struct BackComponent {
  build() {
    Row() {
      Column() {
      }
      .height('100%')
      .backgroundColor("#3D9DB4")
      .layoutWeight(9)

      Column() {
      }
      .height('100%')
      .backgroundColor("#17A98D")
      .layoutWeight(9)

      Column() {
      }
      .height('100%')
      .backgroundColor("#FFC000")
      .layoutWeight(9)
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct ColorAndBlur {
  @State useColor1: boolean = true;
  @State useBlur1: boolean = true;

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Center }) {
        BackComponent()
          .width('100%')
          .height('100%')
        Column() {
          Stack({ alignContent: Alignment.Center }) {
            Button("switch color")
              .onClick(() => {
                this.useColor1 = !this.useColor1;
              })
          }
          .width('100%')
          .layoutWeight(1)

          Stack({ alignContent: Alignment.Center }) {
            Button("switch blur")
              .onClick(() => {
                this.useBlur1 = !this.useBlur1;
              })
          }
          .width('100%')
          .layoutWeight(1)
        }
        .width('100%')
        .height('100%')
      }.width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    // 开发者可以设置标题栏的背景颜色和背景模糊效果
    .title("switch titlebar color and blur", {
      backgroundColor: this.useColor1 ? COLOR1 : COLOR2,
      backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2,
      barStyle: BarStyle.STACK
    })
  }
}

@Entry
@Component
struct Index {
  private stack: NavPathStack = new NavPathStack();
  @State useColor1: boolean = true;
  @State useBlur1: boolean = true;

  @Builder
  PageBuilder(name: string) {
    ColorAndBlur()
  }

  build() {
    Navigation(this.stack) {
      Stack({ alignContent: Alignment.Center }) {
        BackComponent()
          .width('100%')
          .height('100%')
        Column() {
          Stack({ alignContent: Alignment.Center }) {
            Button("switch color")
              .onClick(() => {
                this.useColor1 = !this.useColor1;
              })
          }
          .width('100%')
          .layoutWeight(1)

          Stack({ alignContent: Alignment.Center }) {
            Button("switch blur")
              .onClick(() => {
                this.useBlur1 = !this.useBlur1;
              })
          }
          .width('100%')
          .layoutWeight(1)

          Stack({ alignContent: Alignment.Center }) {
            Button("push page")
              .onClick(() => {
                this.stack.pushPath({ name: "page" })
              })
          }
          .width('100%')
          .layoutWeight(1)
        }
        .width('100%')
        .height('80%')
      }.width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .navDestination(this.PageBuilder)
    // 开发者可以设置标题栏的背景颜色和背景模糊效果
    .title("NavTitle", {
      backgroundColor: this.useColor1 ? COLOR1 : COLOR2,
      backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2,
      barStyle: BarStyle.STACK
    })
    // 开发者可以设置工具栏的背景颜色和背景模糊效果
    .toolbarConfiguration([
      { value: "a" },
      { value: "b" },
      { value: "c" }
    ], {
      backgroundColor: this.useColor1 ? COLOR1 : COLOR2,
      backgroundBlurStyle: this.useBlur1 ? BLUR_STYLE_1 : BLUR_STYLE_2
    })
  }
}

BlurStyle.gif

引自:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#%E7%A4%BA%E4%BE%8B5%E8%AE%BE%E7%BD%AE%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2%E5%92%8C%E6%A8%A1%E7%B3%8A%E6%95%88%E6%9E%9C


更多关于HarmonyOS 鸿蒙Next 这段示例代码没有配置route_map为什么能够通过this.stack.pushPath({ name: "page" })跳转页面?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

.navDestination(this.PageBuilder)

里面只有一个Page. 但是参数里面有name,没写

更多关于HarmonyOS 鸿蒙Next 这段示例代码没有配置route_map为什么能够通过this.stack.pushPath({ name: "page" })跳转页面?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中,页面跳转并不完全依赖于route_map配置。虽然route_map在复杂的应用架构中用于定义页面路由和传递参数,但鸿蒙系统也支持其他方式进行页面跳转。

this.stack.pushPath({ name: "page" })这种调用方式利用了鸿蒙系统提供的页面栈管理功能。页面栈管理允许开发者在运行时动态地管理页面堆栈,包括压栈(push)和出栈(pop)操作。这种机制不依赖于route_map的静态配置,而是通过动态指定页面名称或其他标识符来实现跳转。

具体到pushPath方法,它接受一个包含页面名称的对象作为参数,并尝试将该页面压入当前页面栈中。如果目标页面已经在应用中定义并正确注册(无论是否通过route_map),系统就能够根据提供的名称找到对应的页面并实现跳转。

因此,即便没有配置route_map,只要目标页面已经在应用中正确注册,this.stack.pushPath({ name: "page" })依然能够执行页面跳转。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部