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等）的圖像，以使每種屏幕尺寸都具有正確的尺寸，並使用此drawable：

<?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>

這個看起來像這樣：