如何实现模态转场操作过程？

操作步骤：

1、在页面Index中 ->使用模态打开->TestComponent

2、在组件TestComponent中 ->使用router打开->Index2

现象:

1、在操作步骤2中，TestComponent会被关闭

2、Index中的showThisComponent不会因为TestComponent的关闭而改变值，只能在aboutToDisappear中处理

期望：

在操作步骤2中，TestComponent不被关闭，Index2覆盖在Index与TestComponent之上

疑问

1、TestComponent为什么会被关闭

2、有什么办法能不让TestComponent关闭

3、这是故意这么设计的吗？还是我的使用方法/场景有问题

4、关于showThisComponent的改变，有更好的处理办法？在aboutToDisappear中处理，过于冗余了

HarmonyOS

superinsect

2024-09-23 16:29:14

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

建议使用if实现模态转场，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-modal-transition-V5

参考index页面 demo：

import { AlertDialog } from '@ohos.arkui.advanced.Dialog'  
import matrix4 from '@ohos.matrix4'  
import { curves } from '@kit.ArkUI'  
import { TestComponent } from './TestComponent'  
  
@Entry  
@Preview  
@Component  
struct Index {  
  @State @Watch("onShowThisComponentChange") showThisComponent: boolean = false  
  onShowThisComponentChange() {  
    console.log("xxx", `onShowThisComponentChange = ${this.showThisComponent}`)  
  }  
  
  build() {  
    Stack() {  
      Button("Open TestComponent by Modal")  
        .onClick(() => {  
          this.showThisComponent = !this.showThisComponent  
        })  
      if(this.showThisComponent){  
        TestComponent({  
          showThisComponent: this.showThisComponent  
        })  
          .transition(  
            TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) })  
          )  
      }  
    }  
    .alignContent(Alignment.Center)  
    // .bindContentCover(this.showThisComponent, this.testComponent(), ModalTransition.NONE)  
    .height("100%")  
    .width("100%")  
    .backgroundColor(Color.Orange)  
  }  
}