HarmonyOS ArkUI实战开发-窗口模块（Window）

于 2024-06-03 15:08:32 发布
阅读量393 收藏 4
点赞数 5
分类专栏： 鸿蒙开发 OpenHarmony HarmonyOS 文章标签： harmonyos 音视频 移动开发 openharmony 鸿蒙 ArkUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70748458/article/details/139415379
版权
鸿蒙开发 同时被 3 个专栏收录
578 篇文章 15 订阅
订阅专栏
OpenHarmony
536 篇文章 8 订阅
订阅专栏
HarmonyOS
177 篇文章 0 订阅
订阅专栏

窗口模块用于在同一物理屏幕上，提供多个应用界面显示、交互的机制。

  • 对应用开发者而言，窗口模块提供了界面显示和交互能力。
  • 对于终端用户而言，窗口模块提供了控制应用界面的方式。
  • 对于操作系统而言，窗口模块提供了不同应用界面的组织管理逻辑。

OpenHarmony 将窗口分为系统窗口和应用窗口两种类型：

  • 系统窗口：

    系统窗口指完成系统特定功能的窗口。如音量条、壁纸、通知栏、状态栏、导航栏等。

  • 应用窗口：

    应用窗口区别于系统窗口，指与应用显示相关的窗口。根据显示内容的不同，应用窗口又分为应用主窗口、应用子窗口两种类型。

    • 应用主窗口：

      应用主窗口用于显示应用界面，会在“任务管理界面”显示。

    • 应用子窗口：

      应用子窗口用于显示应用内的弹窗、悬浮窗等辅助窗口，不会在“任务管理界面”显示。

ArkUI 开发框架在 @ohos.window 模块中提供了对窗口操作相关方法，比如设置窗口全屏显示，弹出悬浮窗等，本节笔者简单介绍一下窗口模块。

Window 定义介绍

declare namespace window {
    function create(id: string, type: WindowType): Promise<Window>;
    function find(id: string): Promise<Window>;
    function getTopWindow(): Promise<Window>;

    // Winodw 的能力
    interface Window {
        show(): Promise<void>;
        destroy(): Promise<void>;
        moveTo(x: number, y: number): Promise<void>;
        resetSize(width: number, height: number): Promise<void>;
        getAvoidArea(type: AvoidAreaType): Promise<AvoidArea>;
        setFullScreen(isFullScreen: boolean): Promise<void>;
        setLayoutFullScreen(isLayoutFullScreen: boolean): Promise<void>;
        loadContent(path: string): Promise<void>;
        isShowing(): Promise<boolean>;
        on(type: 'windowSizeChange' | 'systemAvoidAreaChange' | 'keyboardHeightChange', callback: Callback<Size>): void;
        off(type: 'windowSizeChange' | 'systemAvoidAreaChange' | 'keyboardHeightChange', callback?: Callback<Size>): void;
        setBackgroundColor(color: string): Promise<void>;
    }
}
export default window;

@ohos.window 模块提供的静态方法及 Window 的部分方法说明如下：

  • create()：创建一个子窗口。
  • find()：查找指定 id 所对应的窗口
  • getTopWindow()：获取当前应用内最后显示的窗口。
  • show()：显示当前窗口。
  • destroy()：销毁当前窗口。
  • moveTo()：移动当前窗口。
  • on()：监听窗口对应事件。
  • off()：取消监听对应窗口事件。
  • setLayoutFullScreen()：设置窗口布局是否为全屏布局。
  • loadContent()：为当前窗口加载具体页面内容。
  • setBackgroundColor()：设置窗口的背景色。
  • setSystemBarEnable()：设置导航栏、状态栏是否显示。
  • setFullScreen()：设置窗口是否全屏显示。

Window 使用介绍

  • 引入 window 模块
    import window from '@ohos.window';
  • 创建 Window 对象

