HarmonyOS Next 弹窗系列教程（5）

HarmonyOS Next 弹窗系列教程（5）

本章我们来讲解显示范围更大的弹出层效果-模态页面和浮层

模态页面

模态页面是一种大面板大视图交互式的弹窗，ArkUI 当前提供了半模态和全模态两类模态页面组件

• **半模态：**开发者可以利用此模态页面实现多形态效果。支持不同宽度设备显示不同样式的半模态页面。允许用户通过侧滑，点击蒙层，点击关闭按钮，下拉关闭半模态页面。
• **全模态：**开发者可以利用此模态页面实现全屏的模态弹窗效果。默认需要侧滑才能关闭。

半模态（bindSheet）

1. 主要通 bindSheep 来绑定半模态
2. 传入布尔类型属性来控制半模态的显示和隐藏
3. 传入自定义构建函数来显示半模态的内容

@Entry
@Component
struct SheetDemo {@State isShowSheet: boolean = false@BuilderSheetBuilder() {Column() {Button("我来自半模态")}.width('100%').height('100%')}build() {Column() {Button('Open Sheet').width('90%').height('80vp').onClick(() => {this.isShowSheet = !this.isShowSheet}).bindSheet($$this.isShowSheet, this.SheetBuilder(), {title: { title: '半模态' },})}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

参考属性

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

全模态（bindContentCover）

全模态页面（bindContentCover）是全屏模态形式的弹窗交互页面，完全覆盖底层父视图。适用于查看大图，全屏查看文稿等场景。

用法和半模态类似

1. 使用 bindContentCover 来触发全模态
2. 传入一个布尔类型的值表示显示和隐藏
3. 传入@Builder 修饰的自定义构建函数

@Entry
@Component
struct SheetDemo {@State isShowContentCover: boolean = false@BuilderContentCoverBuilder() {Column() {Button("我来自全模态").onClick(() => {this.isShowContentCover = !this.isShowContentCover})}.width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor("#0099ff")}build() {Column() {Button('Open Sheet').width('90%').height('80vp').onClick(() => {this.isShowContentCover = !this.isShowContentCover}).bindContentCover($$this.isShowContentCover, this.ContentCoverBuilder())}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}

参考属性

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

浮层（OverlayManager）

浮层（OverlayManager） 用于将自定义的 UI 内容展示在页面（Page）之上，在 Dialog、Popup、Menu、BindSheet、

BindContentCover 和 Toast 等组件之下，展示的范围为当前窗口安全区内。可适用于常驻悬浮等场景。

基本用法

浮层的基本用法如下：

1. 创建浮层要显示的内容

   // 1 创建浮层要显示的内容
   @Builder
   function builderText(params: Params) {Column() {Text(params.text).fontSize(30).fontWeight(FontWeight.Bold)}.offset(params.offset).width("100%").height("100%").backgroundColor("#CF7553")
   }
   

2. 获取 UI 上下文环境

     // 2 获取UI上下文环境private uiContext: UIContext = this.getUIContext()
   

3. 获取 OverlayManager 管理器

   // 3 获取OverlayManager管理器
   private overlayNode: OverlayManager = this.uiContext.getOverlayManager()
   

4. 创建一个位置偏移对象

   // 4 创建一个位置偏移对象
   componentOffset: Position = { x: 0, y: 120 };
   

5. 创建一个 ComponentContent 节点对象

   // 5 创建一个ComponentContent 节点对象
   componentContent = new ComponentContent(this.uiContext,wrapBuilder < [Params] > builderText,new Params(this.message, this.componentOffset)
   );
   

6. 操作浮层

   1. 给浮层加入内容

      Button("增加ComponentContent").onClick(() => {// 5 添加ComponentContentthis.overlayNode.addComponentContent(this.componentContent);
      });
      

   2. 显示浮层

      Button("隐藏ComponentContent").onClick(() => {// 6 隐藏ComponentContentthis.overlayNode.hideComponentContent(this.componentContent);
      });
      

   3. 隐藏浮层

      Button("显示ComponentContent").onClick(() => {// 7 显示ComponentContentthis.overlayNode.showComponentContent(this.componentContent);
      });
      

7. 。。。。

效果

参考

其他用法可以参考 链接

总结

至此，我们把鸿蒙应用开发中常见的弹窗用法都演示了一遍，后期开发者都可以根据这些特点来选择使用

开发者可根据实际应用场景选择合适的弹窗进行页面开发。

弹窗名称	应用场景
弹出框（Dialog）	当需要展示用户当前需要或必须关注的信息内容或操作时，例如二次退出应用等，应优先考虑使用此弹出框。
菜单控制（Menu）	当需要给指定的组件绑定用户可执行的操作时，例如长按图标展示操作选项等，应优先考虑使用此弹窗。
气泡提示（Popup）	当需要给指定的组件提示时，例如点击一个问号图标弹出一段帮助提示等，应优先考虑使用此弹窗。
绑定模态页面（bindContentCover/bindSheet）	当需要新的界面覆盖在旧的界面上，且旧的界面不消失的一种转场方式时，例如缩略图片点击后查看大图等，应优先考虑使用此弹窗。
即时反馈（Toast）	当需要在一个小的窗口中提供用户当前操作的简单反馈时，例如提示文件保存成功等，应用优先考虑使用此弹窗。
设置浮层（OverlayManager）	当需要完全自定义内容、行为、样式时，可以使用浮层将 UI 展示在页面之上，例如音乐/语音播放悬浮球/胶囊等，应优先考虑使用此弹窗。

            |

| 设置浮层（OverlayManager） | 当需要完全自定义内容、行为、样式时，可以使用浮层将 UI 展示在页面之上，例如音乐/语音播放悬浮球/胶囊等，应优先考虑使用此弹窗。 |