Flutter-路由

路由管理就像一个栈，当进入一个新的页面时，就相当于往栈上面增加了一个页面；当退出该页面，返回到之前的页面，就相当于将栈最上面的一个页面拿出

push

往栈中添加一个新的页面

class NavigatorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              child: Text('Home'),
              onPressed: null,
            ),
            FlatButton(
              child: Text('About'),
              onPressed: (){
                Navigator.of(context).push( // 核心
                  MaterialPageRoute(
                    builder: (BuildContext context) => Page(title: 'About',)
                  )
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Page extends StatelessWidget {
  final String title;

  Page({
    this.title
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0,
      ),
    );
  }
}

进入之前
点击了About之后

带名字的路由（Navigator.pushNamed）

我们可以给要进入的页面路由起一个名字，然后通过Navigator.pushNamed(context, name)方法来完成上面相同的效果
首先，我们要在MaterialApp中增加一个属性，叫routes

routes: {
  '/about': (context) => Page(title: 'About',),
},

class NavigatorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              child: Text('Home'),
              onPressed: null,
            ),
            FlatButton(
              child: Text('About'),
              onPressed: (){
                Navigator.pushNamed(context, '/about'); // 效果等同于push方法
              },
            ),
          ],
        ),
      ),
    );
  }
}

pop

拿出栈中最上面的页面

class Page extends StatelessWidget {
  final String title;

  Page({
    this.title
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_back),
        onPressed: (){
          Navigator.pop(context);
        },
      ),
    );
  }
}

添加浮动按钮

初始路由（initialRoute）

在MaterialApp中的home属性就是初始路由，当然，我们也可以使用initialRoute属性，首先，我们要先将home属性注释，如下代码所示：

void main() => runApp(
  new MaterialApp(
    debugShowCheckedModeBanner: false, // 消除页面右上角的debug条幅
    title: '江约',
    // home: NavigatorDemo(),
    initialRoute: '/about', // 初始路由显示
    routes: {
      '/':(context) => NavigatorDemo(),
      '/about': (context) => Page(title: 'About',),
    },
  )
);

预览