创建一个 Window，直接调用 create() 相关方法即可，笔者创建的一个窗口类型为 TYPE_APP 的子窗口，代码如下：

    private createSubWindow() {
        window.create(subWindowID, window.WindowType.TYPE_APP).then((subWindow) => {
          if (subWindow) {
            this.subWindow = subWindow
            this.subWindow.setFocusable(false)
            this.subWindow.setDimBehind(0.4)
            this.subWindow.resetSize(750, 480)
            this.subWindow.moveTo(230, 1200)
            this.subWindow.setBackgroundColor(Color.Red.toString())
            this.subWindow.setOutsideTouchable(false)
            this.subWindow.setTouchable(false)
            this.status = "create subWindow success"
          } else {
            this.status = "create subWindow failure: " + JSON.stringify(subWindow)
          }
        }).catch((error) => {
          this.status = "create subWindow failure: " + JSON.stringify(error)
        })
      }

  • 创建 Widnow 页面

    Window 创建完成后，就可以用它来加载待显示的页面了，先创建一个页面并命名为 sub_window.ets，然后用刚刚创建的 Window 对象来加载，页面代码如下：

    @Entry @Component struct SubWindowComponent {
      build() {
        Column() {
          Text("我是子窗口")
            .fontSize(30)
        }
        .backgroundColor("#ccaabb")
        .size({width: "100%", height: "100%"})
      }
    }

📢：子窗口加载的页面需要在配置文件 config.json 中的 pages 属性中添加进来，否则加载不进来，页面就显示不出来。

  • 加载 Window 页面

加载页面直接调用 Window 的 loadContent() 方法即可，代码如下所示：

    private loadContent(path: string) {
      if (this.subWindow) {
        this.subWindow.loadContent(path).then(() => {
          this.status = "load content success"
        }).catch((error) => {
          this.status = "load content failure: " + JSON.stringify(error)
        })
      } else {
        this.status = "subWindow not created"
      }
    }

  • 显示 Window 页面

    Window 加载完页面后还要调用它的 show() 方法，否则页面不显示。代码如下所示：

    private showSubWindow() {
      if (this.subWindow) {
        this.subWindow.show().then(() => {
          this.status = "show subWindow success"
        }).catch((error) => {
          this.status = "show subWindow failure: " + JSON.stringify(error)
        })
      } else {
        this.status = "subWindow not created"
      }
    }
  • 销毁 Window 页面

在 Window 使用完毕后，应当及时销毁它，以便资源被回收，代码如下所示：

    private destroySubWindow() {
      if (this.subWindow) {
        this.subWindow.destroy().then(() => {
          this.status = "destroy subWindow success"
          this.subWindow = null
        }).catch((error) => {
          this.status = "destroy subWindow failure: " + JSON.stringify(error)
        })
      } else {
        this.status = "subWindow already destroyed"
      }
    }

Window 完整样例

使用 @ohos.window 模块提供的 API 创建一个 Window 并显示和销毁，完整代码如下所示：

import window from '@ohos.window'
import router from '@ohos.router'

@Entry @Component struct Index {

  @State status: string = "";

  private subWindowID = "subWindowID"
  private subWindow: window.Window = null

  build() {
    Column({space: 10}) {
      Button("创建子窗口")
        .onClick(() => {
          this.createSubWindow()
        })

      Button("加载内容")
        .onClick(() => {
          this.loadContent("pages/sub_window")
        })

      Button("显示子窗口")
        .onClick(() => {
          this.showSubWindow()
        })

      Button("销毁子窗口")
        .onClick(() => {
          this.destroySubWindow()
        })

      Button("打开第二页")
        .onClick(() => {
          router.push({
            url: "pages/second" // second 页面读者请自行添加
          })
        })

      Text(this.status)
        .fontSize(24)
    }
    .width('100%')
    .height("100%")
    .backgroundColor(Color.White)
    .padding(10)
  }

