Flutter Splash闪屏页
发布时间
阅读量:
阅读量
Splash页
- flutter也可以添加一个SplashPage
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MySplashPage(),
);
}
}
class MySplashPage extends StatefulWidget {
@override
_MySplashPageState createState() => _MySplashPageState();
}
class _MySplashPageState extends State<MySplashPage> {
@override
Widget build(BuildContext context) {
return Container(
child: Image(
image: AssetImage('images/splash.png'),
fit: BoxFit.fill,
),
);
}
@override
void initState() {
// 启动的时候将屏幕设置成全屏模式
SystemChrome.setEnabledSystemUIOverlays([]);
super.initState();
// 这里进行1秒后跳转
Timer(
Duration(seconds: 1),
() => Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (BuildContext context) => MyHomePage())));
}
@override
void dispose() {
// 关闭的时候将屏幕设置成原来的状态
SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
super.dispose();
}
}
Android端应采取措施将对应的 launch_background.xml 中纳入splash图片资源
<?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>
全屏显示
<bitmap android:gravity="fill" android:src="@drawable/splash" />
</item>
</layer-list>
为了使导航至第一个页面时同样显示当前的splash图,必须修改另一个配置文件styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Theme applied to the Android Window while the process is starting -->
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>
<!-- Theme applied to the Android Window as soon as the process has started.
This theme determines the color of the Android Window while your
Flutter UI initializes, as well as behind your Flutter UI while its
running.
This Theme is only used starting with V2 of Flutter's Android embedding. -->
<!-- 正常的状态下也是显示splash一样的状态-->
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">@drawable/launch_background</item>
</style>
</resources>
目前而言, 官方确实提供了详细的教程指南
- 最后是一些splash相关的的xml编写;
这是主题中的配置
<item name="android:windowBackground">@drawable/launch_background</item>
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="@drawable/splash_background" />
<!--中间显示logo+文案 图片-->
<item>
<bitmap
android:gravity="center"
android:src="@drawable/logo_text" />
</item>
</layer-list>
需要用较为详细的描述来提升可读性:需要注意的关键点在于:无论是背景图还是 logo 标识物,在设计时都会按照1080分辨率进行裁剪。接着我们将这两个图像整合到相应的xxxhdpi drawable布局中。这样一来,在不同屏幕尺寸设备上都能实现良好的显示效果。
全部评论 (0)
还没有任何评论哟~
