第五十五回：命名路由(Route)-Toy模板网

这篇具有很好参考价值的文章主要介绍了第五十五回：命名路由(Route)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我们在上一章回中介绍了BoxDecoration Widget相关的内容,本章回中将介绍命名路由(Route).闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里介绍的命名路由是路由(Route)中的一种，主要用来当作导航，通过导航跳转到不同的页面，它和我们前面章回中介绍的路由类似，只不过是给路由添加了名字，因此叫命名路由，有了名字后就可以直接通过名字来使用路由。

当然了命名路由的使用还是需要Navigator配合才可以，通常是它充当Navigator中某个方法的参数。常用的方法是pushNamed()方法。在此，大家先对命名路由有个大概的了解，本章回中将详细介绍它的使用方法。

知识回顾

在Flutter中每个StatefulWidget或者StatelessWidget都有一个路由栈，这个路由栈通过Navigator来管理，使用Navigator的of()方法可以获取到当前页面所在的路由栈，

如果想从当前页面跳转到其它页面，那么使用Navigator的push()方法，相当于把其它页面压入当前页面的路由栈；
如果从当前页面返回上一级页面，那么使用Navigator的pop()方法，相当于把当前页面从路由栈中弹出，然后显示路由栈顶部的页面，也就是当前页面的上一级页面。

Navigator的push/pop()方法需要使用Router类对象充当参数，常用的是Router类的子类：MaterialPageRoute。该类有一个WidgetBuilder类型的必选参数，WidgetBuilder类型本质上是
一个方法类型，它会返回一个Widget对象，这个对象就是压入或者弹出路由栈的页面。这里先做文字性描述，如果大家不理解的话可以看示例代码。

使用方法

1.创建命名路由。具体做法为：在MaterialApp的routes属性中创建命名路由；
2.创建路由的语法：routeName: WidgetBuilder对象；
3.使用命名路由进行导航,具体用法为：Navigator.pushNamed(routeName);

关于第二步中的内容大家可能不理解，我们给一个示例代码：

"/route1": (context)=> DiyWidget();

代码中的route1是命名路由的名字，名字前面的反斜线是根路由，它默认的页面是home属性对应的页面，如果不想使用默认值，也可以使用"/"来指定，或者使用initialRouter属性指定根路由。

箭头是个语法糖，箭头前后的内容合在一起是一个方法，方法的参数是context,方面的内容是返回一个DiyWidget类型的对象。这个方法其实就是WidgetBuilder类型，我们在上一小节中介绍过该类型，它是MaterialPageRoute构造方法中的参数类型。看到这里大家就会明白，命名路由就是给普通路由起了个名字，背后的原理和普通路由完全相同。

示例代码

ListTile(
  leading: Icon(Icons.message),
  title: Text("Messages"),
  //点击这个条目跳转到其它页面r,
  onTap: () {
    //使用普通路由
    // Navigator.of(context).push(
    //   MaterialPageRoute(builder: (context){
    //     return ExButton();
    //   })
    // );

    //下面代码是上面代码的语法糖式写法
    // Navigator.of(context).push(
    //   MaterialPageRoute(builder: (context) => ExButton())
    // );

    //使用命名路由
    Navigator.pushNamed(context,"/ButtonExample");
  },
),