flutter使用动态路由传参的最小案例

拼搏现实的明天。 2024-02-05 11:17 11阅读 0赞

flutter中使用动态路由传递参数的封装案例，子组件页面只需要接收arguments参数即可，参数是一个map，里面包含有所需要的参数，类似于json。在MaterialApp中配置onGenerateRoute，然后动态判断传递参数：

routes列表：

// 命名路由传参
        Map routes = {
          "/home": (content) => Home(),
          "/search": (context) => SearchPage(),
          // 传递参数的形式
          "/store": (context, {arguments}) => Store(arguments: arguments)
        };

onGenerateRoute函数：

onGenerateRoute: (RouteSettings settings) {
            // 获取声明的路由页面函数
            var pageBuilder = routes[settings.name];
            if (pageBuilder != null) {
              if (settings.arguments != null) {
                // 创建路由页面并携带参数
                return MaterialPageRoute(
                    builder: (context) =>
                        pageBuilder(context, arguments: settings.arguments));
              } else {
                return MaterialPageRoute(
                    builder: (context) => pageBuilder(context));
              }
            }
            return MaterialPageRoute(builder: (context) => HomePage());
          }

然后在路由跳转的时候， 使用pushNamed进行传递参数：

Navigator.pushNamed(context, "/store",
                        arguments: {"title": "京东首页", "price": 100});

在子组件里面，定义并接收参数:

import "package:flutter/material.dart";
    
    class Store extends StatefulWidget {
      const Store({super.key, this.arguments});
    
      final dynamic arguments;
    
      @override
      State<Store> createState() => _StoreState();
    }
    
    class _StoreState extends State<Store> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(
                "${widget.arguments != null ? widget.arguments['title'] : "ThirdPage"}"),
          ),
          body: Center(
            child: ElevatedButton(
              child: Text("返回上一家"),
              onPressed: () {
                print("返回上一家");
                Navigator.pop(context);
              },
            ),
          ),
        );
      }
    }

最后的优化，可以将route封装成一个dart包，然后引入到materialApp中，让逻辑更清晰：

![bc4a6411117d4fd598c4bc48de3ef5b8.png][]

router.dart源代码：

import "package:flutter/material.dart";
    import "../main.dart";
    import "../pages/home.dart";
    import "../pages/search.dart";
    import "../pages/store.dart";
    
    // 命名路由传参
    Map routes = {
      "/home": (content) => Home(),
      "/search": (context) => SearchPage(),
      "/store": (context, {arguments}) => Store(arguments: arguments)
    };
    
    // 定义一个函数，并返回MaterialPageRoute
    var onGenerateRoute = (RouteSettings settings) {
      var pageBuilder = routes[settings.name];
      if (pageBuilder != null) {
        if (settings.arguments != null) {
          // 创建路由页面并携带参数
          return MaterialPageRoute(
              builder: (context) =>
                  pageBuilder(context, arguments: settings.arguments));
        } else {
          return MaterialPageRoute(builder: (context) => pageBuilder(context));
        }
      }
      return MaterialPageRoute(builder: (context) => HomePage());
    };

在materialApp中引入：

![77670a7be33b48648b3135a32b9158cb.png][]

最后的效果图：

![18fc0d5c629b4201b5cd263de930cd6d.png][]

[bc4a6411117d4fd598c4bc48de3ef5b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/01f669b87a80473699d90ee63a1d6ba6.png
[77670a7be33b48648b3135a32b9158cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/98ca297e4ead43d3b01a52389b29e02f.png
[18fc0d5c629b4201b5cd263de930cd6d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/5016769fa4aa494bbfb0f7bed09b5cc1.png