第八十三回：如何创建一个启动页

我们在上一章回中介绍了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);

  @override
  State<ExSplashScreen> createState() => _ExSplashScreenState();
}

class _ExSplashScreenState extends State<ExSplashScreen> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Future.delayed(Duration(seconds: 3), () {
      //可以在这里加一些广播或者视频等,我们是延时3秒后启动主页
      Navigator.of(context).pushReplacementNamed("MyHomePage");
    });

  }

  @override
  Widget build(BuildContext context) {
    print("Widget Circle: build");

    return Container(
      child: Image.asset("images/ex.png"),
    );
  }
}

在上面的代码中，启动页中只是简单地显示一张图片，这个在build()方法中可以看到。启动页的延时为3秒，这个时间可以自己修改，它主要是通过Future实现的，延时操作的内容都在Widget的initState()生命周期方法中，相当于在启动页初始化过程中实现延时操作相关的功能。延时操作的具体内容就是通过路由跳转到其它页面中，代码中使用了命名路由，因此会跳转到与MyHomePage绑定的页面中。

编译并且运行上面的代码，可以看到app启动后先是显示一张图片，3秒后跳转到程序主页面中，我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

看官们，关于"如何创建一个启动页"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!