【窗口管理与多窗口】：“你以为窗口就是个小框框？”——一起看看到底怎么搞定多窗口任务的高效流转！

🏆本文收录于「滚雪球学SpringBoot」专栏(全网一个名)，手把手带你零基础入门Spring Boot，从入门到就业，助你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！

环境说明：Windows 10 + IntelliJ IDEA 2021.3.2 + Jdk 1.8

🌟前言：多窗口管理，不仅仅是“能开多少窗口”这么简单

大家的第一反应是不是：“多窗口管理？不就是多个小窗口叠加上去？”
  但实际上，这背后有很多需要掌握的技巧和最佳实践：从 WindowStage（窗口的舞台）管理，到如何实现流畅的窗口动画，再到如何处理 分屏、浮窗这些高级功能。每一个窗口的生命周期、交互模式，都涉及到了系统对任务、资源的调度和管理。
  你想做出流畅的体验，往往是因为这些“背后的细节”没有处理好，导致任务中断、界面卡顿或体验不一致——想清楚窗口的创建、销毁、动画效果，我们才能让“多窗口”成为用户期待的那种体验，而不是像个“拼接页面”的功能。

📚目录导航（本节：窗口管理与多窗口）🧭

• 🪟 WindowStage：窗口背后的“管理平台”
• 🧳 窗口创建：从一台设备到多窗口的实现与控制
• 🖼️ 分屏/浮窗：如何做出不“翻车”的多任务窗口交互
• 💨 窗口动画：让“多窗口”看起来像流畅的舞蹈🎶
• 🧪 实战 Demo：多窗口的实用操作与动画效果（带代码）

🪟1) WindowStage：窗口的“舞台经理”🎭

想象一下，每个窗口都有自己的舞台，而这个舞台（WindowStage）就负责窗口的创建、显示、销毁等过程。WindowStage 管理着窗口的生命周期，它不只是把界面呈现给用户，还要协调每个窗口之间的状态（比如显示前台、背景、最小化、最大化等）。

🎬WindowStage 的重要角色：

1. 窗口的创建和销毁：当你启动一个窗口（不论是主窗口还是浮窗）时，WindowStage 就是协调它进入系统的那位“大导演”。
2. 窗口的状态管理：每个窗口都有可能处于前台、后台或最小化状态，WindowStage 负责判断和管理这些状态。
3. 窗口的动画管理：动画效果、过渡、窗口的展开/折叠等都由 WindowStage 提供支持。

🧪简单的 WindowStage 创建与销毁示例（ArkTS）

import window from '@ohos.window';

// 创建一个新的 WindowStage
let windowStage: window.WindowStage | null = null;

function createWindow() {
  windowStage = new window.WindowStage();

  windowStage.on('ready', () => {
    console.log("窗口已准备好，开始加载内容！");
    // 可以在这里加载你的页面
  });

  windowStage.create();
}

// 销毁窗口
function destroyWindow() {
  if (windowStage) {
    windowStage.destroy();
    console.log("窗口已销毁");
    windowStage = null;
  }
}

👀小贴士：
每个窗口都由 WindowStage 管理，它可以根据当前窗口的状态选择是否更新、销毁。**千万不要直接操作窗口，而是通过 WindowStage 来管理。
注意：WindowStage 和窗口之间有着严格的生命周期，创建后需要主动销毁，否则会造成资源浪费和潜在的内存泄漏。

🧳2) 窗口创建：从一台设备到多个窗口的实现与控制

在鸿蒙的窗口管理中，创建窗口并不是一个简单的“新建页面”操作。每个窗口都有一个独立的生命周期和交互。多个窗口之间的协同操作（比如分屏、浮窗、窗口叠加）需要进行细致的设计。

✅窗口创建的常见场景：

1. 常规窗口：最简单的窗口创建，适用于单一应用任务。
2. 浮窗窗口：应用悬浮在其他任务之上，用于辅助操作。
3. 分屏窗口：两个任务同时展现，常见于多任务并行操作的场景。

🧪创建窗口的 ArkTS 示例：普通窗口创建与显示

import window from '@ohos.window';

let mainWindowStage: window.WindowStage | null = null;

// 创建并显示窗口
function createMainWindow() {
  mainWindowStage = new window.WindowStage();
  
  mainWindowStage.on('ready', () => {
    console.info('主窗口准备完毕，加载页面！');
    // 在此加载内容，如页面或组件
  });

  mainWindowStage.create();
}

⚠️注意：
窗口创建不仅仅是显示 UI，它还涉及权限控制和资源管理，分屏和浮窗的功能通常还需要申请额外的权限。并且窗口创建后，需要保持与系统的连接，避免被自动销毁。

🖼️3) 分屏与浮窗：如何在多个任务之间轻松切换和协同

多任务并行的能力在现如今的智能设备中尤为重要，尤其是鸿蒙系统中对分屏和浮窗的支持。用户能够在同一个屏幕上同时操作多个任务，极大提高了操作效率。

✅分屏操作：

分屏操作允许用户同时处理两个任务，系统会把屏幕分割成两个部分，让用户可以在两侧同时操作。每个分屏窗口是独立的，可以单独管理其生命周期、交互和显示。
鸿蒙系统通过 splitScreen API 提供了对分屏的支持，它允许用户选择设备上的窗口进行分屏操作。

✅浮窗操作：

浮窗功能允许用户将一个小窗口悬浮在其他任务之上，用于实时显示一些信息或辅助任务。浮窗通常是轻量级的，不能占用太多屏幕空间。

