场景介绍

底部弹窗固定显示是汽车类应用的典型场景之一，如应用页面底部的通知弹窗，可及时向用户推送各种信息。

本示例基于 @ohos.window 实现在页面底部固定一个通知窗口，支持在所有页面显示，支持点击关闭窗口。

效果预览

实现思路

1. 调用 createSubWindow 创建子窗口，并依次设置子窗口加载页、子窗口右下坐标、子窗口大小和子窗口展示。
2. 在应用各页面按需加载子窗口。
   1. OpenSubWindows() {
   2. this.context.windowStage.createSubWindow('FloatPage', (err, windowClass) => {
   3. if (err.code > 0) {
   4. return;
   5. }
   6. this.win = windowClass;
   7. try {
   8. // 设置子窗口加载页
   9. windowClass.setUIContent('pages/FloatPage', () => {
   10. windowClass.setWindowBackgroundColor(Constants.SUBWINDOW_BACKGROUND_COLOR);
   11. });
   12. // 设置子窗口左上角坐标
   13. windowClass.moveWindowTo(Constants.ZERO, Constants.SUB_WINDOW_Y);
   14. // 设置子窗口大小
   15. windowClass.resize(display.getDefaultDisplaySync().width, Constants.SUB_WINDOW_HEIGHT);
   16. // 展示子窗口
   17. windowClass.showWindow();
   18. } catch (err) {
   19. }
   20. })
   21. }
3. 在需要关闭时销毁子窗口。
   1. CloseSubWindows() {
   2. // 销毁子窗口
   3. this.win?.destroyWindow();
   4. }

约束与限制

• 本示例支持 API Version 17 Release 及以上版本。
• 本示例支持 HarmonyOS 5.0.5 Release SDK 及以上版本。
• 本示例需要使用 DevEco Studio 5.0.5 Release 及以上版本进行编译运行。

工程目录

├──entry/src/main/ets // 代码区

1. │ ├──common
2. │ │ └──Constants.ets // 常量文件
3. │ ├──entryability
4. │ │ └──EntryAbility.ets
5. │ ├──entrybackupability
6. │ │ └──EntryBackAbility.ets
7. │ ├──pages
8. │ │ ├──BuyingCarPage.ets // 选车页
9. │ │ ├──FloatPage.ets // 漂浮页
10. │ │ ├──MainPage.ets // 首页
11. │ │ └──MinePage.ets // 我的页面
12. │ └──utils
13. │ └──GlobalComponents.ets // 全局组件类
14. └──entry/src/main/resources // 应用资源目录

参考文档

@ohos.window（窗口）

代码下载

底部弹窗固定显示示例代码

欢迎加入我的 HarmonyOS 班级，一起学习技术、分享成果，还有机会把精美的 HarmonyOS 礼盒带回家！快来报名，我们一起在 HarmonyOS 的世界里探索成长～

报名链接：

华为开发者学堂