HarmonyOS鸿蒙Next中怎么能够实现页面自动刷新?
HarmonyOS鸿蒙Next中怎么能够实现页面自动刷新? 我在开发中遇到一个问题,登录成功后router.back()回到之前页面,用onPageShow()如果登录成功了会使页面数据改变,但是页面的用户数据无法同步,还是没登录前的信息,需要用Refresh()组件手动刷新或者切换其他页面才能同步,该怎么实现页面自动刷新呢?
【背景知识】
- router.back:返回上一页面或指定的页面。
- [@State装饰的变量](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-state),或称为状态变量,一旦变量拥有了状态属性,就可以触发其直接绑定UI组件的刷新。当状态改变时,UI会发生对应的渲染改变。[@Observed/@ObjectLink配套使用](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-observed-and-objectlink)是用于嵌套场景的观察,主要是为了弥补装饰器仅能观察一层的能力限制,可以用来观察二维数组、数组项class、class的属性是class,这些第二层的属性变化。
【解决方案】
使用以下代码在back的时候可以接收到back中返回的参数并展示了信息刷新了页面,可以参考下代码,看下是否有用@State修饰,如果是直接使用类的时候是否使用了@Observed/@ObjectLink。
- 在目标页面的onPageShow生命周期里,通过router.getParams()方法接收传来的参数。
- 注意接收params参数的变量与传入的params类型必须保持一致。
// Index.ets页面
import { router } from '@kit.ArkUI';
[@Observed](/user/Observed)
class InfoTmp {
info: string = ''
}
@Component
struct Child {
[@ObjectLink](/user/ObjectLink) infoTmp: InfoTmp;
build() {
Column() {
Text(this.infoTmp.info)
.margin({ top: 90, left: 150 })
}
}
}
@Entry
@Component
struct Index {
[@State](/user/State) messageIndex: string = '';
[@State](/user/State) message: string = '测试router.back()携带参数';
[@State](/user/State) receiveParams: InfoTmp = new InfoTmp()
// 在目标页面的onPageShow生命周期里,通过router.getParams()接受传来的参数
onPageShow(): void {
if (router.getParams() != undefined) {
this.receiveParams = router.getParams() as InfoTmp
}
}
build() {
RelativeContainer() {
// 展示参数信息
Child({ infoTmp: this.receiveParams })
Text(this.message)
.id('HelloWorld')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.alignRules({
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
Button('跳转下一页')
.height(50)
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center },
top: { anchor: 'HelloWorld', align: VerticalAlign.Center }
})
.onClick(() => {
router.pushUrl({
url: 'pages/SecondPage',
params: { info: '来自Index页' }
})
})
}
.height('100%')
.width('100%')
}
}
// SecondPage.ets页面
import { router } from "@kit.ArkUI"
class InfoTmp {
info: string = ''
}
@Entry
export struct SecondPage {
[@State](/user/State) messageIndex: string = '';
// 通过router.getParams()方法获取参数
[@State](/user/State) params: InfoTmp = router.getParams() as InfoTmp
build() {
RelativeContainer() {
Text(`${this.params.info}`)
.margin({ top: 90, left: 150 })
Text(' this is SecondPage')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.alignRules({
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
Button('返回上一页并携带参数')
.height(50)
.margin({ top: 150, left: 100 })
.onClick(() => {
router.back({
url: 'pages/Index',
params: {
info: '来自Second页'
}
})
})
}
.width('100%')
.height('100%')
}
}
如果还是不行,可以提供下复现代码
更多关于HarmonyOS鸿蒙Next中怎么能够实现页面自动刷新?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
很感谢你的帮助,我已经弄好了,除此之外我还有另一个关于返回参数的问题,我的login点击返回时候,想执行如下代码
router.replaceUrl({
url: 'pages/Index',
params: { selectedTab: '3' } // 返回到Index页面并选中Mine标签
})
我的index界面是一个tab菜单,通过调用不同界面替换,login返回逻辑就如同注释所言,login代码如下所示:
import { Mypage } from './MyPage'
import { TabClass, tabs} from '../datas/Data'
import { Mine } from './Mine'
import { router } from '@kit.ArkUI'
import { Table } from './Table'
import {Rank} from './Rank'
@Entry
@Component
struct Index {
@State currentIndex: number = 0
aboutToAppear(): void {
this.check()
}
onPageShow(): void {
this.check()
}
check(){
const params = router.getParams() as Record<string, string> | null
const selectedTab = params?.selectedTab
const tabIndex = Number(selectedTab)
if (!isNaN(tabIndex) && tabIndex >= 0 && tabIndex < tabs.length) {
this.currentIndex = tabIndex
}
}
@Builder
tabBuilder(item: TabClass, index: number) {
Column({ space: 7 }) {
Image(item.icon)
.width(25)
.fillColor(this.currentIndex === index ? '#007DFF' : '#63AAAA')
Text(item.text)
.fontSize(13)
.fontColor(this.currentIndex === index ? '#007DFF' : '#63AAAA')
}
.margin({top:10})
}
build() {
Tabs({ barPosition: BarPosition.End }) {
ForEach(tabs, (item: TabClass, index: number) => {
TabContent() {
if (this.currentIndex === 0) {
Mypage()
} else if (this.currentIndex === 1) {
Table()
} else if (this.currentIndex === 2) {
Rank()
} else {
Mine()
}
}
.tabBar(this.tabBuilder(item, index))
})
}
.onChange((index: number) => {
this.currentIndex = index
})
}
}
但我遇到了一个问题,当从login执行逻辑并返回index界面选中mine界面后,我点击菜单第一个无法执行Mypage(),始终无反应,但我点击其他界面都可以执行,并且点击其他界面执行后第一个界面也能正常切换,我不理解是因为什么,希望您能解答,
Tabs({ barPosition: BarPosition.End,index: this.currentIndex })这边需要加上index,不然他默认是0,这样切换就不会触发onChange了,
好的,十分感谢您,
在返回时的回调里面修改(状态)变量