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

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

内容简介:不说复杂的,就谈你可能会遇到的问题本人文字和表达水平一般,所以可能打错字或写错,还请见谅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上才需要

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

2、设置启动图

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

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

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

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

二、Android启动图设置

1、添加启动图

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

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

图片的尺寸可以都一样

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

设置启动图

打开res目录下drawable目录

打开launch_background.xml文件

添加如下代码

//这样写可以通过图片铺满整个屏幕,不同屏幕可能会有拉伸
<item android:drawable="@mipmap/launch_image"></item>
复制代码
Flutter淘宝App添加启动图最简单实现方法

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

查看所有标签

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

Web表单设计

Web表单设计

[美] Luke Wroblewski / 卢颐、高韵蓓 / 清华大学出版社 / 2010-6 / 49.00元

精心设计的表单,能让用户感到心情舒畅,愉快地注册、付款和进行内容创建和管理,这是促成网上商业成功的秘密武器。本书通过独到、深邃的见解,丰富、真实的实例,道出了表单设计的真谛。新手设计师通过阅读本书,可广泛接触到优秀表单设计的所有构成要素。经验丰富的资深设计师,可深入地了解以前没有注意到的问题及解决方案。 本书专为表单设计或开发人员准备,但同时也适合可用性工程师、网站开发人员、产品经理、视觉设......一起来看看 《Web表单设计》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具