| title | description | prev | next | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
导航到一个新页面和返回 |
How to navigate between routes |
|
|
// 以上内容为元数据，无需翻译
Most apps contain several screens for displaying different types of information. For example, an app might have a screen that displays products. Users can then tap the image of a product to get more detailed information on a new screen.
我们通常会用“屏”来表示应用的不同页面（界面），比如，某个应用有一“屏”展示商品列表， 当用户点击某个商品的图片，会跳到新的一“屏”展示商品的详细信息。
// 以上为普通文字翻译格式。请注意，一个换行表示 Markdown 里一行结束，所以请在换行处新起一行写它的中文翻译。 // 中文翻译可以不必拘泥于一行展示，同时，请注意使用中文的标点符号。
{{site.alert.info}}
Terminology: In Flutter, screens and pages are called routes. The remainder of this doc refers to routes.
术语: 在 Flutter 中，屏 (screen) 和 页面 (page) 都叫做 路由 (route)， 在下文中统称为“路由 (route)”。
{{site.alert.end}}
// 因为这里只涉及到 site.alert 内容翻译，故需要将内容新起一行，然后在下面继续换行写下其中文翻译。
In Android, a route is equivalent to an Activity. In iOS, a route is equivalent to a ViewController. In Flutter, a route is just a widget.
在 Android 开发中，Activity 相当于“路由”，在 iOS 开发中，ViewController 相当于“路由”。 在 Flutter 中，“路由”也是一个 Widget。
How do you navigate to a new route? By using the
Navigator.
怎么样从一个“路由”跳转到新的“路由“呢？你需要使用 Navigator 类。
// 请保持中文翻译中，类似 {{site.api}} 动态调用命令为原始格式输出。
The next few sections show how to navigate between two routes, using these steps:
下面来展示如何在两个路由间跳转，总共分三步：
-
Create two routes
创建两个路由
-
Navigate to the second route using Navigator.push()
用 Navigator.push() 跳转到第二个路由
-
Return to the first route using Navigator.pop()
用 Navigator.pop() 回退到第一个路由
// 列表的翻译为，加入换行，然后中文和英文保持同样的缩进格式。 // 遇到任何问题，请在微信群里随时提问，感谢！
First, create two routes to work with. Since this is a basic example, each route contains only a single button. Tapping the button on the first route navigates to the second route. Tapping the button on the second route returns to the first route.
首先，我们来创建两个路由。这是个最简单的例子，每个路由只包含一个按钮。 点击第一个路由上的按钮会跳转到第二个路由，点击第二个路由上的按钮，会回退到第一个路由。
First, set up the visual structure:
首先来编写界面布局代码：
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: RaisedButton(
child: Text('Open route'),
onPressed: () {
// Navigate to second route when tapped.
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
onPressed: () {
// Navigate back to first route when tapped.
},
child: Text('Go back!'),
),
),
);
}
}To switch to a new route, use the
Navigator.push()
method. The push() method adds a Route to the stack of routes managed by
the Navigator. Where does the Route come from?
You can create your own, or use a
MaterialPageRoute,
out of the box. MaterialPageRoute is handy because it transitions to the
new route using a platform-specific animation.
使用 Navigator.push()方法跳转到新的路由。
push() 方法会添加一个 Route 对象到导航器的堆栈上。 那么这个 Route 对象是从哪里来的呢？
你可以自己实现一个，或者直接使用 MaterialPageRoute类。
使用 MaterialPageRoute 是非常方便的，框架已经为我们实现了和平台原生类似的切换动画。
In the build() method of the FirstRoute widget, update the onPressed()
callback:
在 FirstRoute widget 的 build() 方法中，我们来修改 onPressed() 回调函数：
// 位于 FirstRoute widget (Within the `FirstRoute` widget)
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
}How do you close the second route and return to the first? By using the
Navigator.pop()
method. The pop() method removes the current Route from the stack of
routes managed by the navigator.
怎么关闭第二个路由回退到第一个呢? 使用
Navigator.pop()
方法，pop() 方法会从导航器堆栈上移除 Route 对象。
To implement a return to the original route, update the onPressed()
callback in the SecondRoute widget:
我们来修改 SecondRoute widget 的 onPressed() 回调函数，实现返回第一个路由的功能：
// 位于 SecondRoute widget (Within the SecondRoute widget)
onPressed: () {
Navigator.pop(context);
}import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
title: 'Navigation Basics',
home: FirstRoute(),
));
}
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Route'),
),
body: Center(
child: RaisedButton(
child: Text('Open route'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
),
),
);
}
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}{% comment %} We need a new GIF that shows "Route" instead of "Screen". {% endcomment %}
{:.site-mobile-screenshot}