MAUI移动端启动屏缩放异常求助及自定义XAML启动屏咨询

一、启动屏两侧裁剪问题修复 #

1. 修正BaseSize配置 #

你的图片实际尺寸为482×482，但BaseSize设置为512,512，MAUI会以BaseSize为基准计算缩放比例，导致图片被错误拉伸后裁剪。将BaseSize改为与图片实际尺寸一致即可：

<MauiSplashScreen Include="Resources\Images\splashscreen.png" Color="#66B3FF" BaseSize="482,482" />

2. 调整图片比例与内容布局 #

MAUI启动屏默认采用中心裁剪适配不同屏幕比例，若图片比例（1:1）与设备屏幕比例（如9:16、16:9）不匹配，必然会出现裁剪。可按以下思路调整：

• 若要完整显示图片内容，将图片改为适配主流设备比例（比如9:16竖屏），或把核心内容放在图片中间的安全区域（比如中间70%范围），避免边缘内容被裁剪。
• 若坚持使用1:1图片，可针对平台单独修改缩放模式：
  • Android：打开Platforms/Android/Resources/drawable/splash_screen.xml，将android:scaleType从centerCrop改为fitCenter，图片会按比例完整显示，空白区域由配置的Color填充。
  • iOS：打开Platforms/iOS/Resources/LaunchScreen.storyboard，选中图片视图，在属性面板将Content Mode改为Aspect Fit，效果同Android。

3. 排查是否为MAUI Bug #

如果以上配置调整后仍有问题，大概率不是Bug，而是平台特定适配细节未处理。可尝试清理项目缓存（删除bin/obj文件夹）后重新编译，或测试不同设备确认是否为特定机型的适配问题。

二、使用自定义XAML启动屏 #

可以完全禁用默认启动屏，改用XAML页面实现自定义启动屏，步骤如下：

1. 移除默认启动屏配置 #

删除项目csproj文件中的<MauiSplashScreen>节点。

2. 创建XAML启动屏页面 #

新建SplashPage.xaml，根据需求设计布局（可添加logo、动画等元素）：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.SplashPage"
             BackgroundColor="#66B3FF">
    <VerticalStackLayout VerticalOptions="Center" HorizontalOptions="Center">
        <Image Source="splashscreen.png" WidthRequest="256" HeightRequest="256"/>
        <!-- 可添加文本、加载动画等元素 -->
    </VerticalStackLayout>
</ContentPage>

3. 修改App启动逻辑 #

在App.xaml.cs中，先导航到SplashPage，延迟后切换到主页面：

public App()
{
    InitializeComponent();
    MainPage = new SplashPage();
    
    // 延迟2秒切换到主页面，可根据需求调整时长
    Task.Run(async () =>
    {
        await Task.Delay(2000);
        MainThread.BeginInvokeOnMainThread(() =>
        {
            MainPage = new MainPage();
        });
    });
}

4. 处理平台透明启动屏 #

为避免系统默认启动屏闪烁，需配置平台主题为透明：

• Android：打开Platforms/Android/Resources/values/styles.xml，修改Maui.SplashTheme：

  <style name="Maui.SplashTheme" parent="Maui.BaseTheme">
      <item name="android:windowBackground">@android:color/transparent</item>
      <item name="android:windowIsTranslucent">true</item>
      <item name="android:windowContentOverlay">@null</item>
  </style>
  

• iOS：打开Platforms/iOS/Info.plist，删除UILaunchStoryboardName条目，或创建一个空白透明的LaunchScreen.storyboard替换默认文件。

内容的提问来源于stack exchange，提问作者wekso