『Flutter』导航器
原创
1.前言
在上篇文章中，介绍了Flutter中常用的组件之表单组件，本文将继续介绍Flutter中常用的组件之导航器。
2.导航器
2.1.导航器简介
Flutter 的导航器（Navigator）是用于在应用中管理页面（也称为路由）堆栈的一个关键组件。Navigator 提供了一种管理屏幕之间的转换的方式，例如通过压入（pushing）新页面或弹出（popping）现有页面。
堆栈结构
例如我们要显示 b 页面，那么就会将 a 页面压入堆栈，然后显示 b 页面，当我们点击 b 页面的返回按钮时，就会将 b 页面弹出堆栈，然后显示 a 页面。
2.2.常用方法和属性
- push: 将新路由压入堆栈，通常用于导航到新页面。
- pop: 从堆栈中移除当前路由，通常用于返回上一个页面。
- of: 用于获取与特定
BuildContext相关联的最近的Navigator实例。 - pushNamed: 使用路由名称将新路由压入堆栈，通常与路由表结合使用。
- popAndPushNamed: 弹出当前路由，并将命名路由压入堆栈。
- pushReplacement: 替换当前路由，新路由进入堆栈时旧路由退出。
2.3.示例代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: FirstScreen(),
);
}
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('First Screen')),
body: Center(
child: ElevatedButton(
child: Text('Navigate to second screen'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second Screen')),
body: Center(
child: ElevatedButton(
child: Text('Go back'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}2.4.运行效果
在这个例子中，创建了两个简单的页面，第一个页面包含一个按钮，点击按钮后会跳转到第二个页面，第二个页面包含一个按钮，点击按钮后会返回到第一个页面。
通过 Navigator.push 与 MaterialPageRoute 的方式进行页面跳转，跳转到目标页面左上角会有一个返回按钮，点击返回按钮也会返回到上一个页面，这个返回按钮是 Flutter 自动添加的，我们不需要手动添加。
3.参考资料
End
- 🐤如果您对本文有任何疑问或想法，请在评论区留言，我将很乐意与您交流。
- 🐰您的每一条评论对我都至关重要，我会尽快给予回复。
- 🎈如果您觉得这篇文章对您有所启发或帮助，请不吝赞赏、收藏或分享。
- 🎁您的每一个动作都是对我创作的最大鼓励和支持。
- 👍谢谢您的阅读和陪伴！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录