自己做网站服务器,装饰装修网站建设方案,苏州有名的设计公司,重庆app推广公司需求#xff0c;新做了个app#xff0c; 使用的是maui blazor技术#xff0c;里面用了渐变背景#xff0c;在默认启用SafeArea情况下#xff0c;底部背景很突兀 由于现版本maui在SafeArea有点bug#xff0c;官方教程的ContentPage SafeAreafalse不生效#xff0c;于…需求新做了个app 使用的是maui blazor技术里面用了渐变背景在默认启用SafeArea情况下底部背景很突兀 由于现版本maui在SafeArea有点bug官方教程的ContentPage SafeAreafalse不生效于是要用以下代码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 OniOS().SafeAreaInsets();OniOS().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 OniOS().SafeAreaInsets();OniOS().SetUseSafeArea(false);safeInsets.Top 35;Padding safeInsets;} }
}题外话网页可加上 viewport-fitcover 效果更好
meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno, viewport-fitcover /
