HarmonyOS鸿蒙Next中画中画开启后，进入参数不同但组件相同的页面时，如何重新渲染页面

HarmonyOS鸿蒙Next中画中画开启后，进入参数不同但组件相同的页面时，如何重新渲染页面如题，在画中画开启后，进入参数不同但组件相同的页面时，并不会调用onReady方法，也没有找到其他可以获取新参数并渲染页面的方法。

如果是使用的navigation，可以试下这个方案：

主体思路：navigation页面（主页面），监听下子页面（NavDestination页面）上返回的画中画窗口开启和关闭，并保存起来，在下次点击跳转的时候，判断页面是否正在开启画中画内容，开启的话，给子页面发送消息，让它停止画中画，并在停止画中画，之后执行跳转命令（这个命令只能执行一次，执行结束必须立即销毁）

关键代码：

主页面 WindowPip.ets

@State isOpenPopWindow: boolean = false;

aboutToAppear(): void {
  //订阅指定事件，监听子组件内部的小窗变化
  getContext().eventHub.on('pipWindowChange', (isOpen: boolean) => {
    this.isOpenPopWindow = isOpen
  });
}

2、路由跳转的时候，判断是否开启小窗动画，根据是否启用，做两种处理

.onClick(() => {
if(this.isOpenPopWindow){
  getContext().eventHub.emit('onStateChange', true, () => {
    this.pageInfos?.pushPath({ name: Constants.NAV_DESTINATION_NAME,param: this.titleResource });//将info指定的NavDestination页面信息入栈。
  });//订阅指定事件。
  return
}
this.pageInfos?.pushPath({ name: Constants.NAV_DESTINATION_NAME,param: this.titleResource });//将info指定的NavDestination页面信息入栈。
})

子页面 VideoPlay.ets

1、监听跳转时，需要关闭小窗事件，需要保存跳转方法，在真正停止播放的地方，执行一次

this.eventHub.on('onStateChange', (fg: boolean, callBack: () => void) => {
if (fg && this.curState === 'STARTED') {
  this.stopPip();
  this.closePipCallBack = callBack
}
});

2、开启小窗的时候，发送小窗开启消息给主页面

this.eventHub.emit('pipWindowChange', true)

3、关闭小窗的时候，发送小窗关闭消息给主页面，和执行一次性的跳转方法 – 只有在监听小窗的state方法里面，监听到小窗关闭才能是最终的，其他地方监听，小窗未真正关闭

case PiPWindow.PiPState.STOPPED:
this.eventHub.emit('pipWindowChange', false)
this.player?.updatePlayStatus(true);
this.player?.play();
this.curState = 'STOPPED';
this.curError = Constants.ERROR_BY_DEFAULT;
if(this.closePipCallBack){
  // 一次性方法
  this.closePipCallBack()
  this.closePipCallBack = undefined
}
break;

更多关于HarmonyOS鸿蒙Next中画中画开启后，进入参数不同但组件相同的页面时，如何重新渲染页面的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

wuwangju 2楼•2 天前

在HarmonyOS鸿蒙Next中，画中画开启后，进入参数不同但组件相同的页面时，可以通过@State或@Link装饰器来管理组件的状态，并在页面跳转时触发重新渲染。具体步骤如下：

使用@State或@Link管理状态：在组件中定义状态变量，确保这些变量能够响应数据变化并触发UI更新。例如：

@State private data: string = '';

在aboutToAppear生命周期中更新状态：当页面即将显示时，可以通过aboutToAppear生命周期函数来更新状态变量，从而触发页面的重新渲染。例如：

aboutToAppear() {
    this.data = this.getNewData(); // 根据新参数获取数据
}

确保组件依赖状态变量：在组件的UI布局中，确保组件的内容依赖于状态变量，这样当状态变化时，组件会自动重新渲染。例如：

build() {
    Column() {
        Text(this.data)
    }
}

处理页面参数传递：在页面跳转时，确保新页面的参数能够正确传递，并在aboutToAppear中根据新参数更新状态。

通过以上步骤，可以在画中画开启后，进入参数不同但组件相同的页面时，实现页面的重新渲染。

vueper 3楼•2 天前

在HarmonyOS鸿蒙Next中，当画中画开启后，进入参数不同但组件相同的页面时，可以通过以下步骤重新渲染页面：

监听参数变化：在页面的onPageShow生命周期中监听传入参数的变化。
更新状态：根据新的参数更新组件的状态或数据。
强制渲染：调用this.forceUpdate()方法强制组件重新渲染。

例如：

onPageShow() {
  const newParams = this.getParams(); // 获取新参数
  if (this.params !== newParams) {
    this.params = newParams;
    this.forceUpdate(); // 强制重新渲染
  }
}

这样可以确保页面在参数变化时正确更新显示内容。