Flutter 命名路由及传值

最新推荐文章于 2025-06-12 08:10:43 发布

原创

最新推荐文章于 2025-06-12 08:10:43 发布 · 置顶 · 2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter命名路由及传值

本文介绍了在Flutter项目中使用命名路由进行页面跳转和参数传递的方法。首先在main.dart中配置命名路由，然后在需要跳转的页面如Home.dart中调用这些命名路由。同时，通过onGenerateRoute设置实现参数传递。在Home.dart中传入参数，并在Search.dart页面接收和使用这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

命名路由是区别于基本路由的一种存在，方便于大型项目中路由的统一管理，现在，在前面基本路由的项目基础上实现实现命名路由。

使用步骤

路由配置

命名路由在使用前，需要在根组件main.dart中进行简单的配置（前面是页面路径，后面是页面中的组件名称）：
在这里插入图片描述

main.dart 主要代码：

import 'package:flutter/material.dart';

import 'pages/Tabs.dart';
import 'pages/Form.dart';
import 'pages/Search.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Tabs(),
      routes: {
        '/form':(context)=>FormPage(),
        '/search':(context)=>SearchPage(),
      }
    );
  }
}