半模态转场
通过bindSheet属性为组件绑定半模态页面,在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。
说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。不支持横竖屏切换。
不支持路由跳转。
属性
名称 | 参数 | 参数描述 |
---|---|---|
bindSheet | isShow: boolean, builder: [CustomBuilder], options?: [SheetOptions] | 给组件绑定半模态页面,点击后显示模态页面。 isShow: 是否显示半模态页面。 从API version 10开始,该参数支持[$$]双向绑定变量 builder: 配置半模态页面内容。 options: 配置半模态页面的可选属性。 |
说明:
在非双向绑定情况下,以拖拽方式关闭半模态页面不会改变isShow参数的值。
为了使isShow参数值与半模态界面的状态同步,建议使用[$$]双向绑定isShow参数。
SheetOptions
名称 | 类型 | 必填 | 描述 |
---|---|---|---|
height | [SheetSize] | [Length] | 否 |
dragBar | boolean | 否 | 是否显示控制条,默认显示。 |
maskColor | [ResourceColor] | 否 | 半模态页面的背景蒙层颜色。 |
SheetSize
名称 | 参数描述 |
---|---|
MEDIUM | 指定半模态高度为屏幕高度一半。 |
LARGE | 指定半模态高度几乎为屏幕高度。HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿 |
示例
// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
@State isShow:boolean = false
@State isShow2:boolean = false
@State sheetHeight:number = 300;
@State showDragBar:boolean = true;
@Builder myBuilder() {
Column() {
Button("change height")
.margin(10)
.fontSize(20)
.onClick(()= >{
this.sheetHeight = 500;
})
Button("Set Illegal height")
.margin(10)
.fontSize(20)
.onClick(()= >{
this.sheetHeight = -1;
})
Button("close dragBar")
.margin(10)
.fontSize(20)
.onClick(()= >{
this.showDragBar = false;
})
Button("close modal 1")
.margin(10)
.fontSize(20)
.onClick(()= >{
this.isShow = false;
})
}
.width('100%')
.height('100%')
}
build() {
Column() {
Button("transition modal 1")
.onClick(() = > {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar, backgroundColor: Color.Green, onAppear: () = > {console.log("BindSheet onAppear.")}, onDisappear: () = > {console.log("BindSheet onDisappear.")}})
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
审核编辑 黄宇
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。
举报投诉
-
组件
+关注
关注
1文章
422浏览量
17661 -
鸿蒙
+关注
关注
55文章
2090浏览量
42261
发布评论请先 登录
相关推荐
鸿蒙ArkTS的起源和简介
新的声明式开发范式,基于Skia的自绘制引擎构建可跨平台的独立的渲染能力。这是一种较为创新的方案,不过也有几点不足:
Dart语言生态。尽管
发表于 01-16 16:23
模态窗口的设置问题
Labview中,一个窗口如果设置为模态窗口,则打开后,点击其他窗口应该是没有作用的。我设置的几个子VI为模态窗口,效果都没有问题。但有一个子VI,
发表于 11-28 21:56
LMS Virtual Lab 流固模态分析
LMS Virtual Lab 流固模态分析的主要步骤:1、设置材料、属性、约束条件,进行结构有限元模态分析。注意:模态计算的频率范围不要太小,否则可能计算错误!2、对流体进行
发表于 05-29 06:59
【木棉花】ArkUI转场动画的使用——学习笔记
建名为Item的子组件,声明子组件Item的UI布局并添加样式。创建Stack组件,包含图片和文本,然后添加文本信息和页面跳转事件,定义变量text和uri。其中text用于给Text组件设置文本信息
发表于 12-19 18:00
HarmonyOS应用开发-ACE 2.0转场动画体验
一、组件说明展现了ACE 2.0转场动画的使用。其中包含页面间转场、组件内转场以及共享元素转场。二、效果图三、完整代码地址https://gitee.com/jltfcloudcn/j
发表于 08-23 10:30
Harmony/OpenHarmony应用开发-转场动画页面间转场
在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。说明: 从API Version 7开始支持。开发语言ets.名称参数参数描述
发表于 12-26 11:03
Harmony/OpenHarmony应用开发-转场动画组件内转场
跟随animateTo中的配置)。说明: 从API Version 7开始支持。开发语言ets.属性:名称参数类型参数描述transitionTransitionOptions所有参数均为可选参数
发表于 12-28 16:19
HarmonyOS/OpenHarmony应用开发-转场动画共享元素转场
设置页面间转场时共享元素的转场动效。说明: 从API Version 7开始支持。开发语言ets.示例代码
发表于 01-04 17:22
【资料包】HDC.Together 2023精选Codelabs指南现已上线(内有活动)
通过一个简单的样例,学习如何基于ArkTS的声明式开发范式开发转场动画。其中包含页面间
发表于 08-15 17:46
iOS自定义转场动画例程与需要注意的问题
控制器可以根据特定任务模态化地present和dismiss另一个视图控制器。 API介绍 每一个自定义转场涉及三个主要对象: from view controller (消失的那个) to view
发表于 09-26 16:41
•0次下载
鸿蒙ArkTS声明式开发:跨平台支持列表【全屏模态转场】模态转场设置
通过bindContentCover属性为组件绑定全屏模态页面,在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。
评论