啊鸭鸭
啊鸭鸭
  • 发布:2026-10-17 15:10
  • 更新:2026-10-17 15:14
  • 阅读:24

【报Bug】iOS 蒸汽模式下,点击 Toast 提示框导致页面安全区失效,提示消失后恢复

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

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

HBuilderX类型: 正式

HBuilderX版本号: 5.31

手机系统: iOS

手机系统版本号: iOS 26

手机厂商: 苹果

手机机型: iPhone 12 pro

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
  <view class="toast-layout-page">  
    <uni-nav-bar title="Toast 点击位移测试" navigationBarTextStyle="white" class="test-navbar" />  
    <scroll-view class="test-scroll" direction="vertical">  
      <view class="test-content">  
        <text class="test-heading">观察导航栏与底部按钮</text>  
        <text class="test-description">先点击按钮显示提示,再用手点击黑色提示框。观察导航栏是否上移、底部按钮是否下移,以及提示消失后是否恢复。</text>  
        <text class="test-description">本页直接调用 uni.showToast,自定义导航使用官方 uni-nav-bar,底栏使用动态底部安全区留白。</text>  
        <button class="test-button" @click="showPageToast">普通 Toast(不传 position)</button>  
        <!-- #ifdef APP -->  
        <button class="test-button" @click="showApplicationToast">Toast(position: center)</button>  
        <!-- #endif -->  
        <text class="test-marker">内容位置参照线</text>  
      </view>  
    </scroll-view>  
    <view class="test-footer">  
      <button class="test-save" @click="showPageToast">底部按钮:显示普通 Toast</button>  
    </view>  
  </view>  
</template>  

<script setup lang="ts">  
  // #region 原生 Toast 对照  
  function showPageToast(): void {  
    uni.showToast({ title: '请手动点击此提示框', icon: 'none', duration: 3000, mask: false })  
  }  

  // #ifdef APP  
  function showApplicationToast(): void {  
    uni.showToast({ title: '请手动点击此提示框', icon: 'none', duration: 3000, mask: false, position: 'center' })  
  }  
  // #endif  
  // #endregion  
</script>  

<style>  
  .toast-layout-page { flex: 1; background-color: #f5f5f5; }  
  .test-navbar { flex-shrink: 0; background-color: #55b983; }  
  .test-scroll { flex: 1; }  
  .test-content { padding: 24px; padding-bottom: 180px; }  
  .test-heading { font-size: 20px; line-height: 30px; color: #222222; font-weight: bold; }  
  .test-description { margin-top: 16px; font-size: 16px; line-height: 26px; color: #555555; }  
  .test-button { margin-top: 24px; font-size: 16px; color: #333333; }  
  .test-marker { margin-top: 32px; padding-top: 16px; border-top: 2px solid #ee5555; font-size: 16px; color: #aa3333; }  
  .test-footer { position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom); background-color: #ffffff; }  
  .test-save { height: 56px; line-height: 56px; margin: 0; border-radius: 0; background-color: #55b983; color: #ffffff; font-size: 17px; }  
</style>

操作步骤:
  1. 页面设置 navigationStyle: "custom"、disableScroll: true。
  2. 顶部使用官方 uni-nav-bar,通过 var(--status-bar-height) 避让状态栏。
  3. 底部放置固定按钮,通过 env(safe-area-inset-bottom) 避让底部安全区。
  4. 调用 uni.showToast 显示纯文字提示。
  5. 提示显示期间,手动点击黑色 Toast 提示框。

uni.showToast({
title: '请手动点击此提示框',
icon: 'none',
duration: 3000,
mask: false
})

预期结果:

点击 Toast 提示框不应改变底层页面的状态栏占位、底部安全区或布局位置。

实际结果:
  • Toast 刚显示时,页面布局正常。
  • 手动点击 Toast 提示框后,出现安全区占位失效的现象:
    • 自定义导航栏及内容向上移动,导航标题与系统状态栏重叠。
    • 底部固定按钮向下移动,底部安全区留白消失。
  • Toast 消失后,页面恢复正常。
  • 不点击 Toast 提示框时,没有观察到位移。

bug描述:

  • HBuilderV-Alpha 版本: 5.31.2026100911-alpha VS Code: 1.129.0-alpha
  • 平台:iOS 真机、自定义运行基座
  • 模式:uni-app x 蒸汽模式
  • 业务项目及本地 hello uni-app x 示例项目均可复现

iOS 蒸汽模式下,点击 Toast 提示框导致页面安全区失效,提示消失后恢复

2026-10-17 15:10 负责人:无 分享
已邀请:
啊鸭鸭

啊鸭鸭 (作者)

为什么提bug还不能选 uniappx 也不能选 HBuilderV

要回复问题请先登录或注册