HarmonyOS NEXT实战开发：全屏模态转场(bindContentCover)

最新推荐文章于 2024-08-11 19:10:56 发布
最新推荐文章于 2024-08-11 19:10:56 发布
阅读量882 收藏 14
点赞数 8
分类专栏： 鸿蒙 鸿蒙next版 文章标签： harmonyos 华为 android 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanyanyou/article/details/140535247
版权

通过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%')
  }
}

示例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() })
  }
}

示例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%')
  }
}

示例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%')
  }
}

示例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%')
  }
}

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

「已注销」
关注
  • 8
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenHarmony实战开发-如何使用bindContentCover、transition、animateTo实现一镜到底转场动画。
2401_82546228的博客
04-17 1512
本示例介绍使用bindContentCover、transition、animateTo实现一镜到底转场动画，常用于首页搜索框点击进入搜索页场景。
ClonalG选择免疫算法：多模态优化函数-matlab开发
06-01
通过编写MATLAB代码，我们可以创建一个自适应的搜索策略，模拟生物免疫系统的动态行为来解决多模态优化问题。 **多模态优化函数** 多模态优化函数是指具有多个局部极小值和全局最小值的函数。这类函数在实际问题中...
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：透明度设置）
m0_64420071的博客
03-01 2454
ArkTS声明式开发（通用属性：透明度设置）
【HarmonyOS NEXT】如何设置页面透明度
Mayism123的博客
03-11 1173
BPage.ets aboutToAppear中的hello需要修改成subWindow。想实现一个透明页的page。有什么方法设置page透明度？可以尝试通过设置子窗口的方式，设置子窗口透明化。半透明 / 页面UI / 半模态。
HarmonyOS NEXT应用开发之搜索页一镜到底案例
maniuT的博客
03-19 719
本示例介绍使用bindContentCover、transition、animateTo实现一镜到底转场动画，常用于首页搜索框点击进入搜索页场景。
鸿蒙eTS的.backgroundColor如何设置透明色
XJG13117的博客
06-26 707
用.backgroundColor来设置按钮背景透明
人工智能行业专题报告：多模态AI研究框架
06-10
### 人工智能行业专题报告：多模态AI研究框架 #### 一、AI模型从单模态向多模态演进，未来有望实现认知智能 随着人工智能技术的发展，AI模型正逐步从处理单一类型的数据（如纯文本或纯图像）向能够处理多种不同...
harmonyos英文怎么读-HarmonyOS-Learn:等待内容~
07-01
HarmonyOS-Learn是学习HarmonyOS开发的资源集合，通常包含文档、教程、示例代码等内容，帮助开发者快速掌握HarmonyOS的开发技能。在"HarmonyOS-Learn-master"这个压缩包中，你可能找到的资料有： 1. **开发文档**: ...
模态框：创建模态框所需要的引入文件
04-25
在网页设计和开发中，模态框是一种非常实用的元素，它可以在用户当前浏览的页面上弹出一个浮动窗口，用于展示额外的信息或执行特定的操作，而不会中断用户的浏览流程。"模态框：创建模态框所需要的引入文件"这个主题...
人工智能行业专题报告：多模态AI研究框架.pdf
10-21
【人工智能行业专题报告：多模态AI研究框架】 在当今快速发展的信息技术领域，人工智能（AI）正成为推动科技进步的关键力量。随着技术的不断进化，AI模型已经从单一模态（如文本、语音或图像）逐渐转向多模态，这...
HarmonyOS开发07：案例——双击点赞双击取消
GeniusAng的博客
07-21 127
首先把需要用到的图片放入media文件夹 修改ability_main.xml文件 <?xml version="1.0" encoding="utf-8"?> <DirectionalLayout ohos:id="$+id:dl" xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:al
鸿蒙HarmonyOS NEXT开发：半模态转场
最新发布
shudaoshanBBQ的博客
08-11 1146
通过bindSheet属性为组件绑定半模态页面，在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。
鸿蒙实现双击事件
qq_32473497的博客
12-01 466
鸿蒙实现双击事件
【HarmonyOS NEXT】如何设置@Entry实现全透明或者半透明效果
Mayism123的博客
06-19 599
想实现A页面弹出B页面，B页面设置半透明背景的效果。@Entry可以实现全透明或者半透明效果吗？现在目前设置了"#80000000"可以隐约看到上一页的内容，但是不是"#80000000"真正的效果，即使设置全透明"#00000000"页看不到全透的效果。此场景可以将B页面作为一个子窗口加载然后将子窗口设置为透明背景，这样来实现背景半透明效果。Entry/ 全透明 / 半透明 / 弹出。
【HarmonyOS】低代码项目中设置拖拽组件背景色透明度问题
Mayism123的博客
06-26 751
3）若未给组件设置背景色透明度时先在主模块entry中引用子模块library中自定义组件，然后再修改子模块中自定义组件背景色透明度，将BackgroundColor设置为#ff000000，此时子模块library预览无问题，entry模块IDE会报错提示如下图，但运行不报错。API9 HarmonyOS工程要想entry主模块引用其他子模块组件，可在应用级oh-package.json5文件dependencies设置如下，同步工程后即可在entry的visual文件中引用子模块自定义组件。
鸿蒙ArkUI开发-属性动画的使用
m0_62167422的博客
01-25 1700
属性动画，是最为基础的动画，其功能强大、使用场景多，应用范围较广。简单来说，属性动画是组件的通用属性发生改变时而产生的属性渐变效果。如下图所示，其原理是，当组件的通用属性发生改变时，组件状态由初始状态逐渐变为结束状态的过程中，会创建多个连续的中间状态，逐帧播放后，就会形成属性渐变效果，从而形成动画。
鸿蒙Harmony应用开发—ArkTS声明式开发（模态转场设置：全屏模态转场）
m0_64420071的博客
03-05 9244
ArkTS声明式开发-模态转场设置：全屏模态转场
OpenHarmony实战开发-如何实现模态转场
m0_70749039的博客
04-28 7661
模态转场是新的界面覆盖在旧的界面上，旧的界面不消失的一种转场方式。
鸿蒙全屏模态转场方式
07-16
鸿蒙系统(HarmonyOS)的全屏模态转场是一种用户体验设计，通常发生在应用程序从一种完整屏幕模式切换到另一种时。它采用平滑、直观的方式，让用户感觉转换流畅而无突兀。在鸿蒙系统中，常见的转场方式包括： 1. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值