.NET MAUI Blazor 不为 iOS 呈现显示底部答案

【问题标题】：.NET MAUI Blazor not rendering bottom of display for iOS.NET MAUI Blazor 不为 iOS 呈现显示底部
【发布时间】：2022-11-01 14:54:46
【问题描述】：

我在使用 .NET MAUI Blazor 项目时遇到了一些困难，我对该平台不是很熟悉。有问题的应用程序是从在 Visual Studio 中设置项目时创建的模板演示应用程序创建的。（我只是在测试这个 sn-p，看看我是否可以在将它添加到我的项目的其余部分之前让它独立工作）。在 iOS 设备上运行应用程序时，我遇到的问题似乎仍然存在（任务栏位于 Windows、Android 和 MacCatalyst 的屏幕底部）。我正在尝试创建一个固定在显示屏底部的任务栏。启动后，任务栏离底部有一段距离，我似乎无法覆盖它以使其实际上位于底部。由于某些未知原因，在您将设备旋转 90 度并返回后，任务栏确实会跳到显示屏的底部。除了粘贴到 NavMenu.razor 文件中的以下代码 sn-p 之外，该项目与模板没有任何变化：

<nav class="navbar navbar-expand fixed-bottom" style="background-color: beige">
    <div class="container-fluid">
        <div class="nav-item d-inline-flex">
            <NavLink class="nav-link text-center" href="/">
                <span class="oi oi-home"></span>
            </NavLink>
        </div>
        <div class="nav-item d-inline-flex">
            <NavLink class="nav-link text-center" href="search">
                <span class="oi oi-magnifying-glass"></span>
            </NavLink>
        </div>
        <div class="nav-item d-inline-flex">
            <NavLink class="nav-link text-center" href="post">
                <span class="oi oi-plus"></span>
            </NavLink>
        </div>
        <div class="nav-item d-inline-flex">
            <NavLink class="nav-link text-center" href="learn">
                <span class="oi oi-bolt"></span>
            </NavLink>
        </div>
        <div class="nav-item d-inline-flex">
            <NavLink class="nav-link text-center" href="book">
                <span class="oi oi-book"></span>
            </NavLink>
        </div>
    </div>
</nav>

该项目正在使用 Bootstrap 5。据我所知，fixed-bottom 标记似乎没有做任何事情（在 iOS 上）。我也试过把这个 sn-p 直接放在 MainLayout.razor 自己的 div 中，并手动分配 CSS 属性，效果不大。我熟悉 iOS 中安全区域的概念，但我无法找到解决此问题的有效解决方案。

是否有一些我不知道的属性可以让您正确地将某些内容分配到屏幕底部？

我尝试使用 CSS 来设置组件的样式：

.mynav {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

影响不大。我还查看了 webkit 安全区域，默认项目使用安全区域来防止在屏幕顶部渲染时钟等内容，但我没有看到任何类似的属性导致底部出现这种情况。

【问题讨论】：

标签： css ios asp.net maui-blazor

【解决方案1】：

似乎距离是由于 iOS 中的安全区域。您可以为 iOS 平台设置安全区域。在 MainPage.xaml 中添加以下代码：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             ....
             BackgroundColor="{DynamicResource PageBackgroundColor}"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="True">

这减少了与底部的距离。

希望我的回答能帮到你。

【讨论】：