Flutter 启动画面在加载时将图像拉伸一秒钟

Question

我正在使用 Flutter 创建一个新应用，并希望在初始启动屏幕上添加自定义图像。

图像出现在初始屏幕上，但是大约有半秒钟的时间，它看起来被拉伸了，看起来不太好。

我一直在寻找，但很难找到有同样问题的人。

有什么想法吗？

我尝试使用 mipmap 提供可变大小的图像，但产生了相同的结果。

launch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/green" />
    <item>
        <bitmap
            android:gravity="center_horizontal"
            android:src="@drawable/ic_logo"
            android:tileMode="disabled"/>
    </item>
</layer-list>

style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">false</item>
    </style>
    <color name="green">#b7dd05</color>
</resources>

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_app">

    <!-- io.flutter.app.FlutterApplication is an android.app.Application that
         calls FlutterMain.startInitialization(this); in its onCreate method.
         In most cases you can leave this as-is, but you if you want to provide
         additional functionality it is fine to subclass or reimplement
         FlutterApplication and put your custom class here. -->
    <application
        android:name="io.flutter.app.FlutterApplication"
        android:label="flutter_app"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize"
            android:screenOrientation="portrait">
            <!-- This keeps the window background of the activity showing
                 until Flutter renders its first frame. It can be removed if
                 there is no splash screen (such as the default splash screen
                 defined in @style/LaunchTheme). -->
            <meta-data
                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
                android:value="true" />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>
</manifest>

我不介意图像在渲染中需要一秒钟，但首先拉伸它并不理想。

Answer 1

您需要提供具有所有可能尺寸（mdpi、hdpi、xhdpi 等）的图像，以便为每个屏幕尺寸提供正确的尺寸并使用此可绘制对象：

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_green_dark" />
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
        </shape>
    </item>
    <item
        android:gravity="center"
        android:drawable="@drawable/logo_splash">
    </item>
</layer-list>

这将是我的风格：

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="SplashScreen" parent="AppTheme">
        <item name="android:windowBackground">@drawable/splash</item>
        <item name="android:windowFullscreen">false</item>
    </style>

</resources>

最后这将是我的AndroidManifest.xml：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.marianozorrilla">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        tools:ignore="GoogleAppIndexingWarning">

        <activity
            android:name=".MainActivity"
            android:theme="@style/SplashScreen">
            <intent-filter>
                <category android:name="android.intent.category.LAUNCHER" />
                <action android:name="android.intent.action.MAIN" />
            </intent-filter>
        </activity>

    </application>

</manifest>

所有这些的结果将如下：

在我的例子中，logo_splash.png 的大小为 200px-200px。如果您真的想处理 DP 中的大小，您需要至少有 API 23：

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_green_dark" />
            <padding
                android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
        </shape>
    </item>
    <item
        android:gravity="center"
        android:drawable="@drawable/logo_splash"
        android:width="100dp"
        android:height="100dp">
    </item>
</layer-list>

这个看起来像这样：