Flutter 中的命名路由传值

一、Flutter 中的命名路由传值

官方文档：https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

Flutter 中的命名路由传值视频教程：https://www.bilibili.com/video/BV15P411P7DN?p=39

1.1、配置onGenerateRoute

import 'package:flutter/material.dart';
import './pages/tabs.dart';
import './pages/search.dart';
import './pages/form.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  //1、定义Map类型的routes
  Map routes = {
    '/': (contxt) => const Tabs(),
    '/search': (contxt) => const SearchPage(),
    '/form': (context, {arguments}) => FormPage(arguments: arguments),
  };
  MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
       initialRoute: '/',          
      //2、调用onGenerateRoute处理
      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;
          }
        }
        return null;
      },
    );
  }
}

1.2、定义页面接收arguments传参

import 'package:flutter/material.dart';

class FormPage extends StatefulWidget {
  final Map arguments;
  const FormPage({super.key,required this.arguments});

  @override
  State<FormPage> createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  @override
  void initState() {
    // TODO: implement initState
    
    print(widget.arguments);
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("我是一个Form表单演示页面"),
      ),
    );
  }
}

1.3、跳转页面实现传参

ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/form',arguments: {
                   "title": "搜索页面",
                });
              },
			 child: const Text("form")
)

二、Flutter 中的命名路由单独抽离到一个文件

2.1、新建routers/routers.dart 配置路由

import 'package:flutter/material.dart';
import '../pages/tabs.dart';
import '../pages/search.dart';
import '../pages/form.dart';

final Map<String,Function> routes = {
  '/': (contxt) => const Tabs(),
  '/search': (contxt) => const SearchPage(),
  '/form': (context, {arguments}) => FormPage(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;
    }
  }
  return null;
};

2.2、修改main.dart

import 'package:flutter/material.dart';
import './routers/routers.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {  
  const MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
       initialRoute: '/',                
      onGenerateRoute: onGenerateRoute,
    );
  }
}

2.3、实现页面跳转传值

ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/form',arguments: {
                   "title": "搜索页面",
                });
              },
			 child: const Text("form")
)