当前位置：首页 > news >正文

OpenHarmony：App（页面跳转）

news 2025/9/13 8:36:49

src/main/resources/base/profile/main_pages.json：

{"src": ["pages/Index","pages/PageA","pages/PageB","pages/PageC"]
}

一：页面路由

Index.ets:

import router from '@ohos.router';@Entry
@Component
struct IndexPage {build() {Column() {Text("生产测试程序").fontSize(25).margin(10)Button('跳转到页面A').onClick(() => {router.push({ url: 'pages/PageA' });}).width('50%').margin(10)Button('跳转到页面B').onClick(() => {router.push({ url: 'pages/PageB' });}).width('50%').margin(10)Button('跳转到页面C').onClick(() => {router.push({ url: 'pages/PageC' });}).width('50%').margin(10)}.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)}
}

PageA.ets:

import router from '@ohos.router';@Entry
@Component
struct PageA {build() {NavDestination() {Column() {Text('这是页面A').fontSize(20)Button('返回首页').onClick(() => {try {// 方式1：指定目标页面uri（需在main_pages.json注册）router.back({ url: 'pages/Index' });} catch (err) {console.error(`返回失败: ${err.message}`);}});}.width('100%').height('100%')}.title('PageA')}
}

PageB.ets，PageC.ets类似。

二：List容器

Index.ets:

import { PageA } from './PageA'
import { PageB } from './PageB'
import { PageC } from './PageC'@Entry
@Component
struct IndexPage {pathStack: NavPathStack = new NavPathStack();@BuilderPageMap(name: string) {if (name === "first_page") {PageA()} else if (name === "second_page") {PageB()} else if (name === "third_page") {PageC()}}build() {Navigation(this.pathStack) {List({ space: 4 }) {ListItem() {Button("First").onClick(() => {this.pathStack.pushPath({ name: "first_page" });}).width('100%')}ListItem() {Button("Second").onClick(() => {this.pathStack.pushPath({ name: "second_page" });}).width('100%')}ListItem() {Button("Third").onClick(() => {this.pathStack.pushPath({ name: "third_page" });}).width('100%')}}.listDirection(Axis.Vertical).backgroundColor(0xFFFFFF).padding(20)}.mode(NavigationMode.Stack).navDestination(this.PageMap)}
}

PageA:

@Entry
@Component
export struct PageA {pathStack: NavPathStack = new NavPathStack();build() {NavDestination() {Column() {Text("first_page")}.width('100%').height('100%')}.title("pageOne").onBackPressed(() => {const popDestinationInfo = this.pathStack.pop(); // 弹出路由栈栈顶元素console.info('pop' + '返回值' + JSON.stringify(popDestinationInfo));return true}).onReady((context: NavDestinationContext) => {this.pathStack = context.pathStack;})}
}