asp.net .NET MAUI Blazor无法呈现iOS的显示器底部

ntjbwcob  于 2022-11-19  发布在  .NET
关注(0)|答案(1)|浏览(228)

我在使用. NETMAUIBlazor项目时遇到了一些困难,我不是很熟悉这个平台。有问题的应用程序是从visual studio中项目设置时创建的模板演示应用程序创建的。(我只是测试这个代码片段,看看在将它添加到项目的其余部分之前,是否可以让它独立工作)。我遇到的问题似乎只有在iOS设备上运行应用程序时才会持续存在(在Windows上,任务栏位于屏幕底部,Android和MacCatalyst)。我正在尝试创建一个固定在显示器底部的任务栏。启动后,任务栏与底部有一定距离,我无法“t似乎覆盖了这一点,使它实际上在底部。由于某种未知的原因,任务栏确实跳到底部的显示后,你旋转设备90度和回来。该项目是从模板不变,除了以下代码片段粘贴到NavMenu.剃刀文件:

<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上),因为我理解它应该做的。我也尝试过把这个片段直接放在MainLayout.razor中它自己的div中,并手动分配CSS属性,效果很小。我熟悉iOS中安全区域的概念,但我一直无法找到这个问题的有效解决方案。
是否有一些我不知道的属性允许您正确地将某些内容分配到屏幕底部?
我已经尝试使用CSS来设计组件的样式:

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

效果很小。我还查看了webkit安全区域,默认项目使用安全区域来防止渲染屏幕顶部的时钟等东西,但我没有看到任何类似的属性会导致底部出现这种情况。

dfuffjeb

dfuffjeb1#

这个距离似乎是由于iOS中的safearea造成的。您可以为iOS平台设置safearea。在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">

这减少了与底部的大部分距离。
希望我的回答能对你有所帮助。

相关问题