Flutter 零基础入门（四十二）：Flutter 路由与导航进阶 —— 命名路由与参数传递实战

LarryLan

发布于 2026-03-05 17:19:50

2290

Flutter 路由与导航进阶 —— 命名路由与参数传递实战

到目前为止，你已经掌握了：

多页面 App 框架（TabBar + BottomNavigationBar）
动态列表刷新与分页
异步数据与状态刷新
App 美化（主题、统一颜色、字体）

但是在复杂 App 中，页面跳转与参数传递是必备技能。

Flutter 提供了两种跳转方式：

匿名路由（直接 Widget）
命名路由（通过路由表）

本篇我们重点学习 命名路由 + 参数传递，更适合大型项目。

一、命名路由基础

1️⃣ 配置 routes

在 MaterialApp 中：

MaterialApp(
  title: '路由示例',
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
  },
);

📌 说明：

initialRoute → 初始页面
routes → 路由表
键 → 路由名称，值 → 对应 Widget 构建函数

2️⃣ 页面跳转

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/detail');
  },
  child: Text('跳转到详情页'),
)

📌 跳转方式简洁，方便统一管理页面

二、命名路由传递参数

1️⃣ pushNamed 带参数

Navigator.pushNamed(
  context,
  '/detail',
  arguments: {'id': 1001, 'title': '详情页标题'},
);

2️⃣ 接收参数

在 DetailPage 中：

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map;
    final id = args['id'];
    final title = args['title'];

    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Text('接收到参数 id = $id'),
      ),
    );
  }
}

📌 ModalRoute.of(context)!.settings.arguments 获取传递参数

三、返回值获取

1️⃣ 返回上一页并传值

ElevatedButton(
  onPressed: () {
    Navigator.pop(context, '我是返回值');
  },
  child: Text('返回上一页'),
)

2️⃣ 接收返回值

void _openDetail() async {
  final result = await Navigator.pushNamed(
    context,
    '/detail',
    arguments: {'id': 1001, 'title': '详情页'},
  );
  print('返回值: $result');
}

📌 await → 等待页面返回结果 → 接收返回值

四、完整示例：列表跳转 + 参数传递 + 返回值

class HomePage extends StatelessWidget {
  final List<Map> items = List.generate(
    10,
    (index) => {'id': index, 'title': '条目 $index'},
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('首页列表')),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];
          return ListTile(
            title: Text(item['title']),
            onTap: () async {
              final result = await Navigator.pushNamed(
                context,
                '/detail',
                arguments: item,
              );
              if (result != null) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('返回值: $result')),
                );
              }
            },
          );
        },
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map;
    final id = args['id'];
    final title = args['title'];

    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context, '已阅读 id=$id');
          },
          child: Text('返回并传值'),
        ),
      ),
    );
  }
}

📌 功能总结：