![9858e1c4f17480b6a97155b29f9121ae.png](https://i-blog.csdnimg.cn/blog_migrate/a7cfc69947b1755ba34b8c81e64f817e.jpeg)
转载请注明出处: https://learnandfish.com/
概述
每个应用都有很多个页面,在flutter中同样也有很多页面,被称之为路由(Router),页面之间的跳转通过导航器(Navigator)进行管理。
其中 Navigator.push 和 Navigator.pop 是最简单的跳转到新页面和返回到上一级界面的方式。
路由分为静态路由(即命名路由)和动态路由。页面之间跳转时往往需要传递参数,这称之为路由传值。下面我们会一一带领大家学习。
通过本篇文章的学习我们的目标是熟练掌握路由及传值,以后进行应用开发时对页面跳转方面不再疑惑。
静态路由(即命名路由)
flutter中万物皆widget,我们的页面(route)也是widget的子类,所以我们定义一个界面也是通过继承widget实现。
前面的博客我们已经定义过界面了,比如计数器实例,就是一个简单的页面,也就是一个路由。下面我们来详细实现一个界面。
首先我需要一个入口函数,这个相信大家已经很熟悉了,就是在main方法中调用runApp函数进入应用,我们就不做详细介绍了,直接给出代码。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 常用固定写法,生成Material风格的App
return MaterialApp(
title: "路由使用",
theme: ThemeData(
// 默认为亮色主题,可以设置[Brightness.dark]变成黑暗模式
brightness: Brightness.light,
),
home: HomePage(), // 首页面
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 通过Scaffold可以方便的生成一个Material风格的页面
return Scaffold(
// 顶部导航栏
appBar: AppBar(
title: Text("主页面"),
),
body: Center(
child: RaisedButton(
child: Text("我是第一个界面,点击我进入第二个界面"),
onPressed: () {
print("我是第一个界面,点击我进入第二个界面");
},
),
),
);
}
}
上面的代码是我们最常规的包含一个主页面的应用。后续我们写应用时候的基本框架也是在此基础上进行扩展。
现在我们的想法是点击这个页面上的按钮跳转的第二个界面,首先我们需要构造第二个界面。构造第二个界面其实和我们构造第一个
界面HomePage一样,继承widget重写自己想要的样式即可。实现了页面就要开始跳转逻辑。
静态路由即命名路由,在通过Navigator进行跳转之前,需要在MaterialApp组件内显式声明路由的名称,一旦声明,路由的跳转
方式就固定了,所以称之为静态路由,有唯一的名称所以也称之为命令路由。显式声明路由通过在MaterialApp内的routes属性进行定义。
如果我们有很多个页面和很多个其他类型的组件都放在lib下,对于后期维护简直是一大折磨,所以分包是大多数平台的常规操作,
就是对有同一种特性的东西放置在同一个包下,比如页面类的组件都放在pages包,工具类的组件放在utils包下等。
接下来我们就新建一个pages包,把第二个界面SecondPage放进去,把第一个界面HomePage也提取出来放到这个包下。
我们分为一下三步进行静态路由的跳转:
- 首先在lib目录右键新建pages包,接着在pages包下新建SecondPage.dart文件,然后把HomePage提取到pages下,成为单独的类。
- 在RouteDemo类中的M