鸿蒙HarmonyOS NEXT开发：半模态转场

最新推荐文章于 2024-10-04 09:22:44 发布
最新推荐文章于 2024-10-04 09:22:44 发布
阅读量2k 收藏 20
点赞数 46
分类专栏： 鸿蒙 ArkTS 文章标签： harmonyos 华为 android 驱动开发 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanbbq/article/details/141109938
版权
鸿蒙 同时被 2 个专栏收录
99 篇文章 0 订阅
订阅专栏
ArkTS
94 篇文章 0 订阅
订阅专栏

半模态转场

通过bindSheet属性为组件绑定半模态页面，在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。

说明：

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

不支持路由跳转。

bindSheet

bindSheet(isShow: boolean, builder: CustomBuilder, options?: SheetOptions)

给组件绑定半模态页面，点击后显示模态页面。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

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

参数：

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

说明：

在非双向绑定情况下，以拖拽方式关闭半模态页面不会改变isShow参数的值。

为了使isShow参数值与半模态界面的状态同步，建议使用$$双向绑定isShow参数。

在半模态单挡位向上拖拽或是多挡位上滑换挡请况下，内容在拖拽结束或换挡结束后更新显示区域。

SheetOptions

继承自BindOptions。

名称类型必填描述
heightSheetSize | Length否半模态高度，默认是LARGE。
说明：
底部弹窗时，当设置detents时，该属性设置无效。
底部弹窗竖屏时，最大高度为距离信号栏8vp。
底部弹窗横屏时，该属性设置无效，高度为距离屏幕顶部8vp。
居中弹窗和跟手弹窗设置类型为SheetSize.LARGE和SheetSize.MEDIUM无效，显示默认高度560vp。居中弹窗和跟手弹窗最小高度为320vp，最大高度为窗口短边的90%。当使用Length设置的高度和使用SheetSize.FIT_CONTENT自适应的高度大于最大高度，则显示最大高度，小于最小高度，则显示最小高度。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
detents11+[(SheetSize | Length), ( SheetSize | Length)?, (SheetSize | Length)?]否半模态页面的切换高度档位。
说明：
底部弹窗竖屏生效，元组中第一个高度为初始高度。
面板可跟手滑动切换档位，松手后是否滑动至目标档位有两个判断条件：速度和距离。速度超过阈值，则执行滑动至与手速方向一致的目标档位；速度小于阈值，则引入距离判断条件，当位移距离>当前位置与目标位置的1/2，滑动至与手速方向一致的目标档位，位移距离当前位置与目标位置的1/2，返回至当前档位。速度阈值：1000，距离阈值：50%。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
preferType11+SheetType否半模态页面的样式。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
showClose11+boolean | Resource否是否显示关闭图标，默认显示。
说明：
Resource需要为boolean类型。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
dragBarboolean否是否显示控制条。
说明：
半模态面板的dentents属性设置多个不同高度并且设置生效时，默认显示控制条。否则不显示控制条。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
blurStyle11+BlurStyle否半模态面板的模糊背景。默认无模糊背景。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
maskColorResourceColor否半模态页面的背景蒙层颜色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
title11+SheetTitleOptions | CustomBuilder否半模态面板的标题。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
enableOutsideInteractive11+boolean否半模态所在页面是否允许交互。
说明：
设置为true时允许交互，不显示蒙层；设置为false时不允许交互，显示蒙层；若不进行设置，默认底部弹窗与居中弹窗不允许交互，跟手弹窗允许交互。当设置为true时，maskColor设置无效。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
shouldDismiss11+(sheetDismiss: SheetDismiss) => void否半模态页面交互式关闭回调函数。
说明：
当用户执行下拉关闭/back事件/点击蒙层关闭/关闭按钮关闭交互操作时，如果注册该回调函数，则不会立刻关闭。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
onWillDismiss12+DismissSheetAction否半模态页面交互式关闭回调函数。
说明：
当用户执行关闭操作时，如果注册该回调函数，不会立刻关闭, 由开发者控制是否关闭。在回调函数中可以通过reason得到关闭页面的操作类型，从而根据原因选择是否关闭半模态页面。在onWillDismiss回调中，不能再做onWillDismiss拦截。原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
onWillSpringBackWhenDismiss12+SpringBackAction否半模态页面交互式关闭前控制回弹函数。
说明：
当用户执行下拉关闭操作并注册shouldDimiss或onWillDismiss时，如果注册该回调函数，则不会回弹，由开发者控制下滑关闭时是否回弹。在回调函数中可以通过调用springBack来实现回弹效果。原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
onHeightDidChange12+Callback<number>否半模态页面高度变化回调函数。
说明：
底部弹窗时，只有档位变化和拖拽跟手才返回每一帧高度，拉起半模态和避让软键盘只返回最后的高度，其他弹窗只在半模态拉起返回最后高度。
返回值为px。
onDetentsDidChange12+Callback<number>否半模态页面档位变化回调函数。
说明：
底部弹窗时，档位变化返回最后的高度。
返回值为px。
onWidthDidChange12+Callback<number>否半模态页面宽度变化回调函数。
说明：
宽度变化时返回最后的宽度。
返回值为px。
onTypeDidChange12+Callback<SheetType>否半模态页面形态变化回调函数。
说明：
形态变化时返回最后的形态。
borderWidth12+Dimension | EdgeWidths | LocalizedEdgeWidths12+否设置半模态页面的边框宽度。
可分别设置4个边框宽度。
默认值：0。
百分比参数方式：以父元素半模态页面宽的百分比来设置半模态页面的边框宽度。
当半模态页面左边框和右边框大于半模态页面宽度，半模态页面上边框和下边框大于半模态页面高度，显示可能不符合预期。
说明：
底部弹窗时，底部边框宽度设置无效。
borderColor12+ResourceColor | EdgeColors | LocalizedEdgeColors12+否设置半模态页面的边框颜色。
默认值：Color.Black。
如果使用borderColor属性，需要和borderWidth属性一起使用。
说明：
底部弹窗时，底部边框颜色设置无效。
borderStyle12+BorderStyle | EdgeStyles否设置半模态页面的边框样式。
默认值：BorderStyle.Solid。
如果使用borderStyle属性，需要和borderWidth属性一起使用。
说明：
底部弹窗时，底部边框样式设置无效。
width12+Dimension否设置半模态页面的宽度。
百分比参数方式：以父元素宽的百分比来设置半模态页面的宽度。
shadow12+ShadowOptions | ShadowStyle否设置半模态页面的阴影。
uiContext12+UIContext否在UIContext实例对应的窗口中显示半模态。
mode12+SheetMode否设置半模态页面的显示层级。
默认值：SheetMode.OVERLAY。
scrollSizeMode12+ScrollSizeMode否设置半模态面板滑动时，内容区域刷新时机。
默认值：ScrollSizeMode.FOLLOW_DETENT 。

