Flutter---路由与导航

西西学代码2026-03-12 22:24

路由的概念

路由代表一个页面或屏幕，路由管理就是管理页面之间的跳转方式。

导航器（Navigator）的概念

Navigator是一个组件，它通过栈的数据结构在管理所有的路由

入栈（push):打开新页面，新页面成为栈顶

出栈（pop）:关闭当前页面，返回上一个页面

命名式路由

基本跳转

Dart 复制代码

// 打开新页面
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);

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

页面传参

Dart 复制代码

// 发送方
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(product: product),
  ),
);

// 接收方
class DetailPage extends StatelessWidget {
  final Product product;
  const DetailPage({required this.product});
}

返回数据给上一个页面

Dart 复制代码

// 在B页面返回数据
Navigator.pop(context, '这是返回的数据');

// 在A页面接收
final result = await Navigator.push(...);
print(result); // '这是返回的数据'

给路由命名，直接用名字跳转

首先在MaterialApp中注册路由表（给页面起名字）

Dart 复制代码

MaterialApp(
  initialRoute: '/', // 首页路由
  routes: {
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
    '/settings': (context) => SettingsPage(),
  },
)

使用命名路由跳转

Dart 复制代码

Navigator.pushNamed(context, '/detail');

// 带参数跳转
Navigator.pushNamed(
  context,
  '/detail',
  arguments: {'id': 123, 'title': '商品标题'},
);

// 接收参数
final args = ModalRoute.of(context)!.settings.arguments as Map;

高级栈操作

Dart 复制代码

// 替换当前页面-通常在路由栈顶页面替换
//比如有页面1，页面2（页面2在栈顶）。在页面2使用pushReplacementNamed进入页面3，那么现在路由栈里面就是页面1和页面3
Navigator.pushReplacementNamed(context, '/newPage');

// 弹出当前页面并推入新页面-与pushReplacementNamed功能类似，就是有出栈动画和入栈动画，而pushReplacementNamed只有入栈动画
Navigator.popAndPushNamed(context, '/newPage');

// 一直弹出直到满足条件
Navigator.popUntil(context, ModalRoute.withName('/home'));

// 推入新页面并移除之前所有页面（常用于登录后）
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false, // 移除所有
);