android 启动白屏_从细节入手改善用户体验,Flutter跨平台App开发中设置Android和iOS的启动页
前言
flutter开发App方便快捷,就是冷启动的时候要加载dart引擎有短暂的白屏,严重影响用户体验,这个时候我们就需要设置一个启动图片,想国内大部分App那样(例如微信那个地球),启动App的时候显示这个图片,加载完再进入App,不至于影响用户体验。
Android启动页
首先要准备好启动图,本文命名为splash.png
,按照不同的分辨率添加到对应的mipmap-hdpi / mipmap-mdpi / mipmap-xhdpi / mipmap-xxhdpi / mipmap-xxxhdpi
目录里面。
然后编辑/android/app/src/main/res/drawable/launch_background.xml
文件,默认的应该是这样的:
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@android:color/white"/>
</layer-list>
可以看到原本就是白色背景,难怪启动会短暂白屏,现在我们把白色背景这行代码注释掉,改成以下代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<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><bitmapandroid:gravity="fill"android:mipMap="true"android:src="@mipmap/splash"/></item>
</layer-list>
这样Android App启动的时候就会显示这个图片了,舒服。
iOS配置
(注:由于我没有Mac电脑,因此无法测试iOS运行效果,配置方法来自参考资料)
首先用xcode打开ios
目录,把图片拖进界面左侧的Runner
根目录,勾选Copy items if needed
,选中Create groups
并在下方勾选Runner
。
完成后在左侧 Project navigator 打开文件 Runner/Runner/LaunchScreen.storyboard。然后在中间部分点开 view tree,找到 LaunchImage。
点击后查看右侧 Attributes inspector,在 image 一栏中填写 splash.png,并将 Content Mode 修改为 Scale To Fill。
选中图片,然后在左侧 View Controller scence 中选中并剪切该图片 splash.png 并粘贴,以清除十字线(约束)。
编辑图片的约束,使其充满全屏幕。
点击屏幕右下角的约束编辑器:
将上面填空处都填 0,然后点击 Add 4 Constraints。
就OK啦~
Flutter启动界面
这样设置完我们会发现,虽然启动图有了,但是由于现在的手机性能都很高,一下子就加载完成,所以每次打开都是启动图一闪而过,这样体验也不是很好,所以我们要在Flutter里面再显示一遍这个启动界面,还可以想很多国产流氓App那样,在启动界面加上长达5秒的广告(误)
以下是我的App的启动页Dart代码,可以供大家参考,通过Future.delayed(Duration(seconds: 1))
可以实现在这个页面停留1秒,要显示久一点就改多点。
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';class SplashRoute extends StatefulWidget {@override_SplashRouteState createState() => _SplashRouteState();
}class _SplashRouteState extends State<SplashRoute> {@overridevoid initState() {super.initState();Future.delayed(Duration(seconds: 1)).then((e) {Navigator.of(context).pushReplacementNamed('home');});}@overrideWidget build(BuildContext context) {// 隐藏状态栏SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);return Container(color: Colors.lightBlue,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[FaIcon(FontAwesomeIcons.cat, size: 100, color: Colors.grey[200]),Text('壹喵',textAlign: TextAlign.center,style: TextStyle(fontSize: 30,color: Colors.grey[200],decorationStyle: TextDecorationStyle.dotted,decorationThickness: 0,),),],),);}
}
ok
这样就完成了,虽然只是一个很小的细节,但是却可以极大改善用户体验,特别是晚上,我们开发的App都会适配系统的神色模式,但是启动的这一瞬间一个白屏,如果把用户的眼镜闪瞎了,估计我们的App离被打1星和下架也不远了……
android 启动白屏_从细节入手改善用户体验,Flutter跨平台App开发中设置Android和iOS的启动页相关推荐
- android 启动白屏_为什么说Android 架构的未来是 MVVM?
据<第45次中国互联网络发展状况统计报告>,2019年市场上监测到的APP数量比2018年减少85万款- 这两年,很多朋友都会有这样的疑惑: "现在Android的坑还值不值得入 ...
- android splash白屏_使用react-native-splash-screen解决应用启动白屏问题
2020-05-01 使用react-native-splash-screen库 安装npm i react-native-splash-screen --save react-native link ...
- android splash白屏_解决Splash白屏黑屏问题
当系统启动一个App时,zygote进程会首先创建一个新的进程去运行这个App,但是进程的创建是需要时间的,在创建完成之前,界面是呈现假死状态的,这极大地降低了用户体验,Android需要及时做出反馈 ...
- 直播软件app开发中直播公屏如何做出来?
直播软件app开发中直播公屏如何做出来? 功能 直播软件app开发中公屏最简单的就是通过一个可滑动的列表进行展示用户发送出来的消息,当然,一般都是通过服务器给客户端推送单条或者一组数据,然后客户端再把 ...
- 【Android 性能优化】应用启动优化 ( 启动白屏问题 | 应用启动时间测量 | 冷启动 | 热启动 | 应用启动时间计算源码分析 )
文章目录 一. APP 启动白屏 / 黑屏 二. APP 启动速度测量 1. 通过 Logcat 日志查看应用启动时间 2. 通过 adb 命令查看界面启动时间 三. APP 冷启动与热启动 四. A ...
- android白屏优化方案,优化Android App启动白屏
问题描述 随着Android App开发时间越来越长,项目中的功能,以及用到的第三方库也越来越多,apk的体积也会越来越大.用户在打开应用时,白屏的时间也越来越长,带来了不好的使用体验,如何才能做到 ...
- Android 冷启动解决启动白屏
前言 关于 splash 页面相信每个Android开发者都是非常熟悉的,而且很多人也遇到过需要在splash加个广告图片,然后延迟3秒在进入主页面,splash 应该只是一个启动页面,不应该放广告, ...
- Android 开发过程中遇到的棘手的问题笔记(SP引起的ANR,4G网络请求慢,app启动白屏)(持续更新)
前言 经历过面试的人应该都知道,一般我们在进行技术面试的时候,面试官都会问你,在项目开发中遇到过什么棘手的问题?最后是怎么解决的?本人之前就问到过好几次,可是由于准备不足,一时之间想不起来所遇到过的& ...
- React Native Android启动白屏的一种解决方案下
React Native Android启动白屏的一种解决方案下 参考文章: (1)React Native Android启动白屏的一种解决方案下 (2)https://www.cnblogs.co ...
最新文章
- Redis SLAVE过期键策略
- java 格式化位数_java数字如何格式化?
- 2021 CCPC E. 被遗忘的计划(循环卷积+快速幂)
- android打印html页面,Android打印HTML文档
- Python ValueError: could not convert string to float: ‘-‘ 解决办法
- 数据的四大特征_大数据
- [转载] pandas dataframe 提取行和列
- 人工神经网络基本构成有哪些,常见的人工神经网络有哪几种
- win7交换机共享宽带连接上网
- Android 9.0 Toast源码改变引发的问题
- 推特开发者账号 V2【推特开发者文档V2系列1】——获取推特视频播放量
- AI一分钟|快播王欣出狱,与姚劲波、何小鹏一起畅谈人工智能、区块链
- Hive元数据信息获取
- 华为手机WIFI无线ADB教程
- 详解Redis和Memcached
- 【计算机网络】计算机网络基础知识(三次握手,四次挥手,OSI七层网络模型)
- Mac中禁用向日葵(Oray)控制端自启动
- 牛奶可乐经济学之Q7:为什么官僚们喜欢使用语焉不详的句子?
- 计算机设置定时原理,可编程定时和计数器-微计算机原理-电子发烧友网站
- found 2 critical severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for deta
热门文章
- 一大波问题解决和配置备份 WCF快炼成精了
- 杭电1862EXCEL排序
- fastadmin添加定时任务
- idea json格式化插件_IDEA常用插件
- microsoftsql新建登录用户登录失败_史上最简单的Spring Security教程(九):自定义用户登录失败页面...
- 如何切换计算机用户界面,让我来教大家从WIN10界面切换到WIN 7界面吧!嘻嘻
- hbase 页面访问_HBase在滴滴出行的应用场景和最佳实践
- MXNet下载Fashion-MNIST错误处理
- AspectJ 在 Spring 中的使用
- 原生js和jquery常用的DOM操作