SheetSize枚举说明

名称值参数描述
MEDIUM0指定半模态高度为屏幕高度一半。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
LARGE1指定半模态高度几乎为屏幕高度。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
FIT_CONTENT11+2指定半模态高度为适应内容的高度。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

BindOptions

名称类型必填说明
backgroundColorResourceColor否半模态页面的背板颜色，默认为白色。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
onWillAppear12+() => void否半模态页面显示（动画开始前）回调函数。原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
onAppear() => void否半模态页面显示（动画结束后）回调函数。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
onWillDisappear12+() => void否半模态页面回退（动画开始前）回调函数。
说明：
不允许在onWillDisappear函数中修改状态变量，可能会导致组件行为不稳定。原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
onDisappear() => void否半模态页面回退（动画结束后）回调函数。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

SheetType11+枚举说明

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

名称值参数描述
BOTTOM0底部弹窗。
CENTER1居中弹窗。
POPUP2跟手弹窗。跟手弹窗面板不支持跟手滑动，下滑面板不关闭。

SheetDismiss11+

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

名称类型必填描述
dismiss() => void是半模态面板关闭回调函数。开发者需要退出时调用，不需要退出时无需调用。

SheetTitleOptions11+

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

名称类型必填描述
titleResourceStr是半模态面板的主标题。
subtitleResourceStr否半模态面板的副标题。

SheetMode12+

名称值参数描述
OVERLAY0设置半模态面板在当前UIContext内顶层显示，在所有页面之上。和弹窗类组件显示在一个层级。
EMBEDDED1设置半模态面板在当前页面内的顶层显示。
说明：
目前只支持挂载在Page节点上，只支持在Page页面内顶层显示。
该模式下新起的页面可以覆盖在半模态弹窗上，页面返回后该半模态依旧存在，半模态面板内容不丢失。
该模式下需确保页面节点如Page节点已挂树，再拉起半模态，否则半模态无法挂载到对应的页面节点内。

