首页 > 其他分享 >鸿蒙HarmonyOS NEXT开发:全屏模态转场

鸿蒙HarmonyOS NEXT开发:全屏模态转场

时间:2024-08-11 19:23:15浏览次数:17  
标签:10 console log 100% isShow NEXT HarmonyOS 全屏 BindContentCover

全屏模态转场

通过bindContentCover属性为组件绑定全屏模态页面,在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。

说明:

从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

不支持横竖屏切换。

不支持路由跳转。

bindContentCover

bindContentCover(isShow: boolean, builder: CustomBuilder, options?: ContentCoverOptions)

给组件绑定全屏模态页面,点击后显示模态页面。模态页面内容自定义,显示方式可设置无动画过渡,上下切换过渡以及透明渐变过渡方式。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

系统能力: SystemCapability.ArkUI.ArkUI.Full

参数:

参数名类型必填说明
isShowboolean是否显示全屏模态页面。
从API version 10开始,该参数支持$$双向绑定变量。
builderCustomBuilder配置全屏模态页面内容。
optionsContentCoverOptions配置全屏模态页面的可选属性。

ContentCoverOptions

继承自BindOptions

名称类型必填描述
modalTransitionModalTransition全屏模态页面的转场方式。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
onWillDismiss12+Callback<DismissContentCoverAction>全屏模态页面交互式关闭回调函数。
说明:
当用户执行back事件关闭交互操作时,如果注册该回调函数,则不会立刻关闭。在回调函数中可以通过reason得到阻拦关闭页面的操作类型,从而根据原因选择是否关闭全屏模态页面。在onWillDismiss回调中,不能再做onWillDismiss拦截。
transition12+TransitionEffect全屏模态页面的转场方式。

DismissContentCoverAction12+类型说明

名称类型必填描述
dismissfunction全屏模态页面关闭回调函数。开发者需要退出页面时调用。
reasonDismissReason返回本次拦截全屏模态页面退出的事件原因。

示例

示例1

全屏模态无动画转场模式下,自定义转场动画。

// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false

  @Builder myBuilder2() {
    Column() {
      Button("close modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow2 = false;
        })
    }
    .width('100%')
    .height('100%')
  }

  @Builder myBuilder() {
    Column() {
      Button("transition modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow2 = true;
        }).bindContentCover(this.isShow2, this.myBuilder2(), {
          modalTransition: ModalTransition.NONE, 
          backgroundColor: Color.Orange, 
          onWillAppear: () => {console.log("BindContentCover onWillAppear.")}, 
          onAppear: () => {console.log("BindContentCover onAppear.")}, 
          onWillDisappear: () => {console.log("BindContentCover onWillDisappear.")}, 
          onDisappear: () => {console.log("BindContentCover onDisappear.")}
        })

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindContentCover(this.isShow, this.myBuilder(), {
          modalTransition: ModalTransition.NONE, 
          backgroundColor: Color.Pink, 
          onWillAppear: () => {console.log("BindContentCover onWillAppear.")}, 
          onAppear: () => {console.log("BindContentCover onAppear.")}, 
          onWillDisappear: () => {console.log("BindContentCover onWillDisappear.")}, 
          onDisappear: () => {console.log("BindContentCover onDisappear.")}
        })
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor("#ff49c8ab")
    .width('100%')
    .height('100%')
  }
}
ts

示例2

全屏模态无动画转场模式下,自定义转场动画。

// xxx.ets
import curves from '@ohos.curves';
@Entry
@Component
struct ModalTransitionExample {
  @State  @Watch("isShow1Change") isShow:boolean = false
  @State  @Watch("isShow2Change") isShow2:boolean = false
  @State isScale1:number = 1;
  @State isScale2:number = 1;

  isShow1Change() {
    this.isShow ? this.isScale1 = 0.95 : this.isScale1 = 1
  }
  isShow2Change() {
    this.isShow2 ? this.isScale2 = 0.95 : this.isScale2 = 1
  }
  @Builder myBuilder2() {
    Column() {
      Button("close modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow2 = false;
        })
    }
    .width('100%')
    .height('100%')
  }


  @Builder myBuilder() {
    Column() {
      Button("transition modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow2 = true;
        }).bindContentCover(this.isShow2, this.myBuilder2(), {
          modalTransition: ModalTransition.NONE, 
          backgroundColor: Color.Orange, 
          onWillAppear: () => {console.log("BindContentCover onWillAppear.")}, 
          onAppear: () => {console.log("BindContentCover onAppear.")}, 
          onWillDisappear: () => {console.log("BindContentCover onWillDisappear.")}, 
          onDisappear: () => {console.log("BindContentCover onDisappear.")}
        })

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .scale({x: this.isScale2, y: this.isScale2})
    .animation({curve:curves.springMotion()})
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindContentCover(this.isShow, this.myBuilder(), {
          modalTransition: ModalTransition.NONE, 
          backgroundColor: Color.Pink, 
          onWillAppear: () => {console.log("BindContentCover onWillAppear.")}, 
          onAppear: () => {console.log("BindContentCover onAppear.")}, 
          onWillDisappear: () => {console.log("BindContentCover onWillDisappear.")}, 
          onDisappear: () => {console.log("BindContentCover onDisappear.")}
        })
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor("#ff49c8ab")
    .width('100%')
    .height('100%')
    .scale({ x: this.isScale1, y: this.isScale1 })
    .animation({ curve: curves.springMotion() })
  }
}
ts

