HarmonyOS 鸿蒙Next中父容器可以显示占满整个手机屏幕，但是两个子容器高度加起来是100%，但是底部还有点位置没有被占满

HarmonyOS 鸿蒙Next中父容器可以显示占满整个手机屏幕，但是两个子容器高度加起来是100%，但是底部还有点位置没有被占满 【问题描述】：父容器可以显示占满整个手机屏幕，但是两个子容器高度加起来是100%，但是底部还有点位置没有被占满 分割尺寸不平均

【问题现象】：附下方图片

【版本信息】：evEco Studio 6.0.0 Release

【复现代码】：下方图片

cke_369.png

cke_9328.png


更多关于HarmonyOS 鸿蒙Next中父容器可以显示占满整个手机屏幕，但是两个子容器高度加起来是100%，但是底部还有点位置没有被占满的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

expandSafeArea : 控制组件扩展其安全区域
可以设置沉浸式解决此问题

onWindowStageCreate(windowStage: window.WindowStage): void {

        // 非 2in1 模式下开启 沉浸式导航

        if (deviceInfo.deviceType != '2in1') {

            // 开启全屏

            const win = windowStage.getMainWindowSync()

            win.setWindowLayoutFullScreen(true)

            // 获取规避区域

            const top = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM).topRect

            AppStorage.setOrCreate<number>('safeTop', px2vp(top.height))

            const bottom = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR).bottomRect

            AppStorage.setOrCreate<number>('safeBottom', px2vp(bottom.height))

        }

        //

        // Main window is created, set main page for this ability

        hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

        windowStage.loadContent('/pages/LoginPage'.slice(1), (err) => {

            if (err.code) {

                hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));

                return;

            }

            hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');

        });

    }

cke_2784.png

更多关于HarmonyOS 鸿蒙Next中父容器可以显示占满整个手机屏幕，但是两个子容器高度加起来是100%，但是底部还有点位置没有被占满的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，父容器默认使用Flex布局。子容器高度总和设为100%时，若底部仍有空隙，通常是由于系统默认的flex-direction为column且justify-content默认为flex-start导致的。未占满的空间会保留在容器底部。可通过设置父容器的justify-content属性为space-between使子元素均匀分布，或调整子元素flex-grow属性填充剩余空间。检查子容器是否包含margin或padding值，这些也会影响实际占位。

在HarmonyOS Next中，父容器占满屏幕但子容器高度总和设为100%时底部仍有空隙，通常是由于系统默认的边距或子容器尺寸计算方式导致的。建议检查以下几点：

  1. 父容器属性：确保父容器设置为matchParent或100%，并清除默认的内边距（padding）和外边距（margin）。
  2. 子容器高度分配：如果使用百分比布局，确认两个子容器的高度总和不超过100%，且没有额外的间隔属性。可以尝试使用flex布局，设置flexGrow属性让子容器自动填充剩余空间。
  3. 系统栏占用：考虑状态栏或导航栏可能占用部分空间，使用windowAvoidArea API获取安全区域，并调整布局以避免重叠。
  4. 单位一致性：确保所有尺寸单位统一（如vp或%），避免混合使用导致计算误差。

通过调整布局属性和检查容器约束，可以解决底部未占满的问题。

回到顶部