未验证 提交 f8e9f407 编写于 作者: 葛亚芳 提交者: Gitee

update zh-cn/application-dev/windowmanager/application-window-stage.md.

Signed-off-by: N葛亚芳 <geyafang@huawei.com>
上级 1eb781f3
......@@ -34,25 +34,24 @@
| WindowStage | getMainWindow(callback: AsyncCallback&lt;Window&gt;): void | 获取`WindowStage`实例下的主窗口。<br/>此接口仅可在`Stage`模型下使用。 |
| WindowStage | loadContent(path: string, callback: AsyncCallback&lt;void&gt;): void | 为当前`WindowStage`的主窗口加载具体页面。<br/>此接口仅可在`Stage`模型下使用。 |
| WindowStage | createSubWindow(name: string, callback: AsyncCallback&lt;Window&gt;): void | 创建子窗口。<br/>此接口仅可在`Stage`模型下使用。 |
| window静态方法 | create(ctx: Context, id: string, type: WindowType, callback: AsyncCallback&lt;Window&gt;): void | 创建子窗口。<br/>-`ctx`:为应用上下文信息。<br/>-`type`:为创建的窗口类型。 |
| Window | loadContent(path: string, callback: AsyncCallback&lt;void&gt;): void | 为当前窗口加载具体页面。 |
| Window | setBackgroundColor(color: string, callback: AsyncCallback&lt;void&gt;): void | 设置窗口的背景色。 |
| Window | setBrightness(brightness: number, callback: AsyncCallback&lt;void&gt;): void | 设置屏幕亮度值。 |
| Window | setTouchable(isTouchable: boolean, callback: AsyncCallback&lt;void&gt;): void | 设置窗口是否为可触状态。 |
| Window | moveTo(x: number, y: number, callback: AsyncCallback&lt;void&gt;): void | 移动当前窗口位置。 |
| Window | resetSize(width: number, height: number, callback: AsyncCallback&lt;void&gt;): void | 改变当前窗口大小。 |
| Window | setFullScreen(isFullScreen: boolean, callback: AsyncCallback&lt;void&gt;): void | 设置窗口是否全屏显示。 |
| Window | setLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback&lt;void&gt;): void | 设置窗口布局是否为全屏布局。 |
| Window | setSystemBarEnable(names: Array&lt;'status'\|'navigation'&gt;): Promise&lt;void&gt; | 设置导航栏、状态栏是否显示。 |
| Window | setSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback&lt;void&gt;): void | 设置窗口内导航栏、状态栏属性。<br/>`systemBarProperties`:导航栏、状态栏的属性集合。 |
| Window | show(callback: AsyncCallback\<void>): void | 显示当前窗口。 |
| window静态方法 | createWindow(config: Configuration, callback: AsyncCallback<Window>): void | 创建系统窗口。<br/>-`config`:创建窗口时的参数。 |
| Window | setUIContent(path: string, callback: AsyncCallback&lt;void&gt;): void | 为当前窗口加载具体页面。 |
| Window | setWindowBackgroundColor(color: string, callback: AsyncCallback&lt;void&gt;): void | 设置窗口的背景色。 |
| Window | setWindowBrightness(brightness: number, callback: AsyncCallback&lt;void&gt;): void | 设置屏幕亮度值。 |
| Window | setWindowTouchable(isTouchable: boolean, callback: AsyncCallback&lt;void&gt;): void | 设置窗口是否为可触状态。 |
| Window | moveWindowTo(x: number, y: number, callback: AsyncCallback&lt;void&gt;): void | 移动当前窗口位置。 |
| Window | resize(width: number, height: number, callback: AsyncCallback&lt;void&gt;): void | 改变当前窗口大小。 |
| Window | setWindowLayoutFullScreen(isLayoutFullScreen: boolean, callback: AsyncCallback&lt;void&gt;): void | 设置窗口布局是否为全屏布局。 |
| Window | setWindowSystemBarEnable(names: Array&lt;'status'\|'navigation'&gt;): Promise&lt;void&gt; | 设置导航栏、状态栏是否显示。 |
| Window | setWindowSystemBarProperties(systemBarProperties: SystemBarProperties, callback: AsyncCallback&lt;void&gt;): void | 设置窗口内导航栏、状态栏属性。<br/>`systemBarProperties`:导航栏、状态栏的属性集合。 |
| Window | showWindow(callback: AsyncCallback\<void>): void | 显示当前窗口。 |
| Window | on(type: 'touchOutside', callback: Callback&lt;void&gt;): void | 开启本窗口区域外的点击事件的监听。 |
| Window | destroy(callback: AsyncCallback&lt;void&gt;): void | 销毁当前窗口。 |
| Window | destroyWindow(callback: AsyncCallback&lt;void&gt;): 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;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册