Flutter淘宝App添加启动图最简单实现方法

栏目: IOS · 发布时间: 6年前

内容简介：不说复杂的，就谈你可能会遇到的问题本人文字和表达水平一般，所以可能打错字或写错，还请见谅Flutter是移动跨平台的UI框架，一份代码即可在Android和iOS上一致的体验，但是有一些还是需要我们去修改iOS和Android代码才能实现的，比如今天要说的启动图！

不说复杂的，就谈你可能会遇到的问题

本人文字和表达水平一般，所以可能打错字或写错，还请见谅

Flutter是移动跨平台的UI框架，一份代码即可在Android和iOS上一致的体验，但是有一些还是需要我们去修改iOS和Android代码才能实现的，比如今天要说的启动图！

Flutter默认是没有启动图的，所以打开App是闪现的界面就是一个白屏，一个体验好的App肯定是需要启动图的。

目前使用Flutter开发的应该大部分是iOS或Android的开发者，要么会Android，要么会iOS，对于涉及修改启动图，可能就有点一脸懵逼了。这篇文章我会教大家给App添加启动图最简单的方法，相信会给你带来帮助！

完整示例请看 GitHub： Flutter 淘宝App

一、iOS启动图设置

1、添加启动图

首先我们打开工程

找到Assets.xcassets这个文件

打开后点击+

再点击New Image Set

给图片命名然后分别添加@2x、@3x图片

@1x图片就不需要了，在iPhone 3GS上才需要

2、设置启动图

Xcode已经给我们默认生成了LaunScreen.storyboard，通过这个文件我们就可以修改启动图了。

步骤如下图所以，再次运行，你会发现启动图不再是白屏了。

注意要修改图片的Content Mode为Scale To Fill

二、Android启动图设置

1、添加启动图

打开res目录，路径为android/app/src/main/res

将你的启动图依次添加到mipmap目录中

图片的尺寸可以都一样

设置启动图

打开launch_background.xml文件

添加如下代码

//这样写可以通过图片铺满整个屏幕，不同屏幕可能会有拉伸
<item android:drawable="@mipmap/launch_image"></item>
复制代码

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

大型分布式网站架构设计与实践

陈康贤 / 电子工业出版社 / 2014-9-1 / 79.00元

《大型分布式网站架构设计与实践》主要介绍了大型分布式网站架构所涉及的一些技术细节，包括SOA架构的实现、互联网安全架构、构建分布式网站所依赖的基础设施、系统稳定性保障和海量数据分析等内容；深入地讲述了大型分布式网站架构设计的核心原理，并通过一些架构设计的典型案例，帮助读者了解大型分布式网站设计的一些常见场景及遇到的问题。作者结合自己在阿里巴巴及淘宝网的实际工作经历展开论述。《大型分布式网站......一起来看看《大型分布式网站架构设计与实践》这本书的介绍吧!

码农工具