6***@qq.com
6***@qq.com
  • 发布:2026-07-31 11:15
  • 更新:2026-07-31 11:43
  • 阅读:100

【报Bug】小米15pro所有页面底部都会有留白,在其他安卓机型没有这种情况

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 26.2

HBuilderX类型: 正式

HBuilderX版本号: 5.15

手机系统: Android

手机系统版本号: Android 15

手机厂商: 小米

手机机型: 小米15pro

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://m.malink.cn/s/UvUJbi

示例代码:

app-plus配置如下,targetSdkVersion为35:

"app-plus" : {      
        "usingComponents" : true,      
        "nvueStyleCompiler" : "uni-app",      
        "compilerVersion" : 3,      
        "safearea" : {      
            "background" : "#fff7ed",      
            "bottom" : {      
                "offset" : "none"      
            }      
        },      
        "distribute" : {      
            "android" : {      
                "packagename" : "...",      
                "permissions" : [...],      
                "abiFilters" : [ "arm64-v8a" ],      
                "targetSdkVersion" : 35    
            }           
        }      
    }

首页相关代码,页面也都使用了env(safe-area-inset-bottom) 来处理安全区:

<view class="content">      
        <image class="logo" src="/static/logo.png"></image>      
        <view class="text-area">      
            <text class="title">{{title}}</text>      
        </view>      
    </view>      
</template>      

<script>      
    export default {      
        data() {      
            return {      
                title: 'Hello'      
            }      
        },      
        onLoad() {      

        },      
        methods: {      

        }      
    }      
</script>      

<style>      
    .content {      
        height: 100%;      
        display: flex;      
        flex-direction: column;      
        align-items: center;      
        justify-content: center;      
        background-color: aquamarine;      
        box-sizing: border-box;      
        padding-bottom: constant(safe-area-inset-bottom);      
        padding-bottom: env(safe-area-inset-bottom);      
    }      

    .logo {      
        height: 200rpx;      
        width: 200rpx;      
        margin-top: 200rpx;      
        margin-left: auto;      
        margin-right: auto;      
        margin-bottom: 50rpx;      
    }      

    .text-area {      
        display: flex;      
        justify-content: center;      
    }      

    .title {      
        font-size: 36rpx;      
        color: #8f8f94;      
    }      
</style>

操作步骤:

进入demo的app首页

预期结果:

底部无留白

实际结果:

底部有留白

bug描述:

小米15pro页面进去底部会有留白,在附件中已提供图片和最小demo示例,小米15pro进去首页就会有这个情况,注意使用的是系统手势导航时出现,没有使用经典三键导航。

2026-07-31 11:15 负责人:无 分享
已邀请:
Ask小助手

Ask小助手

欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。

感谢您的反馈。针对您提交的 Bug,我们进行了评审分析,具体如下:

1. Bug 反馈内容完整性评审

  • Bug 描述:描述非常清晰,明确指出了问题出现的特定机型(小米15 Pro)、系统版本(Android 15)、触发条件(系统手势导航),以及在其他机型无此现象的对比情况。
  • 代码示例:提供了 manifest.json 中的 app-plus 配置和首页的 .vue 代码。代码具备参考性,但 manifest.json 示例不够完整(缺少外层结构),且未提供 pages.json 中的页面配置。这可能导致官方人员需要手动补全代码才能运行复现。
  • 复现步骤:复现步骤为“进入demo的app首页”,结合提供的代码和机型说明,步骤是能够走通的。
  • 预期与实际结果:预期结果(底部无留白)和实际结果(底部有留白)描述合理,符合常规 UI 适配预期。
  • 分类信息:包含了 PC 环境、HBuilderX 版本、手机 OS、厂商机型、Vue 版本等,信息完整。

2. Bug 是否成立及原因分析

根据知识库中的历史发版记录,该 Bug 现象成立,且其根本原因在于 targetSdkVersion 配置与 Android 15 系统特性的适配问题。

在 Android 15 中,启用了默认的全屏边缘到边缘(Edge-to-edge)模式。当应用的 targetSdkVersion 设置为 35 时,系统会默认将页面内容绘制在整个屏幕上,包括系统手势导航栏的背后。如果应用本身没有正确处理这块区域的避让,就会导致页面底部内容被系统手势条遮挡,或者在视觉上产生留白。

根据官方发版说明,HBuilderX 在 4.44.2024123110 正式版及 4.41.2024121203-alpha 版本中,已针对此问题进行了修复:

“修复 配置 targetSdkVersion 为 35 后在安卓15设备页面底部内容可能会被系统按键导航栏盖住的Bug”

3. 处理建议

由于您当前使用的 HBuilderX 正式版版本号为 5.15,理论上已经包含了上述针对 targetSdkVersion 35 的底层修复逻辑。出现该问题可能是由于项目编译缓存或基座未更新导致。

建议您按以下步骤进行排查和处理:

  1. 清理项目缓存并重新编译:在 HBuilderX 中清除项目编译缓存,重新运行项目以确保最新的底层修复逻辑生效。
  2. 更新自定义基座:如果您使用的是自定义基座,请务必删除手机上的旧版自定义基座,重新使用最新的 HBuilderX 打包并安装自定义基座进行测试。
  3. 检查页面样式配置:确保在 pages.json 中正确配置了页面的 navigationStyle 等属性,并且页面内 CSS 的 env(safe-area-inset-bottom) 生效。根据官方全面屏适配指南,当 manifest.json 中配置了 "safearea": {"bottom": {"offset": "none"}} 时,框架不会进行原生占位,需要开发者自行在页面样式中使用 padding-bottom: env(safe-area-inset-bottom); 进行底部安全区避让。

如果上述步骤操作后问题仍然存在,请补充完整的 pages.json 配置信息及可复现的完整最小化工程,以便我们进一步排查。

内容为 AI 生成,仅供参考
6***@qq.com

6***@qq.com (作者)

按照上述步骤操作后问题仍然存在,在下方附件中已提供最小demo示例,请进一步排查

要回复问题请先登录注册