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

news2024/11/16 19:27:29

通过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.coloradmin.cn/o/1508569.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

智能合约开发基础知识：最小信任机制、智能合约、EVM

智能合约开发基础知识：最小信任机制、智能合约、EVM

苏泽 大家好 这里是苏泽 一个钟爱区块链技术的后端开发者 本篇专栏 ←持续记录本人自学两年走过无数弯路的智能合约学习笔记和经验总结 如果喜欢拜托三连支持~ 专栏的前面几篇详细了介绍了区块链的核心基础知识 有兴趣学习的小伙伴可以看看http://t.csdnimg.cn/fCD5E关于区块…
阅读更多...
Redis高可用之哨兵模式和集群模式

Redis高可用之哨兵模式和集群模式

Redis高可用 Redis哨兵高可用 概述 sentinel哨兵是特殊的redis服务，不提供读写服务，主要用来监控redis实例节点。 哨兵架构下client端第一次从哨兵找出redis的主节点，后续就直接访问redis的主节点 不会每次都通过sentinel代理访问redis的主…
阅读更多...
Java开发从入门到精通（一）：Java的基础语法项目案例

Java开发从入门到精通（一）：Java的基础语法项目案例

Java大数据开发和安全开发 Java 案例练习案例一:买飞机票案例二:开发验证码案例三:评委打分案例四:数字加密案例五:数组拷贝案例六: 抢红包案例七:找素数案例八:模拟双色球[拓展案例] Java 案例练习 案例一:买飞机票 分析: 方法是需要接收数据?需要接收机票原价、当前月份、舱…
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：外描边设置）

鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：外描边设置）

设置组件外描边样式。 说明： 从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 outline outline(value: OutlineOptions) 统一外描边样式设置接口。 卡片能力： 从API version 11开始，该…
阅读更多...
仿牛客网项目---Elasticsearch分布式搜索引擎

仿牛客网项目---Elasticsearch分布式搜索引擎

1.什么是ElasticSearch分布式搜索引擎？ Elasticsearch是一个开源的分布式搜索引擎，提供实时的、高可用性的搜索和分析解决方案。它支持快速索引和搜索大规模数据，具有分布式架构、RESTful API、基于JSON的查询语言等功能，适用于各…
阅读更多...
Asp .Net Web Forms 系列：配置图片防盗链的几种方法

Asp .Net Web Forms 系列：配置图片防盗链的几种方法

