Flutter——路由

• 基本路由

路由跳转
 Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
     return const SearchPage();  //SearchPage为组件
  }))
  
页面跳转携带参数  父组件NewsPage(title:"参数")
import 'package:flutter/material.dart';

class NewsPage extends StatefulWidget {
  final String title;
  const NewsPage({super.key,this.title="新闻"});

  @override
  State<NewsPage> createState() => _NewsPageState();
}

class _NewsPageState extends State<NewsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:  Text(widget.title), //获取newspage的title
      ),
      body: const Center(child: Text("新闻页面")),
    );
  }
}

返回上一页
Navigator.pop(context); 

• - 命名路由

先在main文件配置路由信息，然后使用 Navigator.pushNamed(context, "/news")进行跳转。
initialRoute: "/",
routes: {
  "/": (context) => const Tabs(),
  "/form": (context) => const FormPage(),
  "/search": (context) => const SearchPage(),
  "/news": (context) => const NewsPage(),
},

命名路由携带参数

可以先进行抽离成routers.dart 里面包括定义路由，再用函数来接收第二步,
onGenerateRoute = onGenerateRoute(RouteSettings settings)...

//1、定义路由
 Map routes = {
    "/": (context) => const Tabs(),
    "/form": (context, {arguments}) => FormPage(
          arguments: arguments,
        ),
    "/search": (context) => const SearchPage(),
    "/news": (context) => const NewsPage(),
 };
 
 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;
   },
3、路由跳转
 Navigator.pushNamed(context, "/shop",
     arguments: {"title": "命名路由传值", "aid": "20"});
4、返回上一级
Navigator.of(context).pop();

• 替换路由

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

• 返回根页面

Navigator.of(context).pushAndRemoveUntil(
    MaterialPageRoute(builder: (BuildContext context) {
     return const Tabs();
                }), (route) => false);

• 路由切换风格

在路由文件引入
import 'package:flutter/cupertino.dart';  //ios风格
import 'package:flutter/material.dart';   //安卓风格
CupertinoPageRoute  //ios左右切花页面风格
MaterialPageRoute   //安卓风格
var onGenerateRoute = (RouteSettings settings) {
  final String? name = settings.name;
  final Function? pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = CupertinoPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          CupertinoPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
  return null;
};