Flutter踩坑之路（四）一路由與導航

我們前面幾篇部落格講了一下Flutter中元件和基本布局的一些知識，這篇部落格來講一下關于路由的一些知識。

Flutter中的路由通俗來講就是頁面的跳轉，Flutter中的跳轉是通過Navigator元件管理路由導航，并提供了管理堆棧的方法。如

Navigator.push和Navigator.pop。 

Flutter中給我們提供了兩種配置路由跳轉的方式:

1.基本路由

2.命名路由

基本路由的使用

我們通過一個執行個體來看一下基本路由的使用，我們先看一下效果：

示例代碼如下所示：

Navigator.push(context, MaterialPageRoute(
               builder: (context)=>ContainerDemo()
            ));
           

命名路由的使用

我們通過一個執行個體來看一下命名路由的使用，我們先看一下效果：

我們需要先配置路由，示例代碼如下:

initialRoute: '/',
      routes: {
        '/':(context)=>MnNavigatorDemo(),
        '/popup':(context) =>PopupMenuButtonDemo(),
        '/row': (context) => RowDemo(),
      },
           

注:initialRoute是預設展示的頁面

配置完路由以後，使用時，通過Navigator.pushNamed(context,"name")來導航。示例代碼如下:

Navigator.pushNamed(context, '/popup');
           

頁面跳轉發送資料

頁面跳轉的時候需要發送資料到第二個頁面，我們通過路由也可以傳遞資料

路由傳遞資料

1.基本路由傳遞資料

2.命名路由傳遞資料

基本路由傳遞資料

我們通過一個執行個體來看一下基本路由傳遞資料，我們先看一下效果：

示例代碼如下：

Navigator.push(context, MaterialPageRoute(
               builder: (context)=>ReceiveDataDemo(title: "收到了嗎",)//傳值
            ));
           

命名路由傳遞資料

我們通過一個執行個體來看一下命名路由傳遞資料，我們先看一下效果：

配置路由，示例代碼如下:

final routes = {
    '/': (context) => IntentNameNavigatorDemo(),
    '/popup': (context) => PopupMenuButtonDemo(),
    '/named_intent': (context, {arguments}) =>
        ReceiveNamedDataDemo(arguments: arguments),
  };
//固定寫法
var onGenerateRoute=(RouteSettings settings) {
      // 統一處理
      final String name = settings.name; 
      final Function pageContentBuilder = routes[name];
      if (pageContentBuilder != null) {
        if (settings.arguments != null) {
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        }else{
            final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context));
            return route;
        }
      }
};
           

跳轉傳值，示例代碼如下:

Navigator.pushNamed(context, '/named_intent',arguments: {
              "title":"命名路由傳值"
            });
           

接收參數，示例代碼如下:

child: Text('接收到的值是:${arguments['title']}'),
           

我們可以把命名路由單獨抽離成一個檔案，示例代碼如下:

final Map<String, Function> routes = {
    '/': (context) => IntentNameNavigatorDemo(),
    '/popup': (context) => PopupMenuButtonDemo(),
    '/named_intent': (context, {arguments}) =>
        ReceiveNamedDataDemo(arguments: arguments),
  };
};

var onGenerateRoute=(RouteSettings settings) {
        // 統一處理
        final String name = settings.name;   
        final Function pageContentBuilder = routes[name];        

        if (pageContentBuilder != null) {
          final Route route = MaterialPageRoute(
              builder: (context) =>
                  pageContentBuilder(context, arguments: settings.arguments));
          return route;
        }
};
           

頁面跳轉傳回資料

頁面跳轉的時候不僅僅要發送資料，有時候還需要從第二個頁面傳回資料。

關于頁面跳轉傳回資料，可以先看一下效果圖:

示例代碼如下:

Navigator.push(context, MaterialPageRoute(
                  builder: (context)=>ReturnDataDemo()
              )).then((data){
                setState(() {
                  backResult = data;
                });
              });

  Navigator.pop(context,"回傳的資料,收到了嗎");//回傳的值
           

到這裡，關于路由的知識就講解完畢了，希望大家多多支援。