通过 URL Rewrite Module 组件 URL Rewrite Module 是一个用于在 ASP.NET Web Forms 或其他基于 IIS 的 Web 应用程序中重写 URL 的强大工具。这个模块允许你将复杂的、不易于记忆或不利于搜索引擎优化的 URL 转换为更简洁、更友好的格式。通过 URL 重写，你可以提高…
阅读更多...
Upload 上传(图片/文件），回显（图片），下载（文件）

Upload 上传(图片/文件），回显（图片），下载（文件）

1.前端技术：V3 Ant Design Vue 2.后端技术：Java 图片上传/回显： 文件上传回显： 表结构：单文件/图片上传为A表对文件C表 （A表field字段 对应 C表id字段） 如图：A表中的 vehicle_d…
阅读更多...
leetcode代码记录和对比（两数相加

leetcode代码记录和对比（两数相加

目录 1. 题目：2. 我的代码：3. 别人的代码：小结： 1. 题目： 给你两个 非空 的链表，表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的，并且每个节点只能存储 一位 数字。 请你将两个…
阅读更多...
世界排名第二的大语言模型，你听说过吗？

世界排名第二的大语言模型，你听说过吗？

前言： 在介绍这个大语言模型之前，我们需要先来回顾一个事情，大家应该都知道，在去年 11 月，OpenAI 经历了 CEO Altman 被解雇（后又重返）的风波。而微软作为OpenAI的最大股东，直至Alt…
阅读更多...
【DAY10 软考中级备考笔记】数据结构 图

【DAY10 软考中级备考笔记】数据结构 图

数据结构 图 3月11日 – 天气：晴 晚上无线网络突然不能用了，花费好久弄这个，耽误了一些时间 1. 图的定义 这里需要注意完全图的定义，以及完全图的边数 这里需要注意连通图和连通分量的概念。 2. 图的存储结构 图有两种存储结构&a…
阅读更多...
PortSwigger 基于dom的漏洞-利用 DOM 破坏来启用 XSS

PortSwigger 基于dom的漏洞-利用 DOM 破坏来启用 XSS

进入实验随意进入一篇博客 我们可以尝试随意提交一些恶意代码看看会发生什么 很显然我们提交成功了但是我们的恶意代码貌似被过滤了 查看源码发现这里有一个过滤框架 我们打开源码分析 function loadComments(postCommentPath) {let xhr new XMLHttpRequest();xhr.onreadys…
阅读更多...
植物病害识别：YOLO水稻病害识别/分类数据集（2000多张，2个类别，yolo标注）

植物病害识别：YOLO水稻病害识别/分类数据集（2000多张，2个类别，yolo标注）

YOLO水稻病害识别/分类数据集，包含疾病和正常2类，共2000多张图像，yolo标注完整，可直接训练。 适用于CV项目，毕设，科研，实验等 需要此数据集或其他任何数据集请私信
阅读更多...
基于单片机的视觉导航小车设计

基于单片机的视觉导航小车设计

目 录 摘 要 I Abstract II 引 言 1 1 总体方案设计 3 1.1 方案论证 3 1.2 项目总体设计 3 2 项目硬件设计 4 2.1 主控模块设计 4 2.1.1单片机选型 4 2.1.2 STM32F103RCT6芯片 4 2.2单片机最小系统电路 5 2.3电机驱动模块设计 7 2.4红外模块设计 8 2.5红外遥控模块设计 9 2.6超…
阅读更多...
Logseq电脑端+安卓端同步gitee或github

Logseq电脑端+安卓端同步gitee或github

文章目录 0.初衷1.电脑端1.1 新建仓库1.2 克隆项目，生成秘钥1.3 添加图谱，选择文件目录，我是原本就有笔记，所以会如下所示。1.4 下载脚本文件1.5赋权限 （windows可跳过）1.6 修改脚本命令1.7 logseq设置同步…
阅读更多...
Docker命令大全与实例详解

Docker命令大全与实例详解

本文旨在汇总和深入解析日常工作与学习中频繁接触到的Docker核心命令，通过实例演示来巩固记忆，以便读者在实际操作中迅速查阅和高效运用。Docker作为一种轻量级容器技术，已经成为现代应用部署与管理的重要工具。本文将涵盖从基本的Docker环境…
阅读更多...
公网ip和局域网ip

公网ip和局域网ip

什么是公网IP？ 公网，俗称外网，又被叫做互联网，是连接不同地区局域网或者城域网计算机的通信的远程网络。通常可以跨接很大的物理范围，连接多个地区、城市和国家提供远距离通信，形成全球性的互联网络。因此…
阅读更多...
MySQL临时表创建出错(OS errno 13 - Permission denied)

MySQL临时表创建出错(OS errno 13 - Permission denied)

一个客户向我抱怨：在MySQL查询小表没有问题，查询大表出错，下面是他发给我的出错的部分截屏（客户的表名被我隐藏了）。 这里的给出的信息已经比较明显了，是向/tmp目录中创建临时表失败（临时表的路…
阅读更多...
555经典电路

555经典电路

1、555介绍： 555 定时器是一种模拟和数字功能相结合的中规模集成器件。一般用双极性工艺制作的称为 555，用 CMOS 工艺制作的称为 7555，除单定时器外，还有对应的双定时器 556/7556。555 定时器的电源电压范围宽，可在 4…
阅读更多...
YoLo进化史《A COMPREHENSIVE REVIEW OF YOLO: FROM YOLOV1 TOYOLOV8 AND BEYOND》

YoLo进化史《A COMPREHENSIVE REVIEW OF YOLO: FROM YOLOV1 TOYOLOV8 AND BEYOND》

Abstract YOLO已成为机器人、无人驾驶汽车和视频监控应用的核心实时目标检测系统。我们对YOLO的发展进行了全面的分析，研究了从最初的YOLO到YOLOv8的每次迭代中的创新和贡献。我们首先描述标准指标和后处理;然后，我们讨论了网络架构的主要变化和每个模型…
阅读更多...
工具篇--分布式定时任务springBoot--elasticjob简单使用（1）

工具篇--分布式定时任务springBoot--elasticjob简单使用（1）

文章目录 前言一、elasticjob 介绍：二、elasticjob 使用：2.1 部署zookeeper：2.2 引入库2.2 定义任务：2.3 任务执行：2.4 任务执行控制台输出： 三、elasticjob 启动错误：3.1 KeeperErrorCode Ope…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023