ScrollSizeMode12+

名称值参数描述
FOLLOW_DETENT0设置半模态面板跟手滑动结束后更新内容显示区域。
CONTINUOUS1设置半模态面板在滑动过程中持续更新内容显示区域。

DismissSheetAction12+

名称类型必填描述
dismissfunction是半模态页面关闭回调函数。开发者需要退出页面时调用。
reasonDismissReason是返回本次半模态页面退出的操作类型。

SpringBackAction12+

名称类型必填描述
springBackfunction是半模态页面关闭前控制回弹函数，开发者需要半模态回弹时调用。

示例

示例1

// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
  @State isShow:boolean = false
  @State isShow2:boolean = false
  @State sheetHeight:number = 300;

  @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 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, 
          backgroundColor: Color.Green,
          onWillAppear: () => {console.log("BindSheet onWillAppear.")}, 
          onAppear: () => {console.log("BindSheet onAppear.")}, 
          onWillDisappear: () => {console.log("BindSheet onWillDisappear.")}, 
          onDisappear: () => {console.log("BindSheet onDisappear.")}
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}
ts

示例2

// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
  @State isShow:boolean = false
  @Builder myBuilder() {
    Column() {
      Button("content1")
        .margin(10)
        .fontSize(20)

      Button("content2")
        .margin(10)
        .fontSize(20)
    }
    .width('100%')
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(),{
          detents:[SheetSize.MEDIUM,SheetSize.LARGE,200],
          backgroundColor:Color.Gray,
          blurStyle:BlurStyle.Thick,
          showClose:true,
          title:{title:"title", subtitle:"subtitle"},
          preferType: SheetType.CENTER,
          shouldDismiss:((sheetDismiss: SheetDismiss)=> {
            console.log("bind sheet shouldDismiss")
            sheetDismiss.dismiss()
          })
        })
    }
    .justifyContent(FlexAlign.Start)
    .width('100%')
    .height('100%')
  }
}
ts

示例3

// xxx.ets
// bindSheet属性的borderWidth、borderColor属性值使用LocalizedEdgeWidths类型和LocalizedEdgeColors类型

import { LengthMetrics } from '@ohos.arkui.node'

@Entry
@Component
struct SheetTransitionExample {
  @State isShow: boolean = false

  @Builder
  myBuilder() {
    Column() {
      Button("content1")
        .margin(10)
        .fontSize(20)

      Button("content2")
        .margin(10)
        .fontSize(20)
    }
    .width('100%')
  }

  build() {
    Column() {
      Button("transition modal 1")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(), {
          detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200],
          backgroundColor: Color.Gray,
          blurStyle: BlurStyle.Thick,
          showClose: true,
          title: { title: "title", subtitle: "subtitle" },
          preferType: SheetType.CENTER,
          borderWidth: { top: LengthMetrics.vp(10), start: LengthMetrics.vp(10), end: LengthMetrics.vp(20) },
          borderColor: { top: Color.Pink, start: Color.Blue, end: Color.Yellow },
          shouldDismiss: ((sheetDismiss: SheetDismiss) => {
            console.log("bind sheet shouldDismiss")
            sheetDismiss.dismiss()
          })
        })
    }
    .justifyContent(FlexAlign.Start)
    .width('100%')
    .height('100%')
  }
}
ts

从左至右显示语言模式示例图

从右至左显示语言模式示例图

示例4

// xxx.ets
// bindSheet注册onWillDismiss与onWillSpringBackWhenDismiss

@Entry
@Component
struct index {
  @State isShow: Boolean = false;

  @Builder
  myBuilder() {
    Column() {
      Button() {
        Text("CONTEXT")
      }.height(50)
    }
  }

  build() {
    Column() {
      Button("NoRegisterSpringback")
        .onClick(() => {
          this.isShow = true
        })
        .fontSize(20)
        .margin(10)
        .bindSheet($$this.isShow, this.myBuilder(), {
          height: SheetSize.MEDIUM,
          blurStyle: BlurStyle.Thick,
          showClose: true,
          title: { title: "title", subtitle: "subtitle" },
          preferType: SheetType.CENTER,


          onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {
            if (DismissSheetAction.reason == DismissReason.SLIDE_DOWN) {
              DismissSheetAction.dismiss() //注册dismiss行为
            }
          }),

          onWillSpringBackWhenDismiss: ((SpringBackAction: SpringBackAction) => {
            //没有注册springBack, 下拉半模态页面无回弹行为
            //SpringBackAction.springBack()
          }),
        })
    }
  }
}
ts

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（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学习资料

