flutter學習——路由（routes）

學習資料：Flutter移動應用

展示內容的螢屏或頁面叫做路由（routes）, Navigator這個小部件提供了方法可以去管理這些路由，比如Navigator.push、Navigator.pop，路由物件都會放在一個Stack里面，我們可以自己創建一個Navigator去處理路由堆，也可以使用WigetsApp或者是MaterialApp小部件給我們創建好的Navigator，使用Navigator.of這個方法，把context交給它就可以了，這樣就可以實作push和pop，

在main.dart的App()的MaterialApp里面，有個home屬性值，它展示的頁面就是在路由堆中是最底下的路由，即一開始就會顯示的頁面，當新的路由push到這個路由堆的上面，螢屏上就會顯示新push的頁面，

一個例子 ：

在main.dart中修改的home值

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false,
     	home: NavigatorDemo(),
        theme:ThemeData(
          primarySwatch: Colors.deepPurple,
          highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70,
        )
    );
  }
}

新建一個navigator_demo.dart，使用Navigator.of(context).push()

class NavigatorDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    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) => MyPage(title: 'About'),
               		),
              	);
                Navigator.pushNamed(context, '/about');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatelessWidget{
  final String title;

  MyPage({
    this.title
});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.arrow_back),
        onPressed: (){
          Navigator.pop(context);//回傳上一個路由
        },
      ),
    );
  }
}

運行結果:

在MaterialApp中我們事先定義好一些帶名字的路由，然后想要push的時候只需要給出名字就行了，
在MaterialApp中添加routes屬性，它里面是map，各自都有對應的名字和值（打開路由后要顯示的東西），

例子：

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context++) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false,
	    home: NavigatorDemo(),
        routes: {//map
          '/about':(context) => MyPage(title:'About'),
        },
        theme:ThemeData(
          primarySwatch: Colors.deepPurple,
          highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70,
        )
    );
  }
}

class NavigatorDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    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');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatelessWidget{
  final String title;

  MyPage({
    this.title
});

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

也可以不用Home屬性，轉而使用initialRoute來設定初始的路由，

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context++) {
    // TODO: implement build
    return MaterialApp(
        debugShowCheckedModeBanner: false,
//        home: NavigatorDemo(),
        initialRoute: '/',
        routes: {//map
          '/':(context) => NavigatorDemo(),//初始路由
          '/about':(context) => MyPage(title:'About'),
        },
        theme:ThemeData(
          primarySwatch: Colors.deepPurple,
          highlightColor:Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70,
        )
    );
  }
}