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

原创已于 2023-07-15 22:23:36 修改 · 546 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #splash screen #launch screen #启动页

于 2023-07-15 16:00:00 首次发布

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

本文介绍了如何在Flutter中创建启动页，包括创建一个StatefulWidget，使用Future在initState中实现3秒后跳转到主页面的延时操作，以及使用Image.asset显示启动页图片。

文章目录

概念介绍
创建方法
示例代码

我们在上一章回中介绍了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秒后跳转到程序主页面中，我在这里就不演示程序的运行结果了，建议大家自己动手去实践。

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