管理系统窗口（仅Stage模型支持）

管理系统窗口概述

在Stage模型下， 允许系统应用创建和管理系统窗口，包括音量条、壁纸、通知栏、状态栏、导航栏等。具体支持的系统窗口类型见API参考-WindowType。

在窗口显示、隐藏及窗口间切换时，窗口模块通常会添加动画效果，以使各个交互过程更加连贯流畅。

在OpenHarmony中，应用窗口的动效为默认行为，不需要开发者进行设置或者修改。

相对于应用窗口，在显示系统窗口过程中，开发者可以自定义窗口的显示动画、隐藏动画。

说明：

本文档涉及系统接口的使用，请使用full-SDK进行开发。具体使用可见full-SDK替换指南。

接口说明

更多API说明请参见API参考。

系统窗口的开发

本文以音量条窗口为例，介绍系统窗口的基本开发和管理步骤。

开发步骤

1. 创建系统窗口。

在ServiceExtensionContext下，使用window.createWindow接口创建音量条系统窗口。

1. 操作或设置系统窗口的属性。

系统窗口创建成功后，可以改变其大小、位置等，还可以根据需要设置系统窗口的背景色、亮度等属性。

1. 加载显示系统窗口的具体内容。

通过setUIContent和showWindow接口加载显示音量条窗口的具体内容。

1. 隐藏/销毁系统窗口。

当不再需要音量条窗口时，可根据具体实现逻辑，使用hide接口或destroyWindow接口对其进行隐藏或销毁。

import ExtensionContext from '@ohos.app.ability.ServiceExtensionAbility';
import window from '@ohos.window';
import { BusinessError } from '@ohos.base';
import Want from '@ohos.app.ability.Want';

export default class ServiceExtensionAbility1 extends ExtensionContext {
  onCreate(want: Want) {
    // 1.创建音量条窗口。
    let windowClass: window.Window|null = null;
    let config: window.Configuration = {
      name: "volume", windowType: window.WindowType.TYPE_VOLUME_OVERLAY, ctx: this.context
    };
    window.createWindow(config, (err: BusinessError, data) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to create the volume window. Cause:' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in creating the volume window.')
      windowClass = data;
      // 2.创建音量条窗口成功之后，可以改变其大小、位置或设置背景色、亮度等属性。
      windowClass.moveWindowTo(300, 300, (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          console.error('Failed to move the window. Cause:' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in moving the window.');
      });
      windowClass.resize(500, 500, (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          console.error('Failed to change the window size. Cause:' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in changing the window size.');
      });
      // 3.为音量条窗口加载对应的目标页面。
      windowClass.setUIContent("pages/page_volume", (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          console.error('Failed to load the content. Cause:' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in loading the content.');
        // 3.显示音量条窗口。
        (windowClass as window.Window).showWindow((err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to show the window. Cause:' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in showing the window.');
        });
      });
      // 4.隐藏/销毁音量条窗口。当不再需要音量条时，可根据具体实现逻辑，对其进行隐藏或销毁。
      // 此处以监听音量条区域外的点击事件为例实现音量条窗口的隐藏。
      windowClass.on('touchOutside', () => {
        console.info('touch outside');
        (windowClass as window.Window).hide((err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to hide the window. Cause: ' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in hidinging the window.');
        });
      });
    });
  }
};

自定义系统窗口的显示与隐藏动画

在显示系统窗口过程中，开发者可以自定义窗口的显示动画。在隐藏系统窗口过程中，开发者可以自定义窗口的隐藏动画。本文以显示和隐藏动画为例介绍主要开发步骤。

开发步骤

1. 获取窗口属性转换控制器。

通过getTransitionController接口获取控制器。后续的动画操作都由属性控制器来完成。

1. 配置窗口显示时的动画。

通过动画函数animateTo()配置具体的属性动画。

1. 设置属性转换完成。

通过completeTransition(true)来设置属性转换的最终完成状态。如果传入false，则表示撤销本次转换。

1. 显示或隐藏当前窗口，过程中播放动画。

调用showWithAnimation接口，来显示窗口并播放动画。调用hideWithAnimation接口，来隐藏窗口并播放动画。

import ExtensionContext from '@ohos.app.ability.ServiceExtensionAbility';
import window from '@ohos.window';
import { BusinessError } from '@ohos.base';
import Want from '@ohos.app.ability.Want';

export default class ServiceExtensionAbility1 extends ExtensionContext {
  onCreate(want: Want) {
    // 创建音量条窗口。
    let windowClass: window.Window|null = null;
    let config: window.Configuration = {
      name: "volume", windowType: window.WindowType.TYPE_VOLUME_OVERLAY, ctx: this.context
    };
    window.createWindow(config, (err: BusinessError, data) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to create the volume window. Cause:' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in creating the volume window.')
      windowClass = data;
      // 以下为系统窗口显示动画的开发步骤
      // 1. 获取窗口属性转换控制器
      let controller: window.TransitionController = windowClass.getTransitionController();
      // 2. 配置窗口显示时的动画
      (context: window.TransitionContext) => {
        let toWindow: window.Window = context.toWindow
        // 配置动画参数
        animateTo({
          duration: 1000, // 动画时长
          tempo: 0.5, // 播放速率
          curve: Curve.EaseInOut, // 动画曲线
          delay: 0, // 动画延迟
          iterations: 1, // 播放次数
          playMode: PlayMode.Normal, // 动画模式
          onFinish: () => {
            // 3. 设置属性转换完成
            context.completeTransition(true)
          }
        }, () => {
          let obj: window.TranslateOptions = {
            x: 100.0,
            y: 0.0,
            z: 0.0
          }
          toWindow.translate(obj);
          console.info('toWindow translate end');
        })
        console.info('complete transition end');
        controller.animationForHidden(context);
      }

      windowClass.loadContent("pages/page_volume", (err: BusinessError) => {
        let errCode: number = err.code;
        if (errCode) {
          console.error('Failed to load the content. Cause:' + JSON.stringify(err));
          return;
        }
        console.info('Succeeded in loading the content.');
        // 4.显示当前窗口，过程中播放动画
        (windowClass as window.Window).showWithAnimation((err: BusinessError) => {
          let errCode: number = err.code;
          if (errCode) {
            console.error('Failed to show the window with animation. Cause: ' + JSON.stringify(err));
            return;
          }
          console.info('Succeeded in showing the window with animation.');
        })
      });
    });
  }

  onDestroy() {
    let windowClass: window.Window|null = null;
    try {
      windowClass = window.findWindow('volume');
    } catch (exception) {
      console.error('Failed to find the Window. Cause: ' + JSON.stringify(exception));
    }
    // 以下为系统窗口隐藏动画的开发步骤
    // 1. 获取窗口属性转换控制器
    let controller: window.TransitionController = (windowClass as window.Window).getTransitionController();
    // 2. 配置窗口显示时的动画
    (context: window.TransitionContext) => {
      let toWindow: window.Window = context.toWindow
      // 配置动画参数
      animateTo({
        duration: 1000, // 动画时长
        tempo: 0.5, // 播放速率
        curve: Curve.EaseInOut, // 动画曲线
        delay: 0, // 动画延迟
        iterations: 1, // 播放次数
        playMode: PlayMode.Normal, // 动画模式
        onFinish: () => {
          // 3. 设置属性转换完成
          context.completeTransition(true);
          (windowClass as window.Window).destroyWindow((err: BusinessError) => {
            let errCode: number = err.code;
            if (errCode) {
              console.error('Failed to destroy the window. Cause:' + JSON.stringify(err));
              return;
            }
            console.info('Succeeded in destroying the window.');
          });
        }
      }, () => {
        toWindow.opacity(0.0);
        console.info('toWindow opacity end');
      })
      console.info('complete transition end');
      controller.animationForHidden(context);
    }
      // 4.隐藏当前窗口，过程中播放动画
    (windowClass as window.Window).hideWithAnimation((err: BusinessError) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to hide the window with animation. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in hiding the window with animation.');
    });
  }
};

你可能感兴趣的鸿蒙文章

harmony 鸿蒙窗口管理

harmony 鸿蒙管理应用窗口（FA模型）

harmony 鸿蒙管理应用窗口（Stage模型）

harmony 鸿蒙窗口开发概述