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

通过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学习资料

总结

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/448800.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

docker安装各种组件

docker安装各种组件

一 docker基本命令 镜像操作 ① 列举镜像 docker images ② 搜索镜像（以jdk为例） docker search jdk ③ 下载镜像 docker pull java ④ 查看所有镜像 docker images ⑤ 启动镜像（以jdk8为例） docker run -it --name jdk…
阅读更多...
AI会砸了我们的饭碗？

AI会砸了我们的饭碗？

Sora，由OpenAI推出，是一款创新的文本到视频生成模型。它能够将文本描述转化为引人入胜的高清视频片段。采用了扩散模型和变换器架构，Sora实现了高效的训练。其方法包括统一表示法、基于补丁的表示法、视频压缩网络和扩散变换器。 Sora具备多种…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：CalendarPicker）

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：CalendarPicker）

日历选择器组件，提供下拉日历弹窗，可以让用户选择日期。 说明： 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 子组件 无 接口 CalendarPicker(options?: CalendarOptions) …
阅读更多...
conda安装playwright

conda安装playwright

进入conda安装目录激活环境 D:\Anacoda3>conda activate base 安装playwright （base）D:\Anacoda3>pip3 install playwright -i https://pypi.tuna.tsinghua.edu.cn/simple （base）D:\Anacoda3>python -m playwright insta…
阅读更多...
深入理解React中的useState：函数组件状态管理的利器

深入理解React中的useState：函数组件状态管理的利器

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…
阅读更多...
transformer参数推导

transformer参数推导

一、目录 1.Bert Embedding 参数量计算 2.多头自注意力self_attention 参数计算: d_model* d_model 3*(d_model* d_qkvnum_heads) 3. 全连接层参数量 4.layerNormer 参数量 2hidden 5. 编码器 解码器参数 6. 语言模型head 参数：hidden* vocab 二、实现 参考&…
阅读更多...
仿生蝴蝶制作——蝴蝶翅膀制作

仿生蝴蝶制作——蝴蝶翅膀制作

前言 上一次已经设计好了的翅膀图纸 接下来就是根据这个图纸来制作翅膀。 过程中其实可以不用尺子准确测量，直接用碳纤维棒比着剪下来就好了，然后把减下来的一截比着剪下另一只翅膀需要的材料。因为左右两只翅膀差别不能太大，所以这样是最好…
阅读更多...
【Java设计模式】十四、策略模式

【Java设计模式】十四、策略模式

文章目录 1、策略模式2、案例：促销策略3、总结4、在源码中的实际应用 1、策略模式 从A地到B地，出行方式可选汽车、火车、飞机中的一种 日常开发，开发工具可IDEA，可Eclipse 不管你选飞机还是火车，你最终都可以实现从A地…
阅读更多...
SpringBoot注解--08--注解@JsonInclude

SpringBoot注解--08--注解@JsonInclude

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 JsonInclude注解是jackSon中最常用的注解之一，是为实体类在接口序列化返回值时增加规则的注解 1.JsonInclude用法2.JsonInclude注解中的规则有 案例需求…
阅读更多...
vue自定义主题皮肤方案

vue自定义主题皮肤方案

方案一：CSS变量换肤（推荐） 利用css定义变量的方法，用var在全局定义颜色变量（需将变量提升到全局即伪类选择器 :root）然后利用js操作css变量，document.getElementsByTagName(‘body’)[0].style…
阅读更多...
网络套接字1

网络套接字1

网络套接字1 📟作者主页：慢热的陕西人 🌴专栏链接：Linux 📣欢迎各位大佬👍点赞🔥关注🚓收藏，🍉留言 本博客主要内容讲解了udp的Linux环境下的使用&#xff0c…
阅读更多...
鼠标在QTreeView、QTableView、QTableWidget项上移动，背景色改变

鼠标在QTreeView、QTableView、QTableWidget项上移动，背景色改变

