学习目标:
掌握页面跳转
学习内容:
跳转页面
创建页面:
在“project”窗口。打开“entry>src>main>ets”,右击“pages”,选择“New>ArkTS File”,命名“Second”,点击回车键。
在页面的路由,project窗口,打开“entry>src>main>resources”>base>profile,在main_pages.json的src中配置页面路由
"src": ["pages/Index","pages/Second"]
实现页面间的跳转
2.1页面间的导航可以通过页面路由router来实现。
第一个
// 跳转按钮绑定onClick事件,点击时跳转到第二页.onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)// 跳转到第二页router.pushUrl({ url: 'pages/Second' }).then(() => {console.info('Succeeded in jumping to the second page.')}).catch((err: BusinessError) => {console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)})})
报错的原因是没有导包,莫慌
在红线,用鼠标指向,会弹出这个框框,在点击add,包就导入了。
第二个页面就可以了
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')// 返回按钮绑定onClick事件,点击按钮时返回到第一页.onClick(() => {console.info(`Succeeded in clicking the 'Back' button.`)try {// 返回第一页router.back()console.info('Succeeded in returning to the first page.')} catch (err) {let code = (err as BusinessError).code;let message = (err as BusinessError).message;console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)}})}.width('100%')}.height('100%')}
}
->
2.2如果需要实现更好的转场动效,推荐使用Navigation
这个我明天在摸索一下
---