.NET MAUI Blazor iOS端底部导航栏无法固定到底部的问题求助

这个问题是iOS安全区机制和MAUI Blazor初始渲染时的布局计算延迟导致的——启动时WebView未正确获取屏幕安全区高度，旋转触发重算后才恢复正常。以下是几个有效解决方法：

方法1：适配iOS安全区并强制初始布局 #

修改导航栏CSS，结合iOS安全区变量，同时添加触发GPU加速的属性强制正确渲染：

.fixed-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  /* 适配iOS底部安全区，直接贴底 */
  bottom: env(safe-area-inset-bottom);
  /* 强制GPU加速，触发正确布局计算 */
  transform: translateZ(0);
  /* 移除Bootstrap默认边距 */
  margin: 0;
}

同时确保wwwroot/index.html里的视口标签设置为viewport-fit=cover，让页面内容覆盖整个屏幕：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

方法2：初始化时触发窗口重绘 #

如果方法1效果不佳，在导航栏组件初始化后手动触发一次窗口resize事件，强制iOS重新计算布局：

在NavMenu.razor中添加：

@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 触发resize事件，让iOS重新计算底部安全区
            await JSRuntime.InvokeVoidAsync("window.dispatchEvent", new Event("resize"));
        }
    }
}

方法3：改用MAUI原生底部导航（可选） #

如果Blazor的HTML/CSS方案始终有兼容性问题，可以切换到MAUI原生的TabBar组件，在MainPage.xaml中配置，彻底适配iOS安全区和布局：

<TabBar>
    <ShellContent Title="首页" ContentTemplate="{DataTemplate local:Index}" />
    <ShellContent Title="搜索" ContentTemplate="{DataTemplate local:Search}" />
    <ShellContent Title="发布" ContentTemplate="{DataTemplate local:Post}" />
    <ShellContent Title="学习" ContentTemplate="{DataTemplate local:Learn}" />
    <ShellContent Title="收藏" ContentTemplate="{DataTemplate local:Book}" />
</TabBar>

这种方式完全规避WebView渲染带来的布局问题，原生体验更稳定。

内容的提问来源于stack exchange，提问作者Andrew Burton