目录 1. 前言 2. 需求 3. 功能实现 3.1. 代码实现 3.2. 功能讲解 4. 附录 1. 前言 本博文用到了Qt的model/view framework框架,如果对Qt的“模型/视图/委托”框架不懂，本博文很难读懂。如果不懂这方面的知识，请在Qt Assistant 中输入Model/View…
阅读更多...
一款适合程序员开发复杂系统的通用平台——JNPF 开发平台

一款适合程序员开发复杂系统的通用平台——JNPF 开发平台

在过去，很多开发工具更侧重代码编辑，针对数据库增删改查（CRUD）类的 Web 系统开发，在界面设计、前后端数据交互等环节主要还是靠写代码，效率比较低。目前很多所谓的低代码开发平台，大多数也都是基…
阅读更多...
SQLServer数据库系列之：查询SQLServer数据库上面的连接信息、session信息、sql语句

SQLServer数据库系列之：查询SQLServer数据库上面的连接信息、session信息、sql语句

SQLServer数据库系列之：查询SQLServer数据库上面的连接信息、session信息、sql语句 一、查询数据库上的连接信息二、查询SQLServer数据库的session信息SQLServer数据库从入门到精通系列文章之：SQLServer数据库百篇技术文章汇总 数据库专栏系列文章阅读传送门：详细整理汇总M…
阅读更多...
超越 Siri 和 Alexa：探索LLM（大型语言模型）的世界

超越 Siri 和 Alexa：探索LLM（大型语言模型）的世界

揭秘LLM：语言模型新革命，智能交互的未来趋势 近年来，虚拟助手的世界发生了重大转变。 虽然 Siri 和 Alexa 本身就是革命性的，但一种称为大型语言模型 (LLM) 的新型人工智能正在将虚拟助手的概念提升到一个全新的水平。 在这篇博文…
阅读更多...
农业四情监测系统---气象科普

农业四情监测系统---气象科普

农业四情监测系统是一个集环境数据采集、分析与决策支持于一体的智能化系统。它主要通过对农田的土壤、气候、作物生长及病虫害等四个关键要素的实时监测，为农业生产提供精准的数据支持和科学的决策依据。 在土壤方面，系统能够检测土壤温度、湿度、pH值及…
阅读更多...
我终于解决MathPage.wll文件找不到问题|（最新版Word上亲测）运行时错误，53’: 文件未找到:athPage.WLL

我终于解决MathPage.wll文件找不到问题|（最新版Word上亲测）运行时错误，53’: 文件未找到:athPage.WLL

1、问题症状： 运行时错误，53’: 文件未找到:athPage.WLL 2、 解决方案 第一步 首先我们要先找到MathType安装目录下MathPage.wll文件，直接在此电脑中搜索MathPage.wll，找到文件所在位置。 第二步 打开Word文件&#xff0c…
阅读更多...
App拉起微信小程序参考文章

App拉起微信小程序参考文章

App拉起微信小程序参考文章h5页面跳转小程序-----明文URL Scheme_weixin://dl/business/?appid*appid*&path*path*&qu-CSDN博客文章浏览阅读561次，点赞16次，收藏5次。仅需两步，就能实现h5跳转小程序，明文 URL Scheme&…
阅读更多...
Linux---多线程(上)

Linux---多线程(上)

一、线程概念 线程是比进程更加轻量化的一种执行流 / 线程是在进程内部执行的一种执行流线程是CPU调度的基本单位，进程是承担系统资源的基本实体 在说线程之前我们来回顾一下进程的创建过程，如下图 那么以进程为参考，我们该如何去设计创建一个…
阅读更多...
闭包表（Closure Table）存储和查询树形数据结构

闭包表（Closure Table）存储和查询树形数据结构

闭包表通过在关系表中记录树节点之间的直接和间接关系来表示节点之间的层次结构，目的是支持高效的树遍历和查询操作。 一、创建闭包表 CREATE TABLE departments (id int NOT NULL COMMENT ID,name varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站