问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

HarmonyOS Next如何进行沉浸模式下顶部窗口控制条避让适配？

头像头饰
轻口味
    39k579446
    HarmonyOSharmonyos-next
    阅读 564
    avatarAI BotBETA

    在HarmonyOS Next中，进行沉浸模式下顶部窗口控制条避让适配，可以通过以下方式实现：

    使用窗口的避让能力

    1. 设置沉浸式布局：

      通过setWindowLayoutFullScreen方法设置窗口布局是否为沉浸式布局。沉浸式布局下，应用布局不避让状态栏、导航栏以及智慧多窗顶部横条，可能导致组件与顶部横条重叠，引发文字遮挡、点击事件冲突等问题。若需避免此类问题，可设置isLayoutFullScreen值为false，使窗口布局为非沉浸式布局。

    2. 获取并避让顶部控制条区域：

      当应用不使用窗口避让能力（即设置窗口为沉浸式布局）时，可通过getWindowAvoidArea接口获取屏幕顶部需要规避的矩阵区域（topRect），然后应用可对应做布局避让。同时，可通过监听avoidAreaChange事件来动态调整布局，以适应系统规避区域的变化。

    示例代码

    以下是一个简单的示例代码，展示了如何获取窗口并设置沉浸式布局，以及获取避让区域：

    import { BusinessError } from '@kit.BasicServicesKit';
import { window } from '@kit.ArkUI';

@Entry
@Component
struct Index {
    @State message: string = '非沉浸式布局';
    private windowClass: window.Window | undefined = undefined;

    aboutToAppear(): void {
        try {
            window.getLastWindow(getContext(this), (err: BusinessError, data) => {
                const errCode: number = err.code;
                if (errCode) {
                    console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
                    return;
                }
                this.windowClass = data;
                console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));

                // 设置沉浸式布局（如需非沉浸式布局，可设置为false）
                this.windowClass.setWindowLayoutFullScreen(true, (err: BusinessError) => {
                    const errCode: number = err.code;
                    if (errCode) {
                        console.error('Failed to set the window layout to full-screen mode. Cause: ' + JSON.stringify(err));
                        return;
                    }
                    console.info('Succeeded in setting the window layout to full-screen mode.');
                });

                // 获取并打印避让区域
                const topAvoidArea = this.windowClass.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM);
                console.info('Top avoid area: ' + JSON.stringify(topAvoidArea));
            });
        } catch (exception) {
            console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
        }
    }

    // 其他页面布局和逻辑...
}

    注意事项

    • 在设置沉浸式布局时，需考虑组件与顶部控制条的重叠问题，并采取相应的避让措施。
    • 获取避让区域时，应注意处理可能的异常情况，并确保获取的避让区域数据正确无误。
    • 根据实际需求，动态调整页面布局以适应系统规避区域的变化。

    通过以上方式，HarmonyOS Next应用可在沉浸模式下实现顶部窗口控制条的避让适配。

    1 个回答
    得票最新
    头像
    凡事提前
      4k1212

      顶部横条的避让可通过以下两种方式适配，具体可以参考顶部窗口控制条避让适配智慧多窗。

      • 使用窗口的避让能力：通过setWindowLayoutFullScreen设置窗口布局是否为沉浸式布局。根据业务需要，可以先通过on('windowStatusChange')方法监听窗口模式变化，当窗口模式为全屏的时候，设置setWindowLayoutFullScreen为false，当窗口模式为非全屏的时候（包括分屏和悬浮窗）设置为true。
      • 应用主动避让：应用不使用窗口避让能力（即设置窗口为沉浸式布局），还通过getWindowAvoidArea接口可获取屏幕顶部需要规避的矩阵区域topRect，获取到该值后应用可对应做布局避让。同时可通过on('avoidAreaChange')监听系统规避区域变化以进行布局的动态调整。

      本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题