我们在上一章回中介绍了Widget生命周期相关的内容,本章回中将介绍如何创建一个启动页.闲话休提,让我们一起Talk Flutter吧。
概念介绍
本章回介绍的启动页就是App启动时显示的页面,英文叫Splash Screen
.通常会在该页面中显示一些广告。目前基本上每个App都提供了启动页,而且官方也支持该项功能,比如Android提供了专门的Splash Screen
模板,IOS也提供了LaunchScreen
供开发者使用。
创建方法
介绍完启动页的概念后,我们来介绍创建启动页的方法,详细如下:
- 创建一个StatefulWidget,并且在页面中添加启动页需要显示的内容;
- 在Widget的initState()方法中使用Future实现一个延时操作;
- 在延时操作中使用路由从启动页跳转到程序主页面;
示例代码
class ExSplashScreen extends StatefulWidget {
const ExSplashScreen({Key? key}) : super(key: key);
State<ExSplashScreen> createState() => _ExSplashScreenState();
}
class _ExSplashScreenState extends State<ExSplashScreen> {
void initState() {
// TODO: implement initState
super.initState();
Future.delayed(Duration(seconds: 3), () {
//可以在这里加一些广播或者视频等,我们是延时3秒后启动主页
Navigator.of(context).pushReplacementNamed("MyHomePage");
});
}
Widget build(BuildContext context) {
print("Widget Circle: build");
return Container(
child: Image.asset("images/ex.png"),
);
}
}
在上面的代码中,启动页中只是简单地显示一张图片,这个在build
()方法中可以看到。启动页的延时为3秒,这个时间可以自己修改,它主要是通过Future实现的,延时操作的内容都在Widget的initState()生命周期方法中,相当于在启动页初始化过程中实现延时操作相关的功能。延时操作的具体内容就是通过路由跳转到其它页面中,代码中使用了命名路由,因此会跳转到与MyHomePage绑定的页面中。
编译并且运行上面的代码,可以看到app启动后先是显示一张图片,3秒后跳转到程序主页面中,我在这里就不演示程序的运行结果了,建议大家自己动手去实践。
看官们,关于"如何创建一个启动页"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!