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

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

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

             Microsoft.Maui.Handlers.LayoutHandler.Mapper.AppendToMapping("Custom", (h, v) =>
             {
                 if (v is Layout layout)
                 {
                     layout.IgnoreSafeArea = true;
                 }
             });
    

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

  1. 继续深入研究,用以下代码设置刘海屏上边距

     protected override void OnAppearing()
     {
         base.OnAppearing();
         if (withSafeArea)
         {
             var safeInsets = On<iOS>().SafeAreaInsets();
                 On<iOS>().SetUseSafeArea(false);
                 safeInsets.Top = 35;
                 Padding = safeInsets;
         } 
     }
    

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

  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) =>
             {
                 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;
         } 
     }
    

    }

  2. 题外话,网页可加上 viewport-fit=cover 效果更好

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

相关推荐
取址执行5 小时前
Redis发布订阅
java·redis·bootstrap
Edward-tan1 天前
【玩转全栈】----Django制作部门管理页面
前端·后端·python·django·bootstrap
代码欢乐豆4 天前
Redis的部署和操作
前端·redis·bootstrap
纵横驰骋的小野马4 天前
Redis延迟队列详解
java·前端·bootstrap
珹洺5 天前
音乐播放器实现:前端HTML,CSS,JavaScript综合大项目
开发语言·前端·javascript·css·gitee·bootstrap·html
跳跳的向阳花7 天前
02、Redis从入门到放弃 之 常用命令和基本数据类型操作
redis·bootstrap
轩辰~7 天前
Redis——5种数据类型的底层数据结构
redis·git·架构·bootstrap·github
pzx_0019 天前
【论文阅读】基于空间相关性与Stacking集成学习的风电功率预测方法
论文阅读·人工智能·算法·机器学习·bootstrap·集成学习
阿雄不会写代码9 天前
如何在后端使用redis进行缓存,任意一种语言都可以
redis·缓存·bootstrap
C1829818257511 天前
Gateway怎么实现限流的
前端·bootstrap·gateway