  private destroySubWindow() {
    if (this.subWindow) {
      this.subWindow.destroy().then(() => {
        this.status = "destroy subWindow success"
        this.subWindow = null
      }).catch((error) => {
        this.status = "destroy subWindow failure: " + JSON.stringify(error)
      })
    } else {
      this.status = "subWindow already destroyed"
    }
  }

  private showSubWindow() {
    if (this.subWindow) {
      this.subWindow.show().then(() => {
        this.status = "show subWindow success"
      }).catch((error) => {
        this.status = "show subWindow failure: " + JSON.stringify(error)
      })
    } else {
      this.status = "subWindow not created"
    }
  }

  private loadContent(path: string) {
    if (this.subWindow) {
      this.subWindow.loadContent(path).then(() => {
        this.status = "load content success"
      }).catch((error) => {
        this.status = "load content failure: " + JSON.stringify(error)
      })
    } else {
      this.status = "subWindow not created"
    }
  }

  private createSubWindow() {
    window.create(this.subWindowID, window.WindowType.TYPE_APP).then((subWindow) => {
      if (subWindow) {
        this.subWindow = subWindow
        this.subWindow.setFocusable(false)
        this.subWindow.setDimBehind(0.4)
        this.subWindow.resetSize(750, 480)
        this.subWindow.moveTo(230, 1200)
        this.subWindow.setBackgroundColor(Color.Red.toString())
        this.subWindow.setOutsideTouchable(false)
        this.subWindow.setTouchable(false)
        this.status = "create subWindow success"
      } else {
        this.status = "create subWindow failure: " + JSON.stringify(subWindow)
      }
    }).catch((error) => {
      this.status = "create subWindow failure: " + JSON.stringify(error)
    })
  }
}

小结

