美文网首页
Flutter闪屏页添加

Flutter闪屏页添加

作者: 青松0808 | 来源:发表于2019-01-04 15:19 被阅读0次

    更新下,看到更加好的文章可以参考 https://medium.com/@diegoveloper/flutter-splash-screen-9f4e05542548
    而且可以通过下面的方式实现图片的叠加效果,其中文字需要转换成图片:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- You can insert your own image assets here -->
        <item >
            <shape android:shape="rectangle" >
                <gradient
                    android:angle="90"
                    android:endColor="#FFE6EDFA"
                    android:startColor="#FFFFFFFF" />
            </shape>
        </item>
        <item android:bottom="130dp">
            <bitmap
                android:gravity="center"
                android:mipMap="true"
                android:src="@mipmap/ic_launcher" />
        </item>
        <item android:bottom="40dp">
            <bitmap
                android:gravity="center"
                android:mipMap="true"
                android:src="@mipmap/ic_launcher_text"/>
        </item>
    
        <item >
            <bitmap
                android:gravity="bottom"
                android:mipMap="true"
                android:src="@mipmap/ic_launcher_bottom"/>
        </item>
    </layer-list>
    

    ----------------------------------------------分割线----------------------------------------------

    之前做android的时候就需要解决白屏问题,按照如下方式:
    给启动页的activity设置style:

    <style name="FullscreenStyle" parent="xxx">
            <item name="android:windowFullscreen">true</item>
            <item name="windowNoTitle">true</item>
            <item name="android:windowBackground">@drawable/launch_image</item>
        </style>
    

    然后在drawable放置一张全屏的图片launch_image。
    使用flutter以后就考虑是否能有相同的方式解决,所幸找到了,而且flutter本身已经做好了,我们只需要添加下图片即可。
    参考来源:https://stackoverflow.com/questions/43879103/adding-a-splash-screen-to-flutter-apps
    验证过android平台,这里记录下:
    把我们的图片launch_image放置到对应的mipmap尺寸下;
    然后把drawable/launch_background.xml的注释放开,变成如下:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@android:color/white" />
    
        <!-- You can insert your own image assets here -->
         <item>
            <bitmap
                android:src="@mipmap/launch_image" />
        </item>
    </layer-list>
    

    这里可以看到我把android:gravity="center"给去掉了,因为我这里是需要一个全屏的启动页,而且如果尺寸不是合适的会拉伸到全屏。如果只是放置一个logo,可以加上然后设置下背景色即可。
    另外如果是说启动页还有其他元素,那么正常的在main.dart里面添加启动页UI和跳转主页的逻辑就好了。

    相关文章

      网友评论

          本文标题:Flutter闪屏页添加

          本文链接:https://www.haomeiwen.com/subject/qetkrqtx.html