Flutter路由

main文件

初始化路由

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       // 取消debug标志
      debugShowCheckedModeBanner: false,
      // 设置底部导航栏
      home: BottomNavigator(),
      // 设置初始路由
      initialRoute: "/",
      // 添加路由文件
      onGenerateRoute: onGenerateRoutes,
    );
  }
}

底部导航栏

class BottomNavigator extends StatefulWidget {
  // 添加传值
  final int index;
  // 默认传值为0,也就是index是0
  const BottomNavigator({super.key, this.index = 0});

  @override
  State<BottomNavigator> createState() => _BottomNavigatorState();
}

class _BottomNavigatorState extends State<BottomNavigator> {
  // 当前选择
  late int _currentIndex;
    
  // 添加路由body文件
  static final List<Widget> _page = [
    Homepage(),
    Classificationpage(),
    Shoppage(),
    TrustPage(),
    Mepage()
  ];

  @override
  void initState() {
    super.initState();
    // 跳转传入
    _currentIndex = widget.index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 默认body
      body: _page[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            label: '首页',
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            label: '分类',
            icon: Icon(Icons.type_specimen),
          ),
          BottomNavigationBarItem(
            label: '值得买',
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(
            label: '购物车',
            icon: Icon(Icons.shop),
          ),
          BottomNavigationBarItem(
            label: '我的',
            icon: Icon(Icons.person),
          ),
        ],
        // 添加选择时颜色
        selectedItemColor: Colors.red,
        // 未选择时颜色
        unselectedItemColor: Colors.grey,
        // tab大于4的时候必须添加
        type: BottomNavigationBarType.fixed,
        // 选择时下标
        currentIndex: _currentIndex,
        // 点击事件
        onTap: (index) {
          setState(() {
            // 点击传入
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

路由文件

// 注册页面
Map routes = {
   // 不传参
  "/": (context) => const Homepage(),
   // 不传参
  "/mepage":(context)=> const Mepage(),
   // 不传参
  "/shopPage":(context) => const Shoppage(),
   // 不传参
  "/trustPage":(context) => const TrustPage(),
  // 不传参
  "/classificationpage":(context)=>const Classificationpage()，
  // 传参
  "/detailspage":(context,{arguments})=>Detailspage(arguments: arguments)
};

var onGenerateRoutes = (RouteSettings settings) {
  final String? name = settings.name;
  final Function? pageContentBuider = routes[name];
   
   // 传入页面不能为空
  if (pageContentBuider != null) {
     // 传值是否为空
    if (settings.arguments != null) {
      // 需要传值
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuider(context, arguments: settings.arguments));
      return route;
    } else {
      // 不需要传值
      final Route route = MaterialPageRoute(
          builder: (context) => pageContentBuider(context));
      return route;
    }
  }
  return null;
};

tab跳转

 Navigator.of(context).pushAndRemoveUntil(
     MaterialPageRoute(builder: (BuildContext context) {
         // 传入tab下标
         return const BottomNavigator(index:0);
}), (route) => false);

命名路由

 Navigator.pushNamed(context, "/detailspage");

命名路由传参

Navigator.pushNamed(context, "/detailspage",arguments: {"title":"张三"});

接收参数

class Detailspage extends StatefulWidget {
   // 定义接收参数变量
  final Map arguments;
  // 设置传参
  const Detailspage({super.key, required this.arguments});

  @override
  State<Detailspage> createState() => _DetailspageState();
}

class _DetailspageState extends State<Detailspage> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // 打印参数
    print(widget.arguments);
  }

  @override
  Widget build(BuildContext context) {
    return Material();
  }
}

返回上一步

class Detailspage extends StatefulWidget {
  const Detailspage({super.key});

  @override
  State<Detailspage> createState() => _DetailspageState();
}

class _DetailspageState extends State<Detailspage> {
 
  @override
  Widget build(BuildContext context) {
    return Material(
      child: TextButton(
          onPressed: () {
            // 返回
            Navigator.pop(context);
          },
          child: Text("返回")),
    );
  }
}