From 8b975ed1135dc30bab18630c0ab83eab8ab407e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=9B=E4=BA=9A=E8=8A=B3?= Date: Thu, 8 Dec 2022 11:14:53 +0000 Subject: [PATCH] update zh-cn/application-dev/windowmanager/application-window-stage.md. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 葛亚芳 --- .../windowmanager/application-window-stage.md | 89 +++++++++---------- 1 file changed, 40 insertions(+), 49 deletions(-) diff --git a/zh-cn/application-dev/windowmanager/application-window-stage.md b/zh-cn/application-dev/windowmanager/application-window-stage.md index f36870f720..145b1aebe4 100644 --- a/zh-cn/application-dev/windowmanager/application-window-stage.md +++ b/zh-cn/application-dev/windowmanager/application-window-stage.md @@ -34,25 +34,24 @@ | WindowStage | getMainWindow(callback: AsyncCallback<Window>): void | 获取`WindowStage`实例下的主窗口。
此接口仅可在`Stage`模型下使用。 | | WindowStage | loadContent(path: string, callback: AsyncCallback<void>): void | 为当前`WindowStage`的主窗口加载具体页面。
此接口仅可在`Stage`模型下使用。 | | WindowStage | createSubWindow(name: string, callback: AsyncCallback<Window>): void | 创建子窗口。
此接口仅可在`Stage`模型下使用。 | -| window静态方法 | create(ctx: Context, id: string, type: WindowType, callback: AsyncCallback<Window>): void | 创建子窗口。
-`ctx`：为应用上下文信息。
-`type`：为创建的窗口类型。 | -| Window | loadContent(path: string, callback: AsyncCallback<void>): void | 为当前窗口加载具体页面。 | -| Window | setBackgroundColor(color: string, callback: AsyncCallback<void>): void | 设置窗口的背景色。 | -| Window | setBrightness(brightness: number, callback: AsyncCallback<void>): void | 设置屏幕亮度值。 | -| Window | setTouchable(isTouchable: boolean, callback: AsyncCallback<void>): void | 设置窗口是否为可触状态。 | -| Window | moveTo(x: number, y: number, callback: AsyncCallback<void>): void | 移动当前窗口位置。 | -| Window | resetSize(width: number, height: number, callback: AsyncCallback<void>): void | 改变当前窗口大小。 | -| Window | setFullScreen(isFullScreen: boolean, callback: AsyncCallback<void>): void | 设置窗口是否全屏显示。 | -| Window | setLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback<void>): void | 设置窗口布局是否为全屏布局。 | -| Window | setSystemBarEnable(names: Array<'status'\|'navigation'>): Promise<void> | 设置导航栏、状态栏是否显示。 | -| Window | setSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback<void>): void | 设置窗口内导航栏、状态栏属性。
`systemBarProperties`：导航栏、状态栏的属性集合。 | -| Window | show(callback: AsyncCallback\): void | 显示当前窗口。 | +| window静态方法 | createWindow(config: Configuration, callback: AsyncCallback): void | 创建系统窗口。
-`config`：创建窗口时的参数。 | +| Window | setUIContent(path: string, callback: AsyncCallback<void>): void | 为当前窗口加载具体页面。 | +| Window | setWindowBackgroundColor(color: string, callback: AsyncCallback<void>): void | 设置窗口的背景色。 | +| Window | setWindowBrightness(brightness: number, callback: AsyncCallback<void>): void | 设置屏幕亮度值。 | +| Window | setWindowTouchable(isTouchable: boolean, callback: AsyncCallback<void>): void | 设置窗口是否为可触状态。 | +| Window | moveWindowTo(x: number, y: number, callback: AsyncCallback<void>): void | 移动当前窗口位置。 | +| Window | resize(width: number, height: number, callback: AsyncCallback<void>): void | 改变当前窗口大小。 | +| Window | setWindowLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback<void>): void | 设置窗口布局是否为全屏布局。 | +| Window | setWindowSystemBarEnable(names: Array<'status'\|'navigation'>): Promise<void> | 设置导航栏、状态栏是否显示。 | +| Window | setWindowSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback<void>): void | 设置窗口内导航栏、状态栏属性。
`systemBarProperties`：导航栏、状态栏的属性集合。 | +| Window | showWindow(callback: AsyncCallback\): void | 显示当前窗口。 | | Window | on(type: 'touchOutside', callback: Callback<void>): void | 开启本窗口区域外的点击事件的监听。 | -| Window | destroy(callback: AsyncCallback<void>): void | 销毁当前窗口。 | +| Window | destroyWindow(callback: AsyncCallback<void>): void | 销毁当前窗口。 | ## 设置应用主窗口 -在`Stage`模型下，应用主窗口由`Ability`创建并维护生命周期。在`Ability`的`onWindowStageCreate`回调中，通过`WindowStage`获取应用主窗口，即可对其进行属性设置等操作 +在`Stage`模型下，应用主窗口由`Ability`创建并维护生命周期。在`Ability`的`onWindowStageCreate`回调中，通过`WindowStage`获取应用主窗口，即可对其进行属性设置等操作。 ### 开发步骤 @@ -82,7 +81,7 @@ class MainAbility extends Ability { console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); // 2.设置主窗口属性。以设置"是否可触"属性为例。 let isTouchable = true; - windowClass.setTouchable(isTouchable, (err) => { + windowClass.setWindowTouchable(isTouchable, (err) => { if (err.code) { console.error('Failed to set the window to be touchable. Cause:' + JSON.stringify(err)); return; @@ -117,10 +116,10 @@ class MainAbility extends Ability { 子窗口创建成功后，可以改变其大小、位置等，还可以根据应用需要设置窗口背景色、亮度等属性。 3. 加载显示子窗口的具体内容。 - 通过`loadContent`和`show`接口加载显示子窗口的具体内容。 + 通过`setUIContent`和`showWindow`接口加载显示子窗口的具体内容。 4. 销毁子窗口。 - 当不再需要某些子窗口时，可根据具体实现逻辑，使用`destroy`接口销毁子窗口。 + 当不再需要某些子窗口时，可根据具体实现逻辑，使用`destroyWindow`接口销毁子窗口。 ```ts import Ability from '@ohos.application.Ability' @@ -138,14 +137,14 @@ class MainAbility extends Ability { sub_windowClass = data; console.info('Succeeded in creating the subwindow. Data: ' + JSON.stringify(data)); // 2.子窗口创建成功后，设置子窗口的位置、大小及相关属性等。 - sub_windowClass.moveTo(300, 300, (err) => { + sub_windowClass.moveWindowTo(300, 300, (err) => { if (err.code) { console.error('Failed to move the window. Cause:' + JSON.stringify(err)); return; } console.info('Succeeded in moving the window.'); }); - sub_windowClass.resetSize(500, 1000, (err) => { + sub_windowClass.resize(500, 500, (err) => { if (err.code) { console.error('Failed to change the window size. Cause:' + JSON.stringify(err)); return; @@ -153,14 +152,14 @@ class MainAbility extends Ability { console.info('Succeeded in changing the window size.'); }); // 3.为子窗口加载对应的目标页面。 - sub_windowClass.loadContent("pages/page3", (err) => { + sub_windowClass.setUIContent("pages/page3", (err) => { if (err.code) { console.error('Failed to load the content. Cause:' + JSON.stringify(err)); return; } console.info('Succeeded in loading the content.'); // 3.显示子窗口。 - sub_windowClass.show((err) => { + sub_windowClass.showWindow((err) => { if (err.code) { console.error('Failed to show the window. Cause: ' + JSON.stringify(err)); return; @@ -173,7 +172,7 @@ class MainAbility extends Ability { destroySubWindow() { // 4.销毁子窗口。当不再需要子窗口时，可根据具体实现逻辑，使用destroy对其进行销毁。 - sub_windowClass.destroy((err) => { + sub_windowClass.destroyWindow((err) => { if (err.code) { console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err)); return; @@ -207,9 +206,8 @@ class MainAbility extends Ability { 通过`getMainWindow`接口获取应用主窗口。 2. 实现沉浸式效果。有以下三种方式： - - 方式一：调用`setFullScreen`接口，设置应用主窗口为全屏显示，此时导航栏、状态栏将隐藏，从而达到沉浸式效果。 - - 方式二：调用`setSystemBarEnable`接口，设置导航栏、状态栏不显示，从而达到沉浸式效果。 - - 方式三：调用`setLayoutFullScreen`接口，设置应用主窗口为全屏布局；然后调用`setSystemProperties`接口，设置导航栏、状态栏的透明度、背景/文字颜色以及高亮图标等属性，使之保持与主窗口显示协调一致，从而达到沉浸式效果。 + - 方式一：调用`setWindowSystemBarEnable`接口，设置导航栏、状态栏不显示，从而达到沉浸式效果。 + - 方式二：调用`setWindowLayoutFullScreen`接口，设置应用主窗口为全屏布局；然后调用`setWindowSystemBarProperties`接口，设置导航栏、状态栏的透明度、背景/文字颜色以及高亮图标等属性，使之保持与主窗口显示协调一致，从而达到沉浸式效果。 3. 加载显示沉浸式窗口的具体内容。 通过`loadContent`接口加载沉浸式窗口的具体内容。 @@ -229,27 +227,18 @@ class MainAbility extends Ability { windowClass = data; console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); - // 2.实现沉浸式效果。方式一：设置应用主窗口为全屏显示。 - let isFullScreen = true; - windowClass.setFullScreen(isFullScreen, (err) => { - if (err.code) { - console.error('Failed to enable the full-screen mode. Cause:' + JSON.stringify(err)); - return; - } - console.info('Succeeded in enabling the full-screen mode.'); - }); - // 2.实现沉浸式效果。方式二：设置导航栏、状态栏不显示。 + // 2.实现沉浸式效果。方式一：设置导航栏、状态栏不显示。 let names = []; - windowClass.setSystemBarEnable(names, (err) => { + windowClass.setWindowSystemBarEnable(names, (err) => { if (err.code) { console.error('Failed to set the system bar to be visible. Cause:' + JSON.stringify(err)); return; } console.info('Succeeded in setting the system bar to be visible.'); }); - // 2.实现沉浸式效果。方式三：设置窗口为全屏布局，配合设置导航栏、状态栏的透明度、背景/文字颜色及高亮图标等属性，与主窗口显示保持协调一致。 + // 2.实现沉浸式效果。方式二：设置窗口为全屏布局，配合设置导航栏、状态栏的透明度、背景/文字颜色及高亮图标等属性，与主窗口显示保持协调一致。 let isLayoutFullScreen = true; - windowClass.setLayoutFullScreen(isLayoutFullScreen, (err) => { + windowClass.setWindowLayoutFullScreen(isLayoutFullScreen, (err) => { if (err.code) { console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err)); return; @@ -263,7 +252,7 @@ class MainAbility extends Ability { statusBarContentColor: '#ffffff', navigationBarContentColor: '#ffffff' }; - windowClass.setSystemBarProperties(sysBarProps, (err) => { + windowClass.setWindowSystemBarProperties(sysBarProps, (err) => { if (err.code) { console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err)); return; @@ -292,9 +281,10 @@ class MainAbility extends Ability { ### 开发步骤 1. 申请权限。 - 创建`WindowType.TYPE_FLOAT`即悬浮窗类型的窗口，需要在`module.json5`文件的`requestPermissions`对象中配置`ohos.permission.SYSTEM_FLOAT_WINDOW`权限。更多配置信息详见[Stage模型应用程序包结构](../quick-start/application-package-structure-stage.md)。 + 创建`WindowType.TYPE_FLOAT`即悬浮窗类型的窗口，需要在`module.json5`文件的`requestPermissions`对象中配置`ohos.permission.SYSTEM_FLOAT_WINDOW`权限。更多配置信息详见[module.json5配置文件](../quick-start/module-configuration-file.md)。 > **说明：** + > > 虽然悬浮窗具备始终在前台显示的能力，但如果创建悬浮窗的应用任务被系统回收，仍然会导致悬浮窗从界面移除。如果想要保持悬浮窗口始终在前台显示，请申请[长时任务](../task-management/background-task-overview.md)。 ```json @@ -316,17 +306,17 @@ class MainAbility extends Ability { ``` 2. 创建悬浮窗。 - 通过`window.create`接口创建悬浮窗类型的窗口。 + 通过`window.createWindow`接口创建悬浮窗类型的窗口。 3. 对悬浮窗进行属性设置等操作。 悬浮窗窗口创建成功后，可以改变其大小、位置等，还可以根据应用需要设置悬浮窗背景色、亮度等属性。 4. 加载显示悬浮窗的具体内容。 - 通过`loadContent`和`show`接口加载显示悬浮窗的具体内容。 + 通过`setUIContent`和`showWindow`接口加载显示悬浮窗的具体内容。 5. 销毁悬浮窗。 - 当不再需要悬浮窗时，可根据具体实现逻辑，使用`destroy`接口销毁悬浮窗。 + 当不再需要悬浮窗时，可根据具体实现逻辑，使用`destroyWindow`接口销毁悬浮窗。 ```ts import Ability from '@ohos.application.Ability' @@ -337,7 +327,8 @@ class MainAbility extends Ability { onWindowStageCreate(windowStage) { // 2. 创建悬浮窗。 let windowClass = null; - window.create(this.context, "floatWindow", window.WindowType.TYPE_FLOAT, (err, data) => { + let config = {name: "floatWindow", windowType: window.WindowType.TYPE_FLOAT, ctx: this.context}; + window.createWindow(config, (err, data) => { if (err.code) { console.error('Failed to create the floatWindow. Cause: ' + JSON.stringify(err)); return; @@ -345,14 +336,14 @@ class MainAbility extends Ability { console.info('Succeeded in creating the floatWindow. Data: ' + JSON.stringify(data)); windowClass = data; // 3.悬浮窗窗口创建成功后，设置悬浮窗的位置、大小及相关属性等。 - windowClass.moveTo(300, 300, (err) => { + windowClass.moveWindowTo(300, 300, (err) => { if (err.code) { console.error('Failed to move the window. Cause:' + JSON.stringify(err)); return; } console.info('Succeeded in moving the window.'); }); - windowClass.resetSize(500, 1000, (err) => { + windowClass.resize(500, 500, (err) => { if (err.code) { console.error('Failed to change the window size. Cause:' + JSON.stringify(err)); return; @@ -360,14 +351,14 @@ class MainAbility extends Ability { console.info('Succeeded in changing the window size.'); }); // 4.为悬浮窗加载对应的目标页面。 - windowClass.loadContent("pages/page4", (err) => { + windowClass.setUIContent("pages/page4", (err) => { if (err.code) { console.error('Failed to load the content. Cause:' + JSON.stringify(err)); return; } console.info('Succeeded in loading the content.'); // 4.显示悬浮窗。 - windowClass.show((err) => { + windowClass.showWindow((err) => { if (err.code) { console.error('Failed to show the window. Cause: ' + JSON.stringify(err)); return; @@ -376,7 +367,7 @@ class MainAbility extends Ability { }); }); //5.销毁悬浮窗。当不再需要悬浮窗时，可根据具体实现逻辑，使用destroy对其进行销毁。 - windowClass.destroy((err) => { + windowClass.destroyWindow((err) => { if (err.code) { console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err)); return; -- GitLab