HarmonyOS鸿蒙Next中怎么能够实现页面自动刷新?

HarmonyOS鸿蒙Next中怎么能够实现页面自动刷新? 我在开发中遇到一个问题,登录成功后router.back()回到之前页面,用onPageShow()如果登录成功了会使页面数据改变,但是页面的用户数据无法同步,还是没登录前的信息,需要用Refresh()组件手动刷新或者切换其他页面才能同步,该怎么实现页面自动刷新呢?

6 回复

【背景知识】

【解决方案】

使用以下代码在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了,

好的,十分感谢您,

在返回时的回调里面修改(状态)变量

在HarmonyOS Next中,可以通过以下方式实现页面自动刷新:

  1. 使用状态管理机制(如AppStorage或LocalStorage)存储登录状态,确保页面能响应状态变化并自动刷新UI。

  2. 在登录成功后,通过EventHub或自定义事件通知原页面更新数据,触发onPageShow()内的刷新逻辑。

  3. 结合@State@Prop装饰器,在数据变更时自动触发组件重新渲染,无需手动调用Refresh()。

具体实现可参考官方文档的状态管理章节。

回到顶部