我在使用 .NET MAUI Blazor 專案時遇到了一些困難，我對該平臺不是很熟悉。有問題的應用程式是從在 Visual Studio 中設定專案時創建的模板演示應用程式創建的。（我只是在測驗這個片段，看看我是否可以在將它添加到我的專案的其余部分之前讓它獨立作業）。在 iOS 設備上運行應用程式時，我遇到的問題似乎仍然存在（任務欄位于 Windows、Android 和 MacCatalyst 的螢屏底部）。我正在嘗試創建一個固定在顯示屏底部的任務欄。啟動后，任務欄離底部有一段距離，我似乎無法覆寫它以使其實際上位于底部。由于某些未知原因，在您將設備旋轉 90 度并回傳后，任務欄確實會跳到顯示屏的底部。
<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 安全區域，默認專案使用安全區域來防止在螢屏頂部渲染時鐘等內容，但我沒有看到任何類似的屬性導致底部出現這種情況。
uj5u.com熱心網友回復：
似乎距離是由于 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">
這減少了與底部的距離。
希望我的回答能幫到你。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/525087.html
標籤：cssIOS网毛伊布雷泽
上一篇：找到陣列的主要元素