Flutter导航基础 #

一、Navigator #

1.1 基本概念 #

Navigator管理页面栈，通过push和pop操作实现页面跳转。

1.2 push操作 #

dart

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

1.3 pop操作 #

dart

Navigator.pop(context);

1.4 pushReplacement #

dart

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => HomePage()),
);

1.5 pushAndRemoveUntil #

dart

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => HomePage()),
  (route) => false,
);

二、页面传参 #

2.1 构造函数传参 #

dart

class DetailPage extends StatelessWidget {
  final String id;
  
  const DetailPage({required this.id});
  
  @override
  Widget build(BuildContext context) {
    return Text('Detail: $id');
  }
}

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailPage(id: '123')),
);

2.2 返回数据 #

dart

final result = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SelectPage()),
);

Navigator.pop(context, 'Selected Item');

三、总结 #

3.1 核心方法 #

方法	说明
push	入栈新页面
pop	出栈当前页面
pushReplacement	替换当前页面
pushAndRemoveUntil	清空栈并跳转

3.2 下一步 #

让我们学习命名路由！