前言
每个应用都有很多个页面，在 Flutter中同样也有很多页面，被称之为路由(route)，route 的管理是通过堆栈来实现的。也就是说，基本的使用方法是 push 和 pop。路由的类型分为 static route 和 dynamic route，下面我们分别对这两种 route 进行说明。
static route
顾名思义，static route 就是在知道明确跳往哪个界面时的情况下使用的。举个栗子，在MaterialApp构造函数中，我们可以定义 route 列表。具体代码如下:
import 'package:flutter/material.dart';
import 'package:route_flutter_app/page1.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Static routing',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: {
'/page1':(context)=>Page1(title: "Main page",),
'/page2':(context)=>Page2(title: "Second page",),
'/page3':(context)=>Page3(title: "Third page",),
'/page4':(context)=>Page4(title: "Fourth page",),
},
home: Page1(title: "Main page",),
);
}
}
在上面的代码中，我们定义了 home 主页，routes 定义路由表。page1234 是我们的 static route，路由的参数为 Map 类型。
通过上面对应的路由表，我们可以直接使用 Navigator 进行页面跳转。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Page1 extends StatelessWidget{
final String title;
Page1({Key key,@required this.title}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Center(
child: RaisedButton(
child: Text("Jump to page2"),
onPressed: (){
Navigator.pushNamed(context, "/page2");
},
),
),
);
}
}
class Page2 extends StatelessWidget{
final String title;
Page2({Key key,@required this.title}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Center(
child: RaisedButton(
child: Text("Jump to page3"),
onPressed: (){
Navigator.pushNamed(context, "/page3");
},
),
),
);
}
}
class Page3 extends StatelessWidget{
final String title;
Page3({Key key,@required this.title}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Center(
child: RaisedButton(
child: Text("Jump to page4"),
onPressed: (){
Navigator.pushNamed(context, "/page4");
},
),
),
);
}
}
class Page4 extends StatelessWidget{
final String title;
Page4({Key key,@required this.title}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: Center(
child: Text(this.title,style: new TextStyle(fontSize: 50,color: Colors.red),)
),
);
}
}
以上是我定义的四个跳转接口，这些代码都是基本的代码，我这里不做过多的解释。实现效果如下:
在 RaisedButtond 的onPress方法里 ，我们可以通过调用方法 Navigator.pushNamed(context, "/page2") 进行页面跳转。 当然，我们也可以使用push的方法:
Navigator.of(context).push(
new MaterialPageRoute(
builder:(context){
return new Page4()
}
)
);
dynamic route
虽然静态路由可以进行页面的跳转，但在大多数项目中，我们需要携带参数在两个界面之间跳转，例如，许多新闻应用从列表跳转到 News details 界面。此时，动态路由就派上用场了。让我们看一看代码，看看动态路由是如何实现的。首先，我们定义一个用于列表的新闻类News:
class News {
final String title;
final String description;
News(this.title,this.description);
}
下面是编辑器定义的一个 News 类。News 类有两个变量，一个标题和一个细节。然后直接在主页面上修改page1的代码，如下图所示:
class Page1 extends StatelessWidget{
final String title;
Page1({Key key,@required this.title}):super(key:key);
final news=List.generate(20, (i)=>News("Journalism $i","Journalism $i Details of"),);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(this.title),
),
body: ListView.builder(itemBuilder: (context,index){
return ListTile(
title: Text(news[index].title),
onTap: (){
Navigator.push(
context,
MaterialPageRoute(
builder: (context)=>NewsDetail(s_new: news[index],),
)
);
},
);
},
itemCount: news.length,
),
);
}
}
首先，在这里生成一个包含20个元素的新闻列表。list 可以通过 generate 方法快速创建，然后 ListView 可以生成列表, 每个列表都通过 onTap 可以进行点击事件的监听。在这里，单击的新闻类被传递到 NewsDetail 细节如下:
class NewsDetail extends StatelessWidget{
final News s_new;
NewsDetail({Key key,@required this.s_new}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(this.s_new.title),),
body: Center(
child: Text(this.s_new.description),
),
);
}
}
上面是一个常规代码片段，它定义了一个标题，并在中间显示新闻的详细信息。然后实现的效果如下。