场景:
当我在pageA使用Tabs.TabContent控件时,其中有一个tab为个人信息,当我点击个人信息的时候,希望跳转到pageB;
问题描述
点击个人信息信息,确实跳转到了pageB,可是是在tab下显示的内容,我想要独立于tab显示;
//pageA import router from '@ohos.router'; import { userInfo} from '../user/userInfo' @Entry @Component struct userIndex { @State fontColor: string = '#182431' @State selectedFontColor: string = '#007DFF' @State currentIndex: number = 0 private controller: TabsController = new TabsController() @Builder tabBuilder(index: number, name: string) { Column() { Text(name) .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor) .fontSize(16) .fontWeight(this.currentIndex === index ? 500 : 400) .lineHeight(22) .margin({ top: 17, bottom: 7 }) Divider() .strokeWidth(2) .color('#007DFF') .opacity(this.currentIndex === index ? 1 : 0) }.width('100%') } build() { Column() { Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { TabContent() { Text('a') }.tabBar(this.tabBuilder(0, 'a')) TabContent() { Text('b') }.tabBar(this.tabBuilder(1, 'b')) TabContent() { Text('c') }.tabBar(this.tabBuilder(2, 'c')) TabContent() { userInfo() }.tabBar(this.tabBuilder(3, '个人信息')) } .vertical(false) .barMode(BarMode.Fixed) .barWidth(360) .barHeight(56) .animationDuration(400) .onChange((index: number) => { this.currentIndex = index }) .width('100%') .height('100%') .backgroundColor('#F1F3F5') }.width('100%')}
//pageB @Entry @Component export struct userInfo{ @State message: string = 'Hello World'; build() { RelativeContainer() { Text(this.message) .id('测试') .fontSize(50) .fontWeight(FontWeight.Bold) .alignRules({ center: { anchor: '__container__', align: VerticalAlign.Center }, middle: { anchor: '__container__', align: HorizontalAlign.Center } }) } .height('100%') .width('100%') } }
原因分析:
虽然我引入了pageB,但是我只是讲pageB放到了TabContent中,并没有执行跳转路由的操作;
解决方案:
在onchange中判断如果点到的是个人信息,就使用router跳转到pageB;
注意注意:其实我第一次用的就是router,但是url写的是‘../包名/文件名’死活跳不过去,我以为在tab中不能使用router,然后去官网论坛问了一下,别人说用router,然后我点了一下跳转到router的使用说明文档里,就看到了关键的一句话,url的路径要和main_pages.json的定义文件路径一样!!!
.onChange((index: number) => { this.currentIndex=index if(index === 3){ router.pushUrl({url:'pages/userInfo'}).then(()=>{ // }).catch(()=>{ // }) } })