鸿蒙Harmony应用开发—ArkTS声明式开发（模态转场设置：全屏模态转场）

最新推荐文章于 2024-05-19 21:37:57 发布
最新推荐文章于 2024-05-19 21:37:57 发布
阅读量1.2k 收藏 29
点赞数 23
分类专栏： 鸿蒙 鸿蒙-ArkTS 文章标签： harmonyos 华为 android 鸿蒙 鸿蒙系统 ArkTS ArkUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64420071/article/details/136477511
版权

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

说明：

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

不支持横竖屏切换。

不支持路由跳转。

bindContentCover

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

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

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

参数：

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

ContentCoverOptions

继承自BindOptions。

名称类型必填描述
modalTransitionModalTransition否全屏模态页面的转场方式。

示例

示例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, onAppear: () => {console.log("BindContentCover onAppear.")}, 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, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor("#ff49c8ab")
    .width('100%')
    .height('100%')
  }
}

zh-cn_full_screen_modal_none_1

示例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, onAppear: () => {console.log("BindContentCover onAppear.")}, 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, onAppear: () => {console.log("BindContentCover onAppear.")}, 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() })
  }
}

zh-cn_full_screen_modal_none_2

示例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, onAppear: () => {console.log("BindContentCover onAppear.")}, 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, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .width('100%')
    .height('100%')
  }
}

zh-cn_full_screen_modal_default

示例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, onAppear: () => {console.log("BindContentCover onAppear.")}, 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, onAppear: () => {console.log("BindContentCover onAppear.")}, onDisappear: () => {console.log("BindContentCover onDisappear.")}})
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .width('100%')
    .height('100%')
  }
}

zh-cn_full_screen_modal_alpha

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

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

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

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

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

  •  HarmonOS基础技能

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

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

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

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

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

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

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

图片

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

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

图片

 《鸿蒙开发基础》

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

图片

 《鸿蒙开发进阶》

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

图片

《鸿蒙进阶实战》

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

图片

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

总结

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

