HarmonyOS ArkUI实战开发-窗口模块(Window)

2024-04-23 04:20

本文主要是介绍HarmonyOS ArkUI实战开发-窗口模块(Window),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

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 = subWindowthis.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 = nullbuild() {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 = subWindowthis.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 系统上实现要简单的多(#.#)

码牛课堂也为了积极培养鸿蒙生态人才,让大家都能学习到鸿蒙开发最新的技术,针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群,整理了一套纯血版鸿蒙(HarmonyOS Next)全栈开发技术的学习路线。大家可以进行参考学习:https://qr21.cn/FV7h05

①全方位,更合理的学习路径
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块,六大实战项目贯穿始终,由浅入深,层层递进,深入理解鸿蒙开发原理!

②多层次,更多的鸿蒙原生应用
路线图将包含完全基于鸿蒙内核开发的应用,比如一次开发多端部署、自由流转、元服务、端云一体化等,多方位的学习内容让学生能够高效掌握鸿蒙开发,少走弯路,真正理解并应用鸿蒙的核心技术和理念。

③实战化,更贴合企业需求的技术点
学习路线图中的每一个技术点都能够紧贴企业需求,经过多次真实实践,每一个知识点、每一个项目,都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果,注重对学生的细致教学,每一步都确保学生能够真正理解和掌握。

为了能让大家更好的学习鸿蒙(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://qr21.cn/FV7h05

大厂鸿蒙面试题::https://qr18.cn/F781PH

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

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

这篇关于HarmonyOS ArkUI实战开发-窗口模块(Window)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/927768

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

Python使用date模块进行日期处理的终极指南

《Python使用date模块进行日期处理的终极指南》在处理与时间相关的数据时,Python的date模块是开发者最趁手的工具之一,本文将用通俗的语言,结合真实案例,带您掌握date模块的六大核心功能... 目录引言一、date模块的核心功能1.1 日期表示1.2 日期计算1.3 日期比较二、六大常用方法详

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

如何使用Python实现一个简单的window任务管理器

《如何使用Python实现一个简单的window任务管理器》这篇文章主要为大家详细介绍了如何使用Python实现一个简单的window任务管理器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 任务管理器效果图完整代码import tkinter as tkfrom tkinter i

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕

最新Spring Security实战教程之Spring Security安全框架指南

《最新SpringSecurity实战教程之SpringSecurity安全框架指南》SpringSecurity是Spring生态系统中的核心组件,提供认证、授权和防护机制,以保护应用免受各种安... 目录前言什么是Spring Security?同类框架对比Spring Security典型应用场景传统