总结

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

「已注销」
关注
专栏目录
【HarmonyOS NEXT应用开发】案例28：横竖屏切换开发实践
xzs51job的专栏
08-14 155
实现视频播窗页面的横竖屏转换，用户可以切换到全屏播放场景。横竖屏切换示意以进入全屏为例，开发过程需要有以下关注点：1、如果有模态框，需要关闭模态框2、页面实现窗口旋转和全屏逻辑3、隐藏播控相关按钮内容进入横屏基本流程在触发旋转的按钮上，触发对应事件，并可以采用EventHub.emit发送对应事件触发相应事件。这里主要介绍进入全屏的逻辑。复制。
HarmonyOS应用开发者高级认证（一）
呆萌很的博客
08-13 6443
HarmonyOS应用开发者高级认证（一）、harmony 试题
鸿蒙Harmony应用开发—ArkTS声明式开发（模态转场设置：半模态转场）
m0_64420071的博客
03-05 2748
ArkTS声明式开发-模态转场设置：半模态转场
基于bindSheet的半模态弹窗
hongxiaomeng的博客
06-04 474
Qt对话框之二：模态、非模态、半模态对话框
weixin_30432007的博客
09-18 249
一、模态对话框 模态对话框：阻塞同一应用程序中其它可视窗口输入的对话框。模态对话框有自己的事件循环，用户必须完成这个对话框中的交互操作，并且关闭了它之后才能访问应用程序中的其它任何窗口。 显示模态对话框最常见的方法是调用其 exec() 函数，当用户关闭对话框，exec() 将提供一个有用的返回值，并且这时流程控制继续从调用 exec() 的地方进行。通常情况下，要获得对话框关闭并返回相...
界面框架、模态、非模态、半模态
Shi_CL的博客
05-16 1179
QMainWindow\QWdiget\QDialog三者的区别 windows control panel 操作： 创建文件夹：mkdir(命令) "想要创建的文件路径" qmainwindow窗口 Qdialog窗口 Qwdiget farmwormk(基本框架) 模态和非模态和半模态 模态：只能操作完当前窗口。 非模态：直接 对话框对象...
HarmonyOS NEXT实战开发：全屏模态转场(bindContentCover)
hanyanyou的博客
07-18 1067
通过bindContentCover属性为组件绑定全屏模态页面，在组件插入和删除时可通过设置转场参数ModalTransition显示过渡动效。
鸿蒙Harmony应用开发—ArkTS声明式开发（模态转场设置：全屏模态转场）
m0_64420071的博客
03-05 9373
ArkTS声明式开发-模态转场设置：全屏模态转场
鸿蒙HarmonyOS开发生态：构建万物互联的未来
最新发布
GY的的专栏
10-04 1548
鸿蒙系统的分布式技术实现了多设备之间的协同工作，为用户带来了更加便捷、智能的全场景体验。从最初的HarmonyOS 1.0，到HarmonyOS 2.0在手机、平板等设备的广泛应用，再到HarmonyOS 3.0和4.0的发布，鸿蒙系统的功能和应用范围不断扩大，用户体验持续优化。鸿蒙系统在技术上不断演进，从最初的智慧屏应用，到手机、平板、手表等多种设备的广泛使用，再到HarmonyOS NEXT的全面成熟与加速发展，鸿蒙系统的功能和应用范围不断扩大。鸿蒙生态的繁荣离不开开发者的积极参与和贡献。
【HarmonyOS NEXT应用开发】案例96：基于ArkUI实现类似Toast弹窗
xzs51job的专栏
08-25 101
当前自定义弹窗的openAnimation和closeAnimation只能实现弹窗原地打开的相关动画设置，无法设置弹窗位置上变化的效果。⦁ 创建构造器时CustomDialogController时，customStyle为true,弹窗的样式则为装饰器内自定义的弹窗内容的样式。弹窗位置，是否为模态窗口、蒙层颜色则需要在构造器内使用。⦁ 在删除的时候需要注意，如果弹窗直接关闭是没有转场效果的，可以先用显隐控制，删除时，设置弹窗为隐藏，此时弹出向下退出的动效生效，再设置延时关闭弹窗。
类似半模态视图且带叠加动画效果
04-03
类似半模态视图且带叠加动画效果，源码UIViewController+KNSemiModal Category，KNSemiModalViewController模仿了半模态视图，并带有一些叠加动画，可以在Park Guides by National Geographic app中看到这种效果，简单拖至项目中即可运行。 UIViewController+KNSemiModal is an effort to make a replica of semi-modal view with pushed-back stacked animation found in the beautiful Park Guides by National Geographic app. You can see this original semi-modal view below. This library (ARC) is designed as a Category to UIViewController so you do not have to subclass and you can simply drop in any project and it will just work!
Qt中的模态、非模态、半模态窗口
billy的博客
03-30 3532
作者：billy 版权声明：著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处 简述区别 模态对话框 简单一点讲就是在弹出模态对话框时，除了该对话框，整个应用程序的窗口都无法接受用户响应，处于等待状态，直到模态对话框被关闭。 这时一般需要用户点击对话框中的确定或取消按钮来关闭该对话框，程序得到对话框的返回值，并根据返回值进行相应的操作，之后将操作权返回给用户。这个时候用户就可以...
HarmonyOS实战开发：模态转场
2401_84194030的博客
05-11 9984
模态转场是新的界面覆盖在旧的界面上，旧的界面不消失的一种转场方式。
【鸿蒙实战开发】模态转场、List 组件、AlphabetIndexer
m0_72720965的博客
08-24 1181
首先，先来讲一讲什么是模态转场吧，简单来讲就是我们在手机上面看到的分享图标点击以后出来的一个半屏的分享界面，这个过程就叫做模态转场。
鸿蒙ArkTS声明式开发：跨平台支持列表【半模态转场】模态转场设置
2401_82772199的博客
06-12 741
通过bindSheet属性为组件绑定半模态页面，在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。不支持横竖屏切换。不支持路由跳转。
SwiftUI 组件大全之如何实现半模态视图 和浮动标签栏（教程含源码）
iCloudEnd的博客
04-29 978
实战需求 半模态是一种界面元素，可以在许多不同的情况下使用。不幸的是，它不能在 SwiftUI 框架本身内实现。尽管如此，我们向您展示了一种绕过此限制并创建具有 SwiftUI 环境的所有功能的半模态的方法。 本文价值与收获 看完本文后，您将能够作出下面的界面 实战代码 1、核心页面 import SwiftUI struct ContentView: View { @State var selected = 1 init() { UIPag
Qt中的模态、非模态、半模态对话框
不会飞的纸飞机的博客
01-03 1618
文章目录1. 模态对话框（Modal）2. 非模态对话框（Modeless）3. 半模态对话框 1. 模态对话框（Modal） 模态对话框 是指在同一个应用程序中，阻塞其他可见窗口输入的对话框。一般用于用户输入文件名或用于应用程序的配置选项。可以分为应用模态和窗口模态。 下面是一个模态对话框的显示效果： 对话框的完整代码如下： 头文件： class ModalDialog : public...
鸿蒙的半模态bindSheet 怎么使用值传递，传参？
10-01
鸿蒙系统中的半模态 bindSheet 功能通常用于弹出对话框、选择列表或者其他需要浮于当前窗口之上的操作。半模态模式下，你可以通过传递数据模型（例如 Map、Object 或者自定义的数据结构）来进行参数的值传递。 在使用 bindSheet 时，你可以这样做： 1. **创建数据模型**: 创建一个包含你需要显示的信息的对象或者数据结构，比如 Map 或者一个自定义的 DataModel 类。 ```java DataModel data = new DataModel(); data.setValue("标题", "这是标题"); data.setValue("选项", "选项1, 选项2, 选项3"); ``` 2. **设置回调函数**: 在 bindSheet 的时候，提供一个 Callback 函数，这个函数会在用户做出选择后被调用，并且会接收到你的数据模型作为参数。 ```java HMSheetBuilder builder = HMSheetBuilder.create() .setData(data) .setCallback(new SheetCallback() { @Override public void onChoose(int itemIndex) { String selectedOption = data.getString("选项", itemIndex); // 对选中的项进行处理 } }); // 弹出对话框 HMSheet sheet = builder.build(); sheet.show(); ``` 3. **传递参数**: 当你在回调函数里获取到数据模型时，就可以直接访问并处理其中的值了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值