代码与思维
关注
  • 23
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS移动应用开发
04-07
本课程定位于培养基于HarmonyOS应用开发场景具备专业知识和技能水平的工程师。 通过该课程的学习，您将掌握HarmonyOS基本概念及原理、HarmonyOS技术架构、HarmonyOS应用开发流程、Ability与UI开发知识，具备HarmonyOS功能开发、调试与发布的能力，能够胜任HarmonyOS应用开发工程师岗位。
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS移动应用开发（ArkTS版） 刘安战、余雨萍、陈争艳 清华大学出版社 课件PDF。共十三章，每章1个PPT
HarmonyOS NEXT应用开发之搜索页一镜到底案例_bindcontentcover
2401_84164699的博客
04-13 620
SearchComponent // har类型(默认使用har类型，如果使用hsp类型请说明原因)| |—ListData.ets // 筛选数据模型。// 搜索框转场过渡动画，cubicBezierCurve为三阶贝塞尔曲线动画。// 构造插值器弹簧曲线对象，生成一条从0到1的动画曲线。
【移动应用开发】HarmonyOS应用服务开发,移动购物应用
04-19
【移动应用开发】说明：HarmonyOS应用服务开发,移动购物应用 (HarmonyOS application service development, mobile shopping application) 【移动应用开发】说明：HarmonyOS应用服务开发,移动购物应用
智能小程序小部件(Widget)媒体组件属性说明和示例代码汇总
IoT砖家
01-16 1272
系统相机。这是基于异层渲染的原生组件, 请注意。
tcplayer 源码改造第三弹 -> 防盗录
z13192905903的博客
12-03 1577
文章目录前序简介人群git地址源码改造tcplayer.js(各位客官请自行格式化代码)修改思路添加配置参数添加防盗录的节点添加防盗录的节点样式使用说明参数说明使用示例 前序 简介 主要介绍了基于tcplayer的源码改造，加入防盗录(即随机在视频中出现自定义的字符)功能 不涉及tcplayer的使用以及框架如何调用，详情请看腾讯云点播文档 源码解析中有些注释是笔者加的，如需定位，请不要复制注释...
HarmonyOS NEXT应用开发之搜索页一镜到底案例
maniuT的博客
03-19 609
本示例介绍使用bindContentCover、transition、animateTo实现一镜到底转场动画，常用于首页搜索框点击进入搜索页场景。
鸿蒙应用开发学习：ArkTs将应用设置为全屏显示并隐藏状态栏
bahamutj的博客
01-13 1322
近期学习鸿蒙应用开发，跟着教程做了一个小鱼动画应用，之前解决了应用默认是竖屏，而这个小鱼动画应用是横屏的问题。这次通过实现应用全屏显示并隐藏手机状态栏，来解决页面返回中的按钮与状态栏重叠而导致按钮不能正常响应点击事件的问题。
鸿蒙HarmonyOS实战-ArkUI动画（页面转场动画）
shudaoshanQAQ的博客
01-08 626
页面转场动画是指在应用程序中，当用户导航到另一个页面时，使用动画效果来过渡页面之间的切换。这样做的目的是为了提升用户体验，使页面之间的切换更加平滑和有趣。
HarmonyOS NEXT应用开发之多模态页面转场动效实现案例
maniuT的博客
03-20 1205
本示例介绍多模态页面转场动效实现：通过半模态转场实现半模态登录界面， 与全屏模态和组件转场结合实现多模态组合登录场景，其中手机验证码登录与账号密码登录都为组件， 通过TransitionEffect.move()实现组件间转场达到近似页面转场的效果。
华为鸿蒙HarmonyOS开发整理资料汇总.zip
11-25
华为鸿蒙HarmonyOS开发整理资料汇总，共38份。 1学前必读：HarmonyOS学习资源主题分享 2学前必读：OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述：技术特性 3-2.HarmonyOS概述：开发工具与平台 3-3.HarmonyOS...
华为鸿蒙HarmonyOS开发者资料大全鸿蒙系统开发资料汇总.zip
06-16
鸿蒙HarmonyOS开发者资料大全鸿蒙系统开发资料汇总,包括如下： DevEco Studio 1.0 使用指南.pdf HarmonyOS-NFC开发指南.pdf HarmonyOS应用开发之页面开发.pdf HarmonyOS开发必备基础知识.pdf WLAN开发指南.pdf 图像...
微信小程序开发笔记
励志小妹的小窝
01-14 547
微信公众平台注册 app.json tabBar 指定tab栏的表现 networkTimeout 网络请求超时时间 debug 打印出调试信息 页面的json 两者共同点是都可以设置 navigationBarBackgroundColor：导航栏 TextStyle：标题样式 TitleText：标题文本 窗体： backgroundColor backgroundTextStyle： 窗体下...
小程序模板语法样式与页面配置
timerring的博客
06-08 732
小程序模板与配置 WXML 模板语法 数据绑定 事件绑定 小程序中常用的事件 事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式 事件传参 bindinput 的语法格式 条件渲染 wx:if hidden 列表渲染 wx:for wx:key WXSS 模板样式 rpx 样式导入 全局样式和局部样式 全局配置 常用的配置项 window window 节点常用的配置项 tabBar tabBar 的 6 个组成部分 tabBar 节点的配置项 每个 tab
微信小程序——个人相册（后端）
weixin_55245556的博客
06-24 324
微信小程序——个人相册（后端） 1. 项目创建 新建Maven项目，其中Archettype选择“webapp”，以下是项目结构 添加项目所需依赖，在pom.xml添加以下内容： <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/P
【UNIX网络编程】| 【02】基本TCP套接字编程（socket、connnect、bind、linsten、accept、并发服务器）
weixin_45926547的博客
06-15 818
2.1 案例 注意 3、bind函数 3.2 运行捆绑通配地址的当个服务器 4、listen函数 4.1 listen包裹函数，设置backlog 5.1 服务端程序：通过accept获取客户端ip和端口 6.1 fork的典型用法 6.2 exec函数 以上函数的区别 注意 7、并发服务器 7.1 结合fork的大致用法 7.2 为什么父进程对cfd调用close没有终止它与客户的连接呢？...
HarmonyOS NEXT应用开发之搜索页一镜到底案例_bindcontentcover(1)
2301_79054873的博客
04-15 735
2.通过geometryTransition同时绑定首页和搜索页面的search框实现丝滑的上下文传承过渡，使得原本独立的transition动画在空间位置上发生联系，将视觉焦点由旧视图位置引导到新视图位置。// TODO：知识点：通过transition属性配置转场参数，在组件插入和删除时显示过渡动效。4.在切换过程中使用animateTo显式动画配合改变搜索框大小实现转换过程中的动画和一镜到底的效果。// 搜索框转场过渡动画，cubicBezierCurve为三阶贝塞尔曲线动画。本场景依赖了路由模块。
鸿蒙OS开发：【一次开发，多端部署】（多设备自适应能力）实例
最新发布
m0_70748845的博客
05-19 314
此Demo展示在JS中的多设备自适应能力，包括资源限定词、原子布局和响应式布局。
harmonyos移动应用开发 arkts版 电子书
01-29
HarmonyOS移动应用开发arkts版电子书是一本关于如何使用HarmonyOS开发移动应用的实用指南。这本电子书的目的是帮助开发者了解HarmonyOS移动应用开发的基本概念和技术，以及如何使用arkts工具包来构建高性能、可靠的应用程序。 这本电子书首先介绍了HarmonyOS的基本概念和架构，包括分布式技术、资源管理和安全性等方面。然后，它详细介绍了arkts工具包的使用方法，包括如何设置开发环境、创建应用程序和调试代码等。此外，该电子书还提供了大量的示例代码和实战案例，供读者参考和学习。 在这本电子书中，读者将学习如何开发HarmonyOS移动应用的各个方面，包括界面设计、数据存储、网络通信和用户体验等。它不仅涵盖了基础知识，还介绍了一些高级主题，如应用程序优化和性能调优。读者可以通过阅读这本电子书，系统地学习和掌握HarmonyOS移动应用开发的技能。 总而言之，HarmonyOS移动应用开发arkts版电子书是一本详细且实用的指南，适用于那些对HarmonyOS移动应用开发感兴趣的开发者。它提供了全面的教程和实战案例，帮助读者快速入门和掌握HarmonyOS移动应用开发的技术。希望通过这本电子书，更多的开发者能够利用HarmonyOS的优势，开发出更好的移动应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值