需求，新做了个app， 使用的是maui blazor技术，里面用了渐变背景，在默认启用SafeArea情况下，底部背景很突兀
- 由于现版本maui在SafeArea有点bug，官方教程的<ContentPage SafeArea=false不生效，于是要用以下代码hack一下
Microsoft.Maui.Handlers.LayoutHandler.Mapper.AppendToMapping("Custom", (h, v) =>{if (v is Layout layout){layout.IgnoreSafeArea = true;}});
带来的问题是，网页上下穿透了。
- 继续深入研究，用以下代码设置刘海屏上边距
protected override void OnAppearing(){base.OnAppearing();if (withSafeArea){var safeInsets = On<iOS>().SafeAreaInsets();On<iOS>().SetUseSafeArea(false);safeInsets.Top = 35;Padding = safeInsets;} }
存在的问题是，非刘海屏设备也设置了上边距
- 最终代码，检查设备类型，按需配置上边距
using Microsoft.Maui.Controls.PlatformConfiguration;
using Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;namespace MyApp.Maui;public partial class MainPage : ContentPage
{bool withSafeArea = false;public MainPage(){InitializeComponent();if (DeviceInfo.Current.Idiom == DeviceIdiom.Phone){var screenSize = DeviceDisplay.MainDisplayInfo;if (screenSize.Height / screenSize.Density >= 812.0f){withSafeArea = true;}}if (withSafeArea) { Microsoft.Maui.Handlers.LayoutHandler.Mapper.AppendToMapping("Custom", (h, v) =>{if (v is Layout layout){layout.IgnoreSafeArea = true;}});}}protected override void OnAppearing(){base.OnAppearing();if (withSafeArea){var safeInsets = On<iOS>().SafeAreaInsets();On<iOS>().SetUseSafeArea(false);safeInsets.Top = 35;Padding = safeInsets;} }
}
- 题外话，网页可加上 viewport-fit=cover 效果更好
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
