Flutter頁面跳轉

使用Flutter切換到一個新介面，並且能跳回來

在一個App中一般會有很多頁面，這些頁面需要相互跳轉，傳遞資訊並進行交換。比如列表要跳到詳情，活動入口跳轉到活動頁面等等。Android中的頁面可以是Activity；iOS中使用ViewController。在Flutter中，是如何進行頁面跳轉的呢？

1、使用Navigator來切換頁面。

1. Navigator.push： 跳到另一個頁面
2. Navigator.pop： 從當前頁面回退到上一個頁面

首先需要建立兩個頁面，FirstPage和SecondPage。程式碼如下：

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  
    return Scaffold(appBar: AppBar(title: Text('First page'),),
      body: Center(child: RaisedButton(
          child: Text('Go to 2nd page'),
          onPressed: () {
            print('This is first page');
            // 執行想要的操作..........
            Navigator.push(context,
            MaterialPageRoute(builder: (context) => SecondPage()));
          }),),);
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    return Scaffold(appBar: AppBar(title: Text('Second page'),),
      body: Center(child: RaisedButton(
          child: Text("Go back"),
          onPressed: () {
            print('This is 2nd page');
            // 執行操作........
            Navigator.pop(context);
          }),),);
  }
}

如上面程式碼用Navigator.push跳轉去第二個介面，push方法會向棧中新增一個由Navigator管理的Route。push方法接受一個Route（暫稱為路由），這裡新建一個Route，使用用MaterialPageRoute。

在第二個頁面中用Navigator.pop回到第一個介面Navigator.pop會移除navigator管理的當前的路由（效果是移除當前介面）。

2、 使用路由統一管理跳轉

上面只有兩個頁面，所以直接在程式碼中實現跳轉就可以了。但是實際專案中會有很多頁面，如果每個頁面都這樣跳轉，就會顯的非常混亂，並且不能統一管理跳轉。
步驟：
1 註冊程式入口通過onGenerateRoute統一註冊路由
2 定義相應的頁面對應的路徑
3 根據路徑跳轉到對應的頁面
不多說，直接上程式碼：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<GlobalBloc, GlobalState>(builder: (_, state) {
      return MaterialApp(
            showPerformanceOverlay: state.showPerformanceOverlay,
            title: 'Flutter Widgets',
            debugShowCheckedModeBanner: false,
            onGenerateRoute: XRouter.generateRoute,
            theme: ThemeData(
              primarySwatch: state.themeColor,
              fontFamily: state.fontFamily,
            ),
            home: XSplash(),
      );
    });
  }

}

自定義XRouter類

class XRouter {
  static const String firstpage = 'firstpage';
  static const String secondpage = 'secondpage';

  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      //根據名稱跳轉相應頁面
      case firstpage:
        return Right2LeftRouter(child: FirstPage());
      case secondpage:
        return Right2LeftRouter(child: SecondPage());

      default:
        return MaterialPageRoute(
            builder: (_) => Scaffold(
                  body: Center(
                    child: Text('No route defined for ${settings.name}'),
                  ),
                ));
    }
  }
}

最後在頁面中使用

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  
    return Scaffold(appBar: AppBar(title: Text('First page'),),
      body: Center(child: RaisedButton(
          child: Text('Go to 2nd page'),
          onPressed: () {
            print('This is first page');
            // 執行想要的操作..........
            Navigator.of(context).pushReplacementNamed(XRouter.secondpage);
          }),),);
  }
}

後續。。。