示例3

全屏模态上下切换转场。

// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false

  @Builder myBuilder2() {
    Column() {
      Button("close modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow2 = false;
        })
    }
    .width('100%')
    .height('100%')
  }

  @Builder myBuilder() {
    Column() {
      Button("transition modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow2 = true;
        }).bindContentCover(this.isShow2, this.myBuilder2(), {
          modalTransition: ModalTransition.DEFAULT, 
          backgroundColor: Color.Gray, 
          onWillAppear: () => {console.log("BindContentCover onWillAppear.")}, 
          onAppear: () => {console.log("BindContentCover onAppear.")}, 
          onWillDisappear: () => {console.log("BindContentCover onWillDisappear.")}, 
          onDisappear: () => {console.log("BindContentCover onDisappear.")}
        })

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindContentCover(this.isShow, this.myBuilder(), {
          modalTransition: ModalTransition.DEFAULT, 
          backgroundColor: Color.Pink, 
          onWillAppear: () => {console.log("BindContentCover onWillAppear.")}, 
          onAppear: () => {console.log("BindContentCover onAppear.")}, 
          onWillDisappear: () => {console.log("BindContentCover onWillDisappear.")}, 
          onDisappear: () => {console.log("BindContentCover onDisappear.")}
        })
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .width('100%')
    .height('100%')
  }
}
ts

示例4

全屏模态透明度渐变转场。

// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false

  @Builder myBuilder2() {
    Column() {
      Button("close modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow2 = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }


  @Builder myBuilder() {
    Column() {
      Button("transition modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow2 = true;
        }).bindContentCover(this.isShow2, this.myBuilder2(), {
          modalTransition: ModalTransition.ALPHA, 
          backgroundColor: Color.Gray, 
          onWillAppear: () => {console.log("BindContentCover onWillAppear.")}, 
          onAppear: () => {console.log("BindContentCover onAppear.")}, 
          onWillDisappear: () => {console.log("BindContentCover onWillDisappear.")}, 
          onDisappear: () => {console.log("BindContentCover onDisappear.")}
        })

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindContentCover(this.isShow, this.myBuilder(), {
          modalTransition: ModalTransition.ALPHA, 
          backgroundColor: Color.Pink, 
          onWillAppear: () => {console.log("BindContentCover onWillAppear.")}, 
          onAppear: () => {console.log("BindContentCover onAppear.")}, 
          onWillDisappear: () => {console.log("BindContentCover onWillDisappear.")}, 
          onDisappear: () => {console.log("BindContentCover onDisappear.")}
        })
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .width('100%')
    .height('100%')
  }
}
ts

示例5

全屏模态自定义转场。

// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false

  @Builder myBuilder2() {
    Column() {
      Button("Close Modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow2 = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  @Builder myBuilder() {
    Column() {
      Button("Transition Modal 2")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow2 = true;
        })
        .bindContentCover(
          this.isShow2,
          this.myBuilder2(),
          {
            modalTransition: ModalTransition.DEFAULT,
            backgroundColor: Color.Gray,
            transition: TransitionEffect.SLIDE.animation({ duration: 5000, curve: Curve.LinearOutSlowIn }),
            onWillDismiss: ((dismissContentCoverAction: DismissContentCoverAction) => {
              if (dismissContentCoverAction.reason == DismissReason.PRESS_BACK) {
                console.log("BindContentCover dismiss reason is back pressed")
              }
              dismissContentCoverAction.dismiss()
            }),
            onAppear: () => { console.info("BindContentCover onAppear.") },
            onDisappear: () => { this.isShow2 = false; console.info("BindContentCover onDisappear.") }
          })

      Button("Close Modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(()=>{
          this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Button("Transition Modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindContentCover(
          this.isShow,
          this.myBuilder(),
          {
            modalTransition: ModalTransition.DEFAULT,
            backgroundColor: Color.Pink,
            transition: TransitionEffect.asymmetric(
              TransitionEffect.OPACITY.animation({ duration: 1100 }).combine(
                TransitionEffect.rotate({ z: 1, angle: 180 }).animation({ delay: 1000, duration: 1000 }))
              ,
              TransitionEffect.OPACITY.animation({ duration: 1200 }).combine(
                TransitionEffect.rotate({ z: 1, angle: 180 }).animation({ duration: 1300 }))
            ),
            onWillDismiss: ((dismissContentCoverAction: DismissContentCoverAction) => {
              if (dismissContentCoverAction.reason == DismissReason.PRESS_BACK) {
                console.log("back pressed");
              }
              dismissContentCoverAction.dismiss()
            }),
            onAppear: () => { console.log("BindContentCover onAppear.") },
            onDisappear: () => { this.isShow = false; console.log("BindContentCover onDisappear.") }
          })
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .width('100%')
    .height('100%')
  }
}
ts

标签:10,console,log,100%,isShow,NEXT,HarmonyOS,全屏,BindContentCover
From: https://blog.csdn.net/shudaoshanBBQ/article/details/141109901

相关文章

  • 鸿蒙HarmonyOS NEXT开发:触摸热区设置(触摸交互控制)
    触摸热区设置适用于支持通用点击事件、通用触摸事件、通用手势处理的组件。说明:从APIVersion8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。responseRegionresponseRegion(value:Array<Rectangle>|Rectangle)设置一个或多个触摸热区。......
  • js全屏,监听页面是否全屏
    要检测页面是否处于全屏模式,可以使用JavaScript提供的FullscreenAPI。以下是一个简单的示例代码,演示如何检测页面是否处于全屏模式://检测页面是否处于全屏模式functionisPageFullscreen(){return!!(document.fullscreenElement||document.mozFullScreenElemen......
  • next.js本地开发https实现
    很奇怪的需求,本地开发一般都是http://localhost:3000,但有些情况需要https://localhost:3000来debug,这类需求估计比较少,我看使用next.js的中文教程也比较少,这里记录一下。网上很多找到的教程都是自己去转一堆软件和依赖,还要分Mac和Windows,看着就头疼,这个实现方式是官方给的,通过NEX......
  • 鸿蒙(HarmonyOS)实现隐私政策弹窗
    在实现用户协议弹窗时,通常我们会想到使用系统自定义弹窗,并在弹窗中点击跳转到Web页面。但在HarmonyOS中,由于系统弹窗的显示优先级高于其他组件,即使跳转到Web页面,弹窗依然会显示在最上层。为了解决这个问题,我们可以自定义一个组件来模拟弹窗,这样当跳转到Web页面时,Web内容会覆盖这......
  • 鸿蒙HarmonyOS NEXT开发:图形变换(ArkTS通用属性)
    图形变换用于对组件进行旋转、平移、缩放、矩阵变换等操作。说明:从APIVersion7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。rotaterotate(value:RotateOptions)设置组件旋转。卡片能力: 从APIversion9开始,该接口支持在ArkTS卡片中使用......
  • 鸿蒙HarmonyOS NEXT开发:形状裁剪(ArkTS通用属性)
    形状裁剪用于对组件进行裁剪、遮罩处理。说明:从APIVersion7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。clip12+clip(value:boolean)是否对当前组件进行裁剪。系统能力: SystemCapability.ArkUI.ArkUI.Full参数:参数名类型必填说明valu......
  • 鸿蒙HarmonyOS NEXT开发:颜色渐变(ArkTS通用属性)
    颜色渐变设置组件的颜色渐变效果。说明:从APIVersion7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。linearGradientlinearGradient(value:{angle?:number|string;direction?:GradientDirection;colors:Array<[ResourceColor,number]......
  • 鸿蒙HarmonyOS NEXT开发:菜单控制(ArkTS通用属性)
    菜单控制为组件绑定弹出式菜单,弹出式菜单以垂直列表形式显示菜单项,可通过长按、点击或鼠标右键触发。说明:从APIVersion7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。CustomBuilder里不支持再使用bindMenu、bindContextMenu弹出菜单。多级菜......
  • 鸿蒙HarmonyOS NEXT开发:悬浮态效果(ArkTS通用属性)
    悬浮态效果设置组件的鼠标悬浮态显示效果。说明:从APIVersion8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。hoverEffecthoverEffect(value:HoverEffect)设置组件的鼠标悬浮态显示效果。原子化服务API: 从APIversion11开始,该接口支持在......
  • 鸿蒙(Harmony) NEXT - AlphabetIndexer实现联系人字母索引
    鸿蒙(Harmony)NEXT9月份就要正式上架了,并且不会再兼容安卓平台,于是我也赶紧给App开发鸿蒙版本,接下来会写一系列的Harmony开发教程。今天使用AlphabetIndexer实现联系人字母索引,AlphabetIndexer是官方封装好的组件咱们实现后的效果图:代码实现首先在aboutToAppear方法中初始......