Location>code7788 >text

Getting Started with Hongmeng Navigation

Popularity：609 ℃/2024-11-14 22:30:09

Navigation component is suitable for intra-module and cross-module routing switching, through the component-level routing capabilities to achieve a more natural and smooth transition experience, and provides a variety of title bar styles to present a better title and content linkage effect. Under one-time development and multi-deployment scenarios, Navigation component can automatically adapt to the window display size, and automatically switch to the split-column display effect in larger window scenarios.

Root Page Setup

We use Navigation as the root page at the entrance of Entry, here we will face a problem, how to jump from the start page to the home page, and close the start page, using the home page has been left in the page stack, do not allow the destruction, in the previous article "hongmeng Navigation to deal with the problem of jumping from the start page to the home page" there are ways to deal with it, not to be expanded here. When using Navigation, due to the default with TitleBar and Toolbar, the style is not good to customize, we directly hide the TitleBar and Toolbar, if you actually need it, you can implement it yourself. As the default is Auto mode, in order to adapt to large-screen devices, if we do not use the effect of columns on large-screen devices, you can force the setting of single-page mode.

@Entry
@ComponentV2
struct Index {
  nav: NavPathStack = new NavPathStack()

  build() {
    Navigation()
    .mode()
    .hideToolBar(true)
    .hideTitleBar(true)
    .height('100%')
    .width('100%')
  }
}

System routing table configuration

Next we need to configure the system routing table, create a new json file in the resources/base/profile directory, e.g. router_map.json, and configure the relevant routing pages in it, e.g. we configure a popup page and a login page.

{
  "routerMap": [
    {
      "name": "dialog",
      "pageSourceFile": "src/main/ets/pages/dialog/",
      "buildFunction": "dialogBuilder"
    },
    {
      "name": "login",
      "pageSourceFile": "src/main/ets/pages/login/",
      "buildFunction": "loginBuilder"
    }
  ]
}

Inside the routerMap, configure the specific page, name is the page name, use push to open the new page, the name name passed is defined here. pageSourceFile is the page source file, buildFunction is the page entry builder, through the source file to find the entry builder. in the module.json5 file there is a routerMap field, the value is the router_map.json we defined earlier.

Implementing subpages

After the routing table is defined, we need to realize the specific page, here to realize a pop-up page and a standard page. The popup window example is as follows, the page mode needs to be set to

@Builder
function dialogBuilder() {
  DialogPage()
}
@ComponentV2
export struct DialogPage {
  build() {
    NavDestination() {
      Stack() {
        Column() {
          Text('pop-up window title')
          Text('Pop-up window content')

          Row() {
            Text('abolish').layoutWeight(1)
            Text('recognize').layoutWeight(1)
          }
        }
        .width('80%')
        .borderRadius(16)
        .backgroundColor($r('.start_window_background'))
      }.width('100%').height('100%')
    }.hideTitleBar(true).mode()
  }
}

The standard login page is as follows, the default is standard mode, mode can be omitted without setting

@Builder
function loginBuilder() {
  LoginPage()
}
@ComponentV2
export struct LoginPage {
  build() {
    NavDestination() {
      Column() {
        Text('username')
        Text('cryptographic')
        Text('log in')
      }
    }
    .width('100%')
    .height('100%')
    .hideTitleBar(true)
  }
}

page jump operation

Open new page

Using NavPathStack pushPath or pushPathByName can open a new page, for example, to open the login page is ('login', undefined), show a pop-up window is ('dialog', undefined). You can find the use of Navigation to achieve the pop-up window is very simple, and can be displayed globally, does not depend on the specific page and Context, and pop-up window has to show the hidden and other callbacks.

Back to page

Use NavPathStack's pop method to close the current page and go back to the previous page, we can also use popToName to return to the specified page, you can also use popToIndex to return to the first few pages, or even use the clear method to return directly to the home page, it is still very convenient to use.

<Previous Next>