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

最新推荐文章于 2025-11-06 09:58:28 发布

原创

最新推荐文章于 2025-11-06 09:58:28 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

文章讲述了开发者在使用MauiBlazor技术开发应用时遇到的SafeArea布局问题，包括默认设置失效、网页穿透以及如何通过检查设备类型动态设置上边距以适应刘海屏和非刘海屏设备。同时提到了viewport-fit=cover对网页布局的优化建议。

需求，新做了个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;
        } 
    }

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