.NET MAUI如何用SVG实现横竖屏全屏启动屏

一、制作自适应SVG文件 #

基于你参考的横竖屏适配思路，提供两种可靠的SVG实现方式：

方式1：相对坐标自适应（兼容性优先） #

通过viewBox="0 0 1 1"建立1x1的相对坐标系，所有元素用比例值定义位置和尺寸，横竖屏时自动保持布局比例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="100%" height="100%">
  <!-- 全屏背景填充 -->
  <rect width="1" height="1" fill="#2196F3"/>
  <!-- 居中Logo（占屏幕宽度20%） -->
  <image href="your-logo.svg" x="0.4" y="0.35" width="0.2" height="0.2" preserveAspectRatio="xMidYMid meet"/>
  <!-- 居中显示的应用名称 -->
  <text x="0.5" y="0.65" font-size="0.08" fill="#FFFFFF" text-anchor="middle" font-weight="bold">你的App名称</text>
</svg>

• 所有元素的位置、尺寸均基于0-1的相对值，适配任意屏幕比例
• 内部嵌套图像时用preserveAspectRatio保证比例不扭曲

方式2：媒体查询适配（支持横竖屏布局差异） #

如果需要横竖屏展示不同布局（比如竖屏Logo在上、横屏Logo在左），可以用CSS媒体查询检测屏幕方向，动态旋转、平移内容：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 1920" width="100%" height="100%">
  <style>
    /* 横屏时旋转内容并调整位置，适配宽高互换 */
    @media (orientation: landscape) {
      #content-group {
        transform: rotate(90deg);
        transform-origin: center center;
        translate: 0 -1080px;
      }
    }
  </style>
  <g id="content-group">
    <!-- 竖屏布局内容 -->
    <rect width="1080" height="1920" fill="#2196F3"/>
    <image href="your-logo.svg" x="440" y="760" width="200" height="200"/>
    <text x="540" y="1100" font-size="120" fill="white" text-anchor="middle">你的App名称</text>
  </g>
</svg>

注意：部分平台启动屏渲染引擎可能限制CSS支持，建议先在目标设备上测试兼容性。

二、Android端配置 #

1. 将SVG文件放入Platforms/Android/Resources/drawable/目录（命名为splash_screen.svg）
2. 修改Platforms/Android/Resources/values/styles.xml中的启动主题，设置全屏背景并隐藏系统栏：

<style name="SplashTheme" parent="Theme.Maui.Splash">
    <item name="android:windowBackground">@drawable/splash_screen</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

3. 在AndroidManifest.xml中绑定主题并允许方向变更：

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:theme="@style/SplashTheme"
    android:configChanges="orientation|screenSize|smallestScreenSize">

三、iOS端配置 #

1. 将SVG添加到资源目录：
   • 打开Platforms/iOS/Resources/Assets.xcassets，创建新的Image Set（命名为SplashScreen）
   • 拖入SVG文件，设置Scales为Single Scale，勾选Preserve Vector Data
2. 编辑Platforms/iOS/Resources/LaunchScreen.storyboard：
   • 添加ImageView，约束其Leading/Trailing/Top/Bottom与父视图完全对齐
   • 设置ImageView的Image为SplashScreen，Content Mode设为Scale Aspect Fill（保证全屏填充）
   • 选中ViewController，在属性面板勾选Hide Status Bar隐藏状态栏

四、验证适配效果 #

在Android、iOS模拟器或真机上切换横竖屏，确认启动屏布局自动适配，无拉伸或留白问题。

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