Maui blazor ios 按设备类型设置是否启用safeArea

需求，新做了个app， 使用的是maui blazor技术，里面用了渐变背景，在默认启用SafeArea情况下，底部背景很突兀

• 由于现版本maui在SafeArea有点bug，官方教程的<ContentPage SafeArea=false不生效，于是要用以下代码hack一下
  

1.             Microsoft.Maui.Handlers.LayoutHandler.Mapper.AppendToMapping("Custom", (h, v) =>
2.             {
3.                 if (v is Layout layout)
4.                 {
5.                     layout.IgnoreSafeArea = true;
6.                 }
7.             });

复制代码

带来的问题是，网页上下穿透了。

• 继续深入研究，用以下代码设置刘海屏上边距
  

1.     protected override void OnAppearing()
2.     {
3.         base.OnAppearing();
4.         if (withSafeArea)
5.         {
6.             var safeInsets = On<iOS>().SafeAreaInsets();
7.                 On<iOS>().SetUseSafeArea(false);
8.                 safeInsets.Top = 35;
9.                 Padding = safeInsets;
10.         }
11.     }

复制代码

存在的问题是，非刘海屏设备也设置了上边距

• 最终代码，检查设备类型，按需配置上边距
  

1. 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) =>
2.             {
3.                 if (v is Layout layout)
4.                 {
5.                     layout.IgnoreSafeArea = true;
6.                 }
7.             });
8.         }    }    protected override void OnAppearing()
9.     {
10.         base.OnAppearing();
11.         if (withSafeArea)
12.         {
13.             var safeInsets = On<iOS>().SafeAreaInsets();
14.                 On<iOS>().SetUseSafeArea(false);
15.                 safeInsets.Top = 35;
16.                 Padding = safeInsets;
17.         }
18.     }
19. }

复制代码

• 题外话，网页可加上 viewport-fit=cover 效果更好
  

1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。