flutter路由配置_flutter 路由适配

路由配置文件

import 'package:flutter/material.dart';
import 'package:ichat/routers/pages/form_page.dart';
import 'package:ichat/routers/pages/person_page.dart';
import 'package:ichat/routers/pages/search_page.dart';
import 'package:ichat/routers/router_page.dart';
class RouteConfig {
 static String initRoute="/";
  static Map<String, WidgetBuilder> routes = {
    initRoute: (context) => const StaticRouterPage(),
    '/person': (context) => const PersonPage(),
    '/search': (context) => const SearchPage(),
    "/form": (context,{arguments}) => FormPage(arguments:arguments),
  };
  static var onGenerateRoute = (RouteSettings settings) {
    // print("$settings  ,name: ${settings.name} ,arguments: ${settings.arguments}");
//生成路由
    String? name = settings.name;
    var arguments = settings.arguments;
    Function? func = routes[name];
    if (func != null) {
      if (arguments == null) {
        return MaterialPageRoute(builder: (context) => func!(context));
      } else {
        return MaterialPageRoute(builder: (context) => func!(context, arguments));
      }
    }
    return null;
  };
}
 

程序启动主函数文件

 
import 'package:flutter/material.dart';
import 'package:ichat/routers/route_config.dart';
 
 
main(){
 
 
  runApp(
      MaterialApp(
        title: "dynamic router",
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primarySwatch: Colors.blue),
        // home: const StaticRouterPage(), //home和 initialRoute不能同时存在，否则会报错
        initialRoute: RouteConfig.initRoute,
        routes: RouteConfig.routes,
        onGenerateRoute: RouteConfig.onGenerateRoute,
      )
  );
 
 
}

路由使用

import 'package:flutter/material.dart';
import 'package:ichat/routers/pages/news_page.dart';
import 'package:ichat/routers/pages/person_page.dart';
import 'package:ichat/routers/pages/search_page.dart';
 
class StaticRouterPage extends StatefulWidget {
  const StaticRouterPage({super.key});
 
  @override
  State<StaticRouterPage> createState() => _StaticRouterPageState();
}
 
class _StaticRouterPageState extends State<StaticRouterPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("路由"),),
        body: Container(
            child: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            ElevatedButton(
                                onPressed: () {
                                  Navigator.of(context).push(MaterialPageRoute(
                                    builder: (context) => const SearchPage(),
                                  ));
                                },
                                child: Text("搜索")),
                            SizedBox(width: 20,),
                            ElevatedButton(
                                onPressed: () {
                                  Navigator.of(context).push(MaterialPageRoute(
                                    builder: (context) => const PersonPage(),
                                  ));
                                },
                                child: Text("我的")),
                            SizedBox(width: 20,),
                            ElevatedButton(
                                onPressed: () {
                                  Navigator.of(context).push(MaterialPageRoute(
                                    builder: (context) => const NewsPage(title: "国际小新闻",newsId: 20),
                                  ));
                                },
                                child: Text("新闻")),
                          ]),
                        SizedBox(height: 20,),
                      Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            ElevatedButton(
                                onPressed: () {
                                  Navigator.of(context).pushNamed("/search");
                                },
                                child: Text("搜索")),
                            SizedBox(width: 20,),
                            ElevatedButton(
                                onPressed: () {
                                  Navigator.of(context).pushNamed("/form",arguments: {
                                    "key1":"value1",
                                    "key2":"value2",
                                  });
                                },
                                child: Text("form")),
                            SizedBox(width: 20,),
                            ElevatedButton(
                                onPressed: () {
                                  Navigator.pushNamed(context,"/person");
                                },
                                child: Text("我的")),
                            // SizedBox(width: 20,),
                            // ElevatedButton(
                            //     onPressed: () {
                            //       Navigator.of(context).push(MaterialPageRoute(
                            //         builder: (context) => const NewsPage(title: "国际小新闻",newsId: 20),
                            //       ));
                            //     },
                            //     child: Text("新闻")),
                          ]),
                    ]
                )
 
                )
            )
 
    );
  }
}

路由使用的几种方式

1、push不带参数

Navigator.of(context).push(MaterialPageRoute(
                                    builder: (context) => const PersonPage(),
                                  ));

2、push带参数

Navigator.of(context)
         .push(MaterialPageRoute(builder: (context) => const NewsPage(title: "国际小新闻",newsId: 20),
                                  ));

3、通过命名路由配置pushNamed

Navigator.of(context).pushNamed("/search");

4、 通过命名路由配置带参数pushNamed

Navigator.of(context).pushNamed("/form",arguments: {
  "key1":"value1",
  "key2":"value2",
});

5、路由返回

Navigator.of(context).pop()

6、pushReplacementNamed

Navigator.of(context).pushReplacementNamed("/search");