🧪代码示例：分屏与浮窗创建（简化版，具体实现根据设备支持）

import window from '@ohos.window';

// 创建分屏窗口
function createSplitScreen() {
  const splitWindow = new window.WindowStage();
  splitWindow.create(); // 创建一个新的窗口
  // 假设这里是分屏的触发逻辑
  splitWindow.on('ready', () => {
    console.log("分屏窗口已准备，开始显示");
  });
}

// 创建浮窗窗口
function createFloatingWindow() {
  const floatingWindow = new window.WindowStage();
  floatingWindow.create(); // 创建一个浮窗
  floatingWindow.on('ready', () => {
    console.log("浮窗已准备，展示在前端");
  });
}

⚡分屏与浮窗设计的重点：

• 分屏窗口常常用于并行任务处理，比如同时编辑文档和浏览网页。
• 浮窗窗口常用于实时信息展示，比如聊天窗口、视频播放器的小窗口等。

💨4) 窗口动画：让窗口间的切换更加自然流畅

窗口间的动画效果是提升用户体验的关键之一。你可以通过动画的过渡，使得窗口的出现和消失更为自然，同时让窗口之间的切换看起来更加流畅。

✅常见动画效果：

1. 平滑过渡：窗口出现和消失时的平滑过渡效果，减少突兀感。
2. 缩放动画：窗口从小到大、或从大到小的过渡效果，强调空间变化。
3. 位移动画：窗口在屏幕上的移动效果，用于切换或布局调整。

🧪窗口动画代码示例：平滑过渡

import window from '@ohos.window';

// 创建窗口时添加过渡动画
function createWindowWithAnimation() {
  const win = new window.WindowStage();

  win.on('ready', () => {
    console.log('窗口准备好！准备展示动画');
    win.showWithAnimation(window.WindowAnimationType.FADE_IN);
  });

  win.create();
}

// 销毁时添加过渡动画
function destroyWindowWithAnimation() {
  if (win) {
    win.hideWithAnimation(window.WindowAnimationType.FADE_OUT, () => {
      console.log("窗口已销毁，动画完成");
      win.destroy();
    });
  }
}

🎯小贴士：
动画效果虽然能够增强用户的视觉体验，但请避免动画过于复杂，否则容易拖慢渲染速度，特别是在性能较弱的设备上，动画反而会引起卡顿。

🧪5) 实战 Demo：综合多窗口与动画的应用

假设我们要做一个带有“主窗口 + 分屏 + 浮窗”的应用，窗口间有平滑过渡动画，且用户可以随时切换任务，下面是一个简化版的多窗口管理 + 动画效果的完整操作示例：

import window from '@ohos.window';

// 主窗口
let mainWindowStage: window.WindowStage;

// 创建主窗口
function createMainWindow() {
  mainWindowStage = new window.WindowStage();
  mainWindowStage.create();

  mainWindowStage.on('ready', () => {
    console.log("主窗口准备就绪，开始加载内容！");
  });
}

// 创建分屏窗口
function createSplitScreen() {
  const splitWindow = new window.WindowStage();
  splitWindow.create();
  splitWindow.on('ready', () => {
    console.log("分屏窗口准备好了！");
  });
}

// 创建浮窗窗口
function createFloatingWindow() {
  const floatingWindow = new window.WindowStage();
  floatingWindow.create();
  floatingWindow.on('ready', () => {
    console.log("浮窗准备好了！");
  });
}

// 销毁窗口
function destroyWindow() {
  if (mainWindowStage) {
    mainWindowStage.hideWithAnimation(window.WindowAnimationType.FADE_OUT, () => {
      console.log("窗口销毁，动画结束");
      mainWindowStage.destroy();
    });
  }
}

🎯本节小结：

• WindowStage 管理了每个窗口的生命周期，确保它们能够顺利创建与销毁。
• 分屏与浮窗：通过适当的 API 可以让你在多个任务间实现高效流转，增强用户多任务处理体验。
• 窗口动画：让每个窗口的切换都充满动感，而不是“硬切换”。

🧧福利赠与你🧧

  无论你是计算机专业的学生，还是对编程有兴趣的小伙伴，都建议直接毫无顾忌的学习此专栏「滚雪球学SpringBoot」专栏(全网一个名)，bug菌郑重承诺，凡是学习此专栏的同学，均能获取到所需的知识和技能，全网最快速入门SpringBoot，就像滚雪球一样，越滚越大， 无边无际，指数级提升。

  最后，如果这篇文章对你有所帮助，帮忙给作者来个一键三连，关注、点赞、收藏，您的支持就是我坚持写作最大的动力。

  同时欢迎大家关注公众号:「猿圈奇妙屋」 ，以便学习更多同类型的技术文章，免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板、技术文章Markdown文档等海量资料。

✨️ Who am I?

我是bug菌(全网一个名)，CSDN | 掘金 | InfoQ | 51CTO | 华为云 | 阿里云 | 腾讯云 等社区博客专家，C站博客之星Top30，华为云多年度十佳博主/价值贡献奖，掘金多年度人气作者Top40，掘金等各大社区平台签约作者，51CTO年度博主Top12，掘金/InfoQ/51CTO等社区优质创作者；全网粉丝合计 30w+；更多精彩福利点击这里；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试真题、4000G PDF电子书籍、简历模板等海量资料，你想要的我都有，关键是你不来拿。

-End-