Flutter -- static route and dynamic route

前言 每个应用都有很多个页面，在 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<News>.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),
      ),
    );
  }

}

上面是一个常规代码片段，它定义了一个标题，并在中间显示新闻的详细信息。然后实现的效果如下。