用Flutter改造ZS项目小记二:跳转至首页

如何跳转至首页

我们在上一部已经创建了一个只有一个铺满全屏图片的widgit界面,那么我们我们现在想跳转到首页现在需要解决两个问题

如何在launch启动界面呆三秒之后再进行跳转
在flutter中如何从一个widgit界面跳转到另外一个widgit界面
创建首页各个界面元素

三秒延迟跳转问题

var duration=new Duration(seconds: 3);//定义一个三秒种的时间
new Future.delayed(duration,(){//设置定时执行(类似于java中的timer)
    //要执行的代码
});

具体跳转操作

在创建App时创建router

routes:<String,WidgetBuilder>{
  '/mainPage':(BuildContext conntext)=>new MainPage(),
},

执行不带参数的跳转

Navigator.of(context).pushNamed("/mainPage");

具体代码

首先我们先看一下改造后的LaunchPage.dart文件,使其继承StatefulWidget.然后在 initState 回调函数中执行异步任务.

LaunchPage.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class LaunchPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _LaunchPageState();
  }


}
class _LaunchPageState extends State<LaunchPage>{
  @override
  Widget build(BuildContext context) {
    return new Image.asset("assets/images/launch_bg.jpg");
  }

  @override
  void initState() {
    super.initState();
    countDown();
  }

  void countDown(){
      var duration=new Duration(seconds: 3);//定义一个三秒种的时间
      new Future.delayed(duration,(){//设置定时执行
        goToMainPage();
      });
  }

  void goToMainPage(){
    Navigator.of(context).pushNamed("/mainPage");//执行跳转代码
  }

}

异步知识点参考链接

MainPage.dart

import 'package:flutter/material.dart';
class MainPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return new MainPageState();
  }

}

class MainPageState extends State<MainPage>{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new BottomNavigationBar(items: null),
    );
  }

  @override
  void initState() {
    super.initState();
  }

}

总结

至此我们创建了一个只有一个图片显示的欢迎页面,同时支持三秒钟后跳转到了MainPage界面.