记录Flutter---使用路由监听来实现命名路由跳转和传参

第一次接触flutter，被参数传递弄疯了，按照vue的套路是拿不到参数，看官方也讲的迷迷糊糊的，头大，这个是我记录一下使用命名路由传参的顺序。。。我真菜。。。。。

1、抽离routes

    import 'package:flutter/material.dart';
    //配置路由
    import '../pages/tabBar/tabs.dart';
    import '../pages/view/detail/detail.dart';

    final Map<String, WidgetBuilder> routes = {
      "/": (context, {arguments}) => Tabs(),
      "/detail": (context, {arguments}) => DetailPage(),
      ====================
      //路由监听
      "/detail": (context, {arguments}) => DetailPage(
        arguments: arguments,
      ),
    };
    ==================
    //监听路由跳转
    Route<dynamic> onGenerateRoute(RouteSettings settings) {
      return MaterialPageRoute(builder: (context) {
        String? name = settings.name;
        Function? pageContentBuilder = routes[name] as Function;
        if (pageContentBuilder != null) {
           //如果存在参数
          if (settings.arguments != null) {
            var arguments = settings.arguments;
            return pageContentBuilder(context, arguments: arguments);
          }
          //参数不存在时候
          else {
            return pageContentBuilder(context);
          }
        }
        return Tabs();
      });
    }

2、在main.dart中的配置

//引入route
import './routes/routes.dart';
void main() => runApp(MyAPP());

class MyAPP extends StatelessWidget {
  const MyAPP({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.red),
      initialRoute: "/",
      ================
      //使用routes，如果使用路由监听，就不用routes了
      //routes: routes,
      ===================
      //路由监听
       onGenerateRoute: onGenerateRoute
    );
  }
}

3、点击带按钮跳转到详情页面

 return Container(
        child: ElevatedButton(
          child: Text("设置跳转到详情页"),
          onPressed: () {
            //路由跳转，argument为传递的参数
            Navigator.pushNamed(context, "/detail", arguments: {"title": "设置"});
          },
    )

4、详情页接收

========================================
//不使用使用路由监听
class _DetailPageState extends State<DetailPage> {
  //定于用于接收的变量
  var arguments;
  @override
  Widget build(BuildContext context) {
  //接收传递过来的变量
    arguments = ModalRoute.of(context)!.settings.arguments;
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text("返回"),
        onPressed: () => Navigator.of(context).pop(),
      ),
      appBar: AppBar(
        //在text中使用
        title: Text(arguments["title"]),
      ),
      body: Text(arguments["title"]),
    );
  }
}

=======================================================
//使用路由监听来实现跳转
import 'package:flutter/material.dart';

class DetailPage extends StatefulWidget {
  Map arguments;
  DetailPage({Key? key, required this.arguments}) : super(key: key);
  @override
  State<DetailPage> createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  var arguments;

  @override
  Widget build(BuildContext context) {
    print(this.widget.arguments.toString() + "===2432");
    print(arguments);
    // arguments = ModalRoute.of(context)!.settings.arguments;
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text("返回"),
        onPressed: () => Navigator.of(context).pop(),
      ),
      appBar: AppBar(
          // title: Text(arguments["title"]),
          ),
      // body: Text(arguments["title"]),
    );
  }
}