本节通过简单的样例向读者介绍了 Window 的基本使用，更多其它 API 的用法，请读者自行参考官方文档。通过样例可以方便的实现 APP 内的全局弹窗，这比在 Android 系统上实现要简单的多(#.#)

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05

《鸿蒙开发学习手册》：

如何快速入门：https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识：https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发：https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题（含参考答案）：https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇（共计319页）：https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

愿天堂没有996
关注
  • 5
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【HarmonyOS】【ARK UI】怎么实现一个悬浮框
华为开发者联盟
07-28 703
config.json配置权限，代码如下在mianAbility进行配置，代码如下create(idvoid创建子窗口参数示例。
HarmonyOS实战开发-如何在子窗口中以悬浮窗模式拉起悬浮应用。
2401_82546228的博客
04-12 1032
本示例主要展示了在子窗口中以悬浮窗模式拉起悬浮应用，并对新的应用设置窗口缩放比例，窗口以设置的比例进行缩放，并在界面显示窗口当前的宽度和高度。
基于子窗口实现应用内悬浮窗
hongxiaomeng的博客
05-09 349
ArkTS全局UI自定义弹窗的替代办法——子窗口
最新发布
m0_52332096的博客
05-24 1213
最近在学习窗口的时候想起来之前的一个问题，如何实现一个全局的倒计时弹窗，监听触摸事件，可以在任何页面展示并自动关闭。
OpenHarmony应用开发—ArkUI组件集合
OpenHarmony_dev的博客
09-22 647
使用全局组件ShowToast,TitleBar,IntroductionTitle实现按钮，时间选择器，单选按钮，选择菜单，滑动条，切换按钮，勾选框，文本选择器，时间选择器，计数器，评分条组件功能。使用全局组件TitleBar，AttributeModificationTool实现二维码，进度条，跑马灯，文字计时器，文字时钟，仪表盘，数据面板组件功能。若不存在三级导航，则跳转至详情页面。使用全局组件TitleBar实现标记，滚动条，下拉刷新，弹出面板，字母索引条组件功能。
HarmonyOS ArkTS 使用DevEco Studio高效开发（十三）
Chen_xiaobao的博客
11-27 1724
支持对代码块的快速折叠和展开，既可以单击编辑器左侧边栏的折叠和展开按钮对代码块进行折叠和展开操作，还可以对选中的代码块单机鼠标右键选择折叠方式，包括折叠、递归折叠、全部折叠等操作。提供Find Usages代码引用查找功能，帮助开发者快速查看某个对象(变量、函数或者类等)被引用的地方，用于后续的代码重构，可以极大的提升开发者的开发效率。如果输入的语法不符合编码规范，或者出现语义语法错误，编辑器会实时的进行代码分析，并在代码中突出显示错误或警告，将鼠标放置在错误代码处，会提示详细的错误信息。
OpenHarmony实战开发-如何实现管理应用窗口（Stage模型）
2401_82546228的博客
05-06 1082
窗口沉浸式能力：指对状态栏、导航栏等系统窗口进行控制，减少状态栏导航栏等系统界面的突兀感，从而使用户获得最佳体验的能力。沉浸式能力只在应用主窗口作为全屏窗口时生效。通常情况下，应用子窗口（弹窗、悬浮窗口等辅助窗口）和处于自由窗口下的应用主窗口无法使用沉浸式能力。
HarmonyOS实战开发-实现Ability内页面间的跳转和数据传递。
2401_82546228的博客
03-29 1188
本篇Codelab基于Stage模型下的Ability开发，实现Ability内页面间的跳转和数据传递。
OpenHarmony实战开发-提升应用冷启动速度。
2401_82546228的博客
04-22 1218
应用启动时延是影响用户体验的关键要素。当应用启动时，后台没有该应用的进程，这时系统会重新创建一个新的进程分配给该应用， 这个启动方式就叫做冷启动。
OpenHarmony实战开发-栅格布局 (GridRow/GridCol)
2401_82546228的博客
04-26 1025
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括：
鸿蒙ArkTS实战开发-Native XComponent组件的使用
2401_82546228的博客
03-22 1651
本篇Codelab主要介绍如何使用XComponent组件调用NAPI来创建EGL/GLES环境，实现在主页面绘制一个正方形，并可以改变正方形的颜色。本篇CodeLab使用Native C++模板创建。
HarmonyOS开发实战—如何实现应用悬浮窗
m0_70749039的博客
03-20 1851
本文主要介绍如何利用应用子窗口实现应用内全局悬浮窗，创建应用子窗口需要先拿到窗口管理器 WindowStage 对象，在 EntryAbility.onWindowStageCreate() 回调中取。
HarmonyOS Next开发实战：如何实现应用悬浮窗
shudaoshanQAQ的博客
03-28 1229
应用悬浮窗
OpenHarmony实战开发-全局弹窗封装案例
2401_82546228的博客
05-08 858
本示例介绍两种弹窗的封装案例。一种是自定义弹窗封装成自定义组件的方式，使用一句代码即可控制显示；一种是使用子窗口的方式实现弹窗，使用一句代码即可展示。
鸿蒙HarmonyOS实战-窗口管理
shudaoshanQAQ的博客
03-16 1434
窗口管理
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：悬浮态效果）
m0_64420071的博客
03-04 1544
ArkTS声明式开发（通用属性：悬浮态效果）
2024年鸿蒙HarmonyOS实战-窗口管理_鸿蒙nativewindow 获取窗口，2024年最新字节跳动算法工程师面试总结
2401_84871072的博客
05-12 1152
主窗口的"是否可触"属性是指能否通过触摸屏与用户进行交互。如果主窗口的"是否可触"属性为True，则用户可以通过触摸屏对主窗口进行操作，例如点击按钮、滑动界面等。如果主窗口的"是否可触"属性为False，则用户无法通过触摸屏进行交互，只能使用其他输入设备（如鼠标）进行操作。通常情况下，移动设备（如手机、平板电脑）上的主窗口会设置为可触摸，而桌面电脑上的主窗口可能会设置为不可触摸。// 1.获取应用主窗口。return;// 2.设置主窗口属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值