HarmonyOS 鸿蒙Next让组件沉浸式显示可以显示到底部导航条中

HarmonyOS 鸿蒙Next让组件沉浸式显示可以显示到底部导航条中 这个是我的页面的样式，我给总体外组件设置了

cke_134.png

.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM, SafeAreaEdge.BOTTOM])

这个属性，就是绿色区域的，他已经覆盖了下面的底部导航条，但是，怎么让这个蓝色的区域也下去啊，这个怎么弄呀


更多关于HarmonyOS 鸿蒙Next让组件沉浸式显示可以显示到底部导航条中的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

绿色区域是你首页底部的内容，你把高度减小，就可以将蓝色内容下沉了。或者设置首页scroll，让其滚动起来。

更多关于HarmonyOS 鸿蒙Next让组件沉浸式显示可以显示到底部导航条中的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


只能一个Row在里面吧 绿色的已经在里面了

在HarmonyOS鸿蒙Next中，实现组件沉浸式显示到底部导航条的功能可以通过UIAbility和Window的相关API来实现。首先，通过UIAbility获取当前窗口的Window对象，然后调用Window的setLayoutFullScreen方法将窗口设置为全屏模式。接着，使用Window的setSystemBarProperties方法调整系统栏（包括底部导航条）的属性，使其与应用程序的UI进行融合。最后，通过调整组件的布局参数，确保组件能够延伸到系统栏区域，从而实现沉浸式显示效果。具体代码示例如下：

import UIAbility from '@ohos.app.ability.UIAbility';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility {
    onCreate(want, launchParam) {
        let windowClass = null;
        window.getLastWindow(this.context, (err, data) => {
            if (err) {
                console.error('Failed to obtain the window. Cause: ' + JSON.stringify(err));
                return;
            }
            windowClass = data;
            // 设置窗口为全屏模式
            windowClass.setLayoutFullScreen(true, (err) => {
                if (err) {
                    console.error('Failed to set the window to full-screen mode. Cause:' + JSON.stringify(err));
                    return;
                }
                // 设置系统栏属性
                windowClass.setSystemBarProperties({
                    navigationBarColor: '#00000000', // 设置导航栏透明
                    navigationBarContentColor: '#FFFFFFFF' // 设置导航栏内容颜色为白色
                }, (err) => {
                    if (err) {
                        console.error('Failed to set the system bar properties. Cause:' + JSON.stringify(err));
                        return;
                    }
                });
            });
        });
    }
}

通过上述代码，可以实现组件沉浸式显示到底部导航条中的效果。

回到顶部