子窗口开发指导
=======

#### 场景介绍

子窗口是最基础的辅助窗口类型，用于提供辅助性的功能或展示额外的信息。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/07/v3/W1IbfdwESj6YZX3ALWeIdw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073325Z&HW-CC-Expire=86400&HW-CC-Sign=4F037228934A2AE5BAC5660D4BB1C906C279664163191B8B3BF517B2E332C403)

*   在非[自由窗口](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/freeform-window-overview#自由窗口)状态下，子窗只会在应用主窗口范围显示。
*   在[自由窗口](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/freeform-window-overview#自由窗口)状态下，子窗可超出应用主窗口范围显示。

#### 开发步骤

1.  通过[createSubWindow()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-windowstage#createsubwindow9-1)接口或[createSubWindowWithOptions()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-windowstage#createsubwindowwithoptions11)创建应用子窗口。子窗口创建后默认为[沉浸式布局](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/immersive-window-feature#沉浸式布局)。
    
    API版本26.0.0开始，支持在使用[createSubWindowWithOptions()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-windowstage#createsubwindowwithoptions11)创建子窗时设置[SubWindowOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-i#subwindowoptions11)中的zLevelAboveParentLoosened为true，此时创建的子窗称为独立子窗。
    
    独立子窗在[自由窗口](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/freeform-window-overview#自由窗口)状态下，不跟随主窗前后台的切换，仅跟随主窗一起销毁，独立子窗与主窗可通过点击调整层级。
    
    let windowStage\_: window.WindowStage | undefined = undefined;
    let sub\_windowClass: window.Window | undefined = undefined;
    // 1.使用createSubWindow接口创建子窗
    windowStage\_.createSubWindow("mySubWindow", (err: BusinessError, data) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('Failed to create the subwindow. Cause: ' + JSON.stringify(err));
        return;
      }
      sub\_windowClass = data;
      if (!sub\_windowClass) {
        console.error('sub\_windowClass is null');
        return;
      }
      console.info('Succeeded in creating the subwindow. Data: ' + JSON.stringify(data));
    })
    
    let windowStage\_: window.WindowStage | undefined = undefined;
    let independent\_windowClass: window.Window | undefined = undefined;
    // 1.使用createSubWindowWithOptions接口创建独立子窗
    let options : window.SubWindowOptions = {
      title: 'title',
      decorEnabled: true,
      zLevelAboveParentLoosened: true  // 独立子窗需将zLevelAboveParentLoosened设置为true
    };
    windowStage\_.createSubWindowWithOptions('IndependentSubWindow', options).then((data) => {
      independent\_windowClass = data;
      if (!independent\_windowClass) {
        console.error('independent\_windowClass is null');
        return;
      }
      console.info(\`Succeeded in creating the IndependentSubWindow. Data: ${JSON.stringify(data)}\`);
    });
    
2.  设置子窗口属性。
    
    *   子窗口创建成功后，可以改变其大小、位置等，还可以根据应用需要设置窗口背景色、亮度等属性。
        
    *   在调用[showWindow()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#showwindow9-1)之前，建议设置子窗口的大小和位置。
        
    *   如果没有设置子窗口的大小，调用[showWindow()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#showwindow9-1)后有如下表现：
        
        *   [自由窗口](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/freeform-window-overview#自由窗口)状态下，默认子窗口大小为当前物理屏幕的大小。
            
        *   非[自由窗口](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/freeform-window-overview#自由窗口)状态下，默认子窗口大小为主窗口大小。
            
    
    此处以设置独立子窗的属性为例。示例代码如下：
    
    // 2.子窗口创建成功后，设置子窗口的位置、大小及相关属性等。
    independent\_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.');
      if (!independent\_windowClass) {
        console.error('independent\_windowClass is null');
        return;
      }
      independent\_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.  加载显示子窗口的具体内容。
    
    通过[setUIContent()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#setuicontent9-1)和[showWindow()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#showwindow9-1)接口加载和显示子窗口的具体内容。
    
    此处以加载显示独立子窗的具体内容为例。示例代码如下：
    
    // 3.为子窗口加载对应的目标页面。
    independent\_windowClass.setUIContent("pages/page3", (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.');
      if (!independent\_windowClass) {
        console.error('independent\_windowClass is null');
        return;
      }
      // 显示子窗口。
      independent\_windowClass.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.  销毁子窗口。
    
    当不再需要某些子窗口时，可根据具体实现逻辑，使用[destroyWindow()](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-window-window#destroywindow9-1)接口销毁子窗口。
    
    此处以销毁独立子窗为例。示例代码如下：
    
    // 4.销毁子窗口。当不再需要子窗口时，可根据具体实现逻辑，使用destroyWindow对其进行销毁。
    sub\_windowClass.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.');
    });