中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
自定义的CustomDialog中,跳转另一个Page时,不会覆盖CustomDialog跳转,而是在当前Page进行跳转,导致跳转到新Page时,上个Page的CustomDialog还存在!
这种情况应该如何解决了?
微信扫码分享
import router from '@ohos.router'; @Entry @Component struct First { // 显隐控制设置为不占用 @State visible: Visibility = Visibility.None build() { // 使用stack可以实现假的dialog覆盖原页面上面 Stack() { Row() { // 初始页面 Column() { // 触发dialog的地方 Button('click').onClick(() => { //用于检测点击事件是否透传到原来的页面,是符合dialog规范 console.log("hit me!") if (this.visible == Visibility.Visible) {this.visible = Visibility.None} else {this.visible = Visibility.Visible} }).fontColor(0x000000) }.width('100%') }.height('100%') Column() { // 这个可以调节对话框效果,栅格布局,xs,sm,md,lg分别为四种规格 // 下面的breakpoints是用来区别当前属于哪个类型的断点。gridRow里的栅格数量为总数,gridCol里的就是偏移和假Dialog所占据的栅格数 GridRow({ columns:{xs:1 ,sm: 4, md: 8, lg: 12}, breakpoints: { value: ["400vp", "600vp", "800vp"], reference: BreakpointsReference.WindowSize }, }) { GridCol({ span:{xs:1 ,sm: 2, md: 4, lg: 8}, offset:{xs:0 ,sm: 1, md: 2, lg: 2} }) { // 这里放的就是原Dialog里的column里的东西,稍微改改应该就可以用了 Column() { Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 }) Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('cancel').onClick(() => { if (this.visible == Visibility.Visible) {this.visible = Visibility.None} else {this.visible = Visibility.Visible} }).backgroundColor(0xffffff).fontColor(Color.Black) Button('jump').onClick(() => {router.pushUrl({ url: 'pages/Page1' })}).backgroundColor(Color.Black).fontColor(Color.Red) }.margin({ bottom: 10 }) }.backgroundColor(Color.Grey).visibility(this.visible).clip(true).borderRadius(20) } } }.width('95%')//设置弹窗宽度 } } } 2.使用NavDestination的Dialog模式实现自定义弹窗 @Component export struct PrivacyDialog { @Consume('pageInfo') pageStack : NavPathStack; @State isAgree: string = "Not Agree"; build() { NavDestination(){ Stack({ alignContent: Alignment.Center }){ // 蒙层 Column() { } .width("100%") .height("100%") .backgroundColor('rgba(0,0,0,0.5)') // 隐私弹窗 Column() { Text("注册应用账号").fontSize(30).height('20%') Text("请 仔细阅读一下协议并同意,我们将全力保护 的个人信息安全, 可以使用账号登录APP。").height('40%') Divider() Row(){ // 点击隐私条款,跳转到隐私条款页面,并接受隐私条款的返回值,用来刷新页面的同意状态。 Text("《应用隐私政策》").onClick(ent => { let pathInfo : NavPathInfo = new NavPathInfo('PrivacyItem', null , (popInfo: PopInfo) => { this.isAgree = popInfo.result.toString(); }) this.pageStack.pushDestination(pathInfo, true) }) Text(this.isAgree) }.height('20%') Divider() // 点击同意不同意按钮,将状态返回登录页 Row(){ Button("不同意").onClick(ent => { this.pageStack.pop("Not Agree", true) }).width('30%') Button("同意").onClick(ent => { this.pageStack.pop("Agree", true) }).width('30%') }.height('20%') }.backgroundColor(Color.White) .height('50%') .width('80%') } }.hideTitleBar(true) // 设置Dialog类型 .mode(NavDestinationMode.DIALOG) } }