Flutter 路由表搭建、路由跳转&传参&获参

1、路由表文件：

import 'package:app/src/ui/home.dart';
import 'package:app/src/ui/wallpaper/wallpaper.dart';
import 'package:flutter/material.dart';
import 'package:app/src/ui/mine/mine.dart';
import 'package:app/src/ui/welcome/welcome.dart';
import 'package:app/src/ui/index/index.dart';

var router = {
    "/home": (context, {arguments}) => Home(tabIndex: arguments),//tabIndex即该页面定义的参数
    "/": (context) => const Index(),
    "/wallpaper": (context) => const Wallpaper(),
    "/mine": (context) => const Mine(),
    "/welcome": (context) => const Welcome()
};

var onGenerateRoute = (RouteSettings settings) {
final String? name = settings.name;
final Function pageContentBuilder = router[name] as Function;

if (settings.arguments != null) {
    // 有路由参数时
    final Route route = MaterialPageRoute(
        builder: (context) =>
            pageContentBuilder(context, props: settings.arguments));
    return route;
} else {
    // 无参数时
    final Route route =
        MaterialPageRoute(builder: (context) => pageContentBuilder(context));
    return route;
    }
};

2：路由注册main.dart

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

class App extends StatelessWidget {
const App({super.key});

@override
Widget build(BuildContext context) {
    return MaterialApp(
          initialRoute: '/home',
          onGenerateRoute: onGenerateRoute, //此处路由拦截注册
          debugShowCheckedModeBanner: false, //去处右上角debug标识
          theme: ThemeData.light(), //设置页面主题 dark | light
        );
    }
}

路由配置至此完成了

页面间相互跳转 传参以及获取参数

page1(index.dart)：（传参页面）

    Navigator.of(context).push(MaterialPageRoute(
        builder: ((context) => const Home(
          tabIndex: 2,//tabIndex 就是参数
        )),
    ))

page2(home.dart)：（获参页面）

    const Home({super.key, this.tabIndex});

    final int? tabIndex;//表示tabIndex非必传参数

    @override
    void initState() {
        super.initState();
        var tabIndex = widget.tabIndex;
        _currentIndex = tabIndex ?? 0;
    }