Flutter使用push pop方法及路由进行导航详解
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>正文</li><ul class="second_class_ul"><li>准备工作</li><li>第一种导航方式</li><li>第二种导航方式</li></ul></ul></div><p class="maodian"></p><h2>正文</h2><p>在 <code>Web/Mobile</code> 应用程序中，导航是一个很重要的特性，因为它允许你从一个页面跳转到另一个页面。</p>
<p>在 <code>flutter</code> 应用程序中，我们可以使用 <code>push(), pop()</code> 方法实现导航，或者编写我们自己的路由。</p>
<p class="maodian"></p><h3>准备工作</h3>
<p>我们假设 <code>FirstScreen</code> 和 <code>SecondScreen</code> 是两个不同的类，分别在各自的 <code>FirstScreen.dart</code> 和 <code>SecondScreen.dart</code> 文件内。</p>
<p><code>FirstScreen.dart</code> 文件如下：</p>
<div class="jb51code"><pre class="brush:cpp;">import 'package:flutter/material.dart';
import 'package:navigation/SecondScreen.dart';
class FirstScreen extends StatefulWidget {
@override
_FirstScreenState createState() => _FirstScreenState();
}
class _FirstScreenState extends State<FirstScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("First Screen"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Hello to First Screen",
style: TextStyle(
fontSize: 20,
),
),
SizedBox(
height: 10,
),
Center(
child: RaisedButton(
onPressed: () {},
child: Text(
"First Screen",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
),
),
),
],
),
);
}
}
</pre></div>
<p><code>SecondScreen.dart</code> 文件如下：</p>
<div class="jb51code"><pre class="brush:cpp;">import 'package:flutter/material.dart';
class SecondScreen extends StatefulWidget {
@override
_SecondScreenState createState() => _SecondScreenState();
}
class _SecondScreenState extends State<SecondScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Screen"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Welcome on Second Screen",
style: TextStyle(
fontSize: 20,
),
),
SizedBox(
height: 10,
),
Center(
child: RaisedButton(
onPressed: () {},
child: Text(
"Second Screen",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
),
),
),
],
),
);
}
}
</pre></div>
<p><code>main.dart</code> 的内容如下：</p>
<div class="jb51code"><pre class="brush:cpp;">import 'package:flutter/material.dart';
import 'package:navigation/FirstScreen.dart';
void main() {
runApp(MaterialApp(
home: FirstScreen()));
}
</pre></div>
<p class="maodian"></p><h3>第一种导航方式</h3>
<p>我们可以使用 <code>Navigator.push()</code> 方法和 <code>Navigator.pop()</code> 方法进行页面/屏幕导航。</p>
<p>为了触发 <code>RaisedButton</code> 事件后从 <code>FirstScreen</code> 导航到 <code>SecondScreen</code>。我们需要在 <code>FirstScreen</code> 的 <code>build()</code> 方法里面的 <code>RaisedButton</code> 中 <code>onPressed(){}</code> 添加如下的事件：</p>
<div class="jb51code"><pre class="brush:cpp;">onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));
},
</pre></div>
<p><code>Navigator.push()</code> 方法将给定的路由推送到路由栈中，这个路由是由 <code>Navigator</code> 类来维护。</p>
<p>现在，我们可以使用 <code>MaterialPageRoute</code>路由 或者我们可以创建自己的路由。</p>
<p>将一个新的路由添加到栈中，我们可以通过一个 <code>builder</code> 函数创建一个 <code>MaterialPageRoute</code> 的实例。<code>builder</code> 函数可以创建我们想在页面中展示的挂件。</p>
<p><code>(context) => SecondScreen()</code> 指向 <code>SecondSreen</code> 上下文。</p>
<p>为了通过 <code>RaisedButton</code> 点击事件，从 <code>SecondScreen</code> 返回到 <code>FirstScreen</code> 页面：我们需要在 <code>SecondScreen</code> 页面中添加如下的内容：</p>
<div class="jb51code"><pre class="brush:cpp;">onPressed: () {
Navigator.pop(context);
}
</pre></div>
<p>这里的 <code>pop()</code> 方法是将导航栈中最新的路由弹出。</p>
<p class="maodian"></p><h3>第二种导航方式</h3>
<p>通过 <code>MaterialApp</code> 构造函数额外提供的属性：<code>initialRoute</code> 和 <code>routes</code>。</p>
<div class="jb51code"><pre class="brush:cpp;">import 'package:flutter/material.dart'
import 'package:navigation/FirstScreen.dart'
import 'package:navigation/SecondScreen.dart'
void main() {
runApp(MaterialApp(
initialRoute: '/firstScreen',
routes: {
'/firstScreen': (context) => FirstScreen(),
'/secondScreen': (context) => SecondScreen(),
},
home: FirstScreen(),
));
}
</pre></div>
<p><code>initialRoute</code> 属性定义应用应该从哪个路由开始。<code>routes</code> 属性定义有哪些路由是可以获取的，且路由导航到哪些挂件。</p>
<p>这里，当路由导航到 <code>/firstScreen</code> 时，<code>FirstScreen</code> 挂件将构建。</p>
<p>现在，我们将 <code>FirstScreen</code> 的 <code>onPressed(){}</code> 的方法更改如下：</p>
<div class="jb51code"><pre class="brush:cpp;">onPressed: () {
Navigator.pushNamed(context, '/secondScreen');
}
</pre></div>
<p>这里使用命名路由 <code>Navigator.pushNamed()</code> 导航到第一个页面。</p>
<p>在 <code>SecondScreen</code> 的 <code>onPressed(){}</code> 事件中，还是保留使用 <code>Navigator.pop()</code> 方法：</p>
<div class="jb51code"><pre class="brush:cpp;">onPressed: () {
Navigator.pop(context);
}
</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202209/2022092908505001.jpg" /></p>
<p>以上就是Flutter使用push pop方法及路由进行导航详解的详细内容，更多关于Flutter push pop方法路由导航的资料请关注琼殿技术社区其它相关文章！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>flutter的导航和路由使用示例详解</li><li>Flutter GetPageRoute实现嵌套导航学习</li><li>Flutter自定义底部导航栏的方法</li><li>Flutter定义tabbar底部导航路由跳转的方法</li><li>Flutter实现顶部导航栏功能</li><li>详解flutter如何实现局部导航管理</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]