flutter 路由

Navigator

參數

• push 將設置的router信息推送到Navigator上，實現頁面跳轉。
• of 主要是獲取 Navigator最近實例的好狀態。
• pop 導航到新頁面，或者返回到上個頁面。
• canPop 判斷是否能夠導航到新頁面
• maybePop 可能會導航到新頁面
• popAndPushNamed 指定一個路由路徑，並導航到新頁面。
• popUntil 反覆執行pop 直到該函數的參數predicate返回true爲止。
• pushAndRemoveUntil 將給定路由推送到Navigator，刪除先前的路由，直到該函數的參數predicate返回true爲止。
• pushNamed 將命名路由推送到Navigator。
• pushNamedAndRemoveUntil 將命名路由推送到Navigator，刪除先前的路由，直到該函數的參數predicate返回true爲止。
• pushReplacement 路由替換。
• pushReplacementNamed 這個也是替換路由操做。推送一個命名路由到Navigator，新路由完成動畫以後處理上一個路由。
• removeRoute 從Navigator中刪除路由，同時執行Route.dispose操做。
• removeRouteBelow 從Navigator中刪除路由，同時執行Route.dispose操做，要替換的路由是傳入參數anchorRouter裏面的路由。
• replace 將Navigator中的路由替換成一個新路由。
• replaceRouteBelow 將Navigator中的路由替換成一個新路由，要替換的路由是是傳入參數anchorRouter裏面的路由。

push

// 不傳參
Navigator.push(
    context,
    new MaterialPageRoute(builder: (context) => new SecondScreen()),
);

//傳參
Navigator.push(
  context,
  new MaterialPageRoute(
    builder: (context) => new ContentScreen(articles[index]),
  ),
);
// 不一樣寫法
Navigator.push<String>(context, new MaterialPageRoute(
  builder: (BuildContext context) {
    return new Add(title: i.toString());
  },
));
// 接收
final Article article;
ContentScreen(this.article);

final String title;   // 儲存傳遞過來的參數
Add({this.title});
複製代碼

pop

// 不傳參
Navigator.pop(context);
// 傳參
Navigator.pop(context, 'Like');
// 接收
void add() async{
    String result = await Navigator.push(context, MaterialPageRoute(
      builder: (BuildContext context) {
        return new Add();
      },
    ));
    
    print(result);
}
複製代碼

定製路由動畫

onTap: () async {
  String result = await Navigator.push(
      context,
      new PageRouteBuilder(
        transitionDuration: const Duration(milliseconds: 1000),
        pageBuilder: (context, _, __) =>
            new ContentScreen(articles[index]),
        transitionsBuilder:
            (_, Animation<double> animation, __, Widget child) =>
                new FadeTransition(
                  opacity: animation,
                  child: new RotationTransition(
                    turns: new Tween<double>(begin: 0.0, end: 1.0)
                        .animate(animation),
                    child: child,
                  ),
                ),
      ));

  if (result != null) {
    Scaffold.of(context).showSnackBar(
      new SnackBar(
        content: new Text("$result"),
        duration: const Duration(seconds: 1),
      ),
    );
  }
},
複製代碼

命名導航器路由(MaterialApp)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Navigation',
      initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/': (BuildContext context) => new ArticleListScreen(),
        '/new': (BuildContext context) => new NewArticle(),
      },
    );
  }
}

// 跳轉
Navigator.of(context).pushNamed('/new');
Navigator.pushNamed(context, '/b');
複製代碼

pushNamed

普通跳轉

pushReplacementNamed

跳轉新頁面而且替換原頁面，好比登陸頁跳轉主頁, 當新的頁面進入後，以前的頁面將執行dispose方法

Navigator.of(context).pushReplacementNamed('/home');
複製代碼

pushReplacement

同pushReplacementNamed 寫法不一樣 可傳遞參數

Navigator.of(context).pushReplacement(new MaterialPageRoute(builder: (context) => new Home()));
複製代碼

popAndPushNamed

銷燬當前頁面並跳轉指向新的頁面 動畫不太友好

pushNamedAndRemoveUntil

跳轉到新的路由，而且關閉給定路由的以前的全部頁面

指將制定的頁面加入到路由中，而後將其餘全部的頁面所有pop, (Route route) => false將確保刪除推送路線以前的全部路線。 這時候將打開一個新的screen4頁面

Navigator.of(context).pushNamedAndRemoveUntil('/home', (route) => route == null);

// 到red爲止
Navigator.of(context).pushNamedAndRemoveUntil('/home', ModalRoute.withName('/red'));
複製代碼

pushAndRemoveUntil

同pushNamedAndRemoveUntil 寫法不一樣 可傳遞參數

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context) => new Home()), ModalRoute.withName('/home'));
複製代碼

popUntil

pop直到...爲止

Navigator.of(context).popUntil(ModalRoute.withName('/red'));
複製代碼

傳參onGenerateRoute

onGenerateRoute ： 生成路由的回調函數，當導航的命名路由的時候，會使用這個來生成界面

// 跳轉
Navigator.of(context).pushNamed('/add/' + i.toString());

// 定義
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'TODO',
      theme: new ThemeData(
        primaryColor: Colors.purple,
      ),
      home: new Home(),
      routes: <String, WidgetBuilder>{
        '/add': (context) => new Add()
      },
      onGenerateRoute: (RouteSettings settings) {
        print(settings);
        WidgetBuilder builder;
        if (settings.name == '/') {
          builder = (BuildContext context) => new Add();
        } else {
          String param = settings.name.split('/')[2];
          builder = (BuildContext context) => new Add();
        }

        return new MaterialPageRoute(builder: builder, settings: settings);
      }
    );
  }
}
複製代碼

MaterialPageRoute

屬於MaterialApp下面的一個路由方法