學習目標:
掌握頁面跳轉
學習內容:
跳轉頁面
創建頁面:
在“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
這個我明天在摸索一下
---