Flutter路由处理routes技巧

1.Flutter路由处理

routers对象是一个Map对象，有Map<String,WidgetBuilder>组成，会使用Navigator.pushNamed来路由。

会通过去查找Map的名称，切换到WidgetBuilder的带来的页面。

通过routers可以给MaterialApp组件初始化路由表

技巧为：

Naviagetor.pushNamed(context,'/somePage');

2代码例子

2.1 建立firstPage和aboutPage页面

首页的入口增加routes路由页面

//router
routes:{
'/about':(BuildContext context) =>aboutPage(),
'/first':(BuildContext context) =>fristPage(),

},

...

class fristPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:Text("第一页")
      ),
      body: Center(
        child: RaisedButton(
          onPressed: (){
            Navigator.pushNamed(context, '/about');
          },
          child: Text('这是第一页',
            style: TextStyle(fontSize: 28.0),
          ),
        ),

      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          Navigator.pushNamed(context, '/about');
        },
        tooltip: "关于页面",
        child: Icon(Icons.navigate_next),

      ),
    );


  }
}


class aboutPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title:Text("关于页面")
      ),
      body: Center(
        child: RaisedButton(
          onPressed: (){
            Navigator.pushNamed(context, '/first');
          },
          child: Text('关于页面',
            style: TextStyle(fontSize: 28.0),
          ),
        ),

      ),
    );


  }
}

2.2 图标为：

扫描二维码关注公众号，回复： 10571469 查看本文章

3.页面切换

点击到第一页，第一页点击到关于页，关于页点击回到第一页，第一页点击回到首页

 

右下角点击进入第一页，

首页和关于页