Skip to content

Commit

Permalink
[完善翻译] src/content/cookbook/effects/nested-nav.md
Browse files Browse the repository at this point in the history
抱歉可能对一些专用名词的翻译存在错误
  • Loading branch information
Pleasurecruise committed Aug 26, 2024
1 parent 7bac0c9 commit 8620009
Showing 1 changed file with 58 additions and 57 deletions.
115 changes: 58 additions & 57 deletions src/content/cookbook/effects/nested-nav.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,13 @@ top-level `Navigator` widget. The list would be very long,
and many of these routes would
be better handled nested within another widget.

应用程序随着时间的推移会累积几十甚至上百个 routes。
其中有些 routes 作为 top-level (global) routes 是合理的。
例如,"/"、"profile"、"contact"、"social_feed"
这些都可能是应用中的 top-level routes 。
但是,想象一下,如果你在 top-level `Navigator` widget 中定义了所有可能的 routes ,
那么这个列表会非常长,其中很多 routes 更适合嵌套在另一个 widget 中处理。
随着应用程序的发展,它会累积几十甚至上百条路由。
虽然,有些路由可以作为顶层(全局)路由。
例如,“/”、“profile”、“contact”、“social_feed”
这些都是应用中可能存在的顶层路由。
但是,如果你在顶层 `Navigator` widget 中定义了所有可能的路由,
那么路由列表将会非常庞大,
实际上,许多路由更适合嵌套在其他 widget 中处理。

Consider an Internet of Things (IoT) setup flow for a wireless
light bulb that you control with your app.
Expand All @@ -39,15 +40,15 @@ in the setup flow. This delegation of navigation facilitates
greater local control, which is
generally preferable when developing software.

想象一个用于无线灯泡的物联网 (IoT) 设置流程,
设想一个用于无线灯泡的物联网 (IoT) 设置流程,
你可以通过应用程序来控制这个灯泡。
这个设置流程包括4个页面
寻找附近的灯泡、选择你要添加的灯泡、添加灯泡、然后完成设置
你可以在 top-level `Navigator` widget 中协调这些操作。
该设置流程包括 4 个页面
查找附近的灯泡、选择你要添加的灯泡、添加灯泡、最后完成设置
你可以在顶层 `Navigator` widget 中协调这些操作。
然而,更合理的做法是,
在你的 `SetupFlow` widget 中定义一个嵌套的 `Navigator` widget,
并让这个嵌套的 `Navigator` 负责管理设置流程中的这4个页面
这种导航方式有助于实现更大程度上的本地控制
并让这个嵌套的 `Navigator` 负责管理设置流程中的这 4 个页面
这种导航委托方式有助于加强局部控制
这在软件开发中通常是更可取的。

The following animation shows the app's behavior:
Expand All @@ -61,20 +62,20 @@ flow that maintains its own navigation nested beneath
the top-level `Navigator` widget.

在这个教程中,你将实现一个包含四个页面的物联网 (IoT) 设置流程,
该流程的 Navigation 将嵌套在 top-level `Navigator` widget 之下,并自行管理
该流程在顶层 `Navigator` widget 下嵌套了单独管理的导航

## Prepare for navigation

## 准备 Navigation
## 导航准备阶段

This IoT app has two top-level screens,
along with the setup flow. Define these
route names as constants so that they can
be referenced within code.

这个物联网 (IoT) 应用程序有两个 top-level 屏幕
这个物联网 (IoT) 应用程序包含两个顶层页面
以及一个设置流程。
将这些 routes 名称定义为常量,以便在代码中引用它们。
将这些路由名称定义为常量,以便在代码中引用它们。

<?code-excerpt "lib/main.dart (routes)"?>
```dart
Expand All @@ -97,12 +98,12 @@ that a route name is intended for the setup flow without
recognizing all the individual pages associated with
the setup flow.

主屏幕和设置屏幕的 routes 是使用静态名称引用的
然而,设置流程中的页面是通过两个路径组合来生成它们的 routes 名称的
主页和设置页的路由是使用静态名称引用的
然而,设置流程中的页面是通过两个路径组合来生成它们的路由名称的
首先是一个 `/setup/` 前缀,然后是具体页面的名称。
通过将这两个路径组合在一起,
你的 `Navigator` 可以判断出 routes 名称是为设置流程设计的
而无需识别与设置流程相关的所有单个页面
你的 `Navigator` 可以判断出某个路由名称是否属于设置流程
而无需识别所有与设置流程相关的具体页面

The top-level `Navigator` isn't responsible for identifying
individual setup flow pages. Therefore, your top-level
Expand All @@ -112,18 +113,18 @@ means that you can't use the `routes` property of your top-level
`Navigator`. Instead, you must provide a function for the
`onGenerateRoute` property.

Top-level `Navigator` 不负责识别具体的设置流程页面。
因此, top-level `Navigator` 需要解析传入的 routes 名称
顶层 `Navigator` 不负责识别具体的设置流程页面。
因此,顶层 `Navigator` 需要解析传入的路由名称
以识别设置流程的前缀。
由于需要解析 routes 名称
不能使用 top-level `Navigator``routes` 属性。
由于需要解析路由名称
不能使用顶层 `Navigator``routes` 属性。
相反,你必须为 `onGenerateRoute` 属性提供一个函数。

Implement `onGenerateRoute` to return the appropriate widget
for each of the three top-level paths.

实现 `onGenerateRoute` 函数,
以便为三个 top-level paths 中的每一个返回相应的 widget。
以便为三个顶层路径分别返回相应的 widget。

<?code-excerpt "lib/main.dart (OnGenerateRoute)"?>
```dart
Expand Down Expand Up @@ -161,17 +162,17 @@ This splitting of the route name is what allows the top-level
`Navigator` to be agnostic toward the various subroutes
within the setup flow.

请注意,home 和 settings routes 是与精确的 routes name 匹配的
然而,设置流程的 routes 条件只检查前缀
如果 routes name 包含设置流程的前缀,那么 routes name 的其余部分将被忽略
并传递给 `SetupFlow` widget 进行处理。
Routes name 的这种拆分使 top-level `Navigator` 可以不关注设置流程中的各个 subroutes
请注意,主页和设置页的路由是与精确的路由名称相匹配的
然而,设置流程的路由条件只检查前缀
如果路由名称包含设置流程的前缀,那么路由名称的其余部分将被忽略
并将其余部分传递给 `SetupFlow` widget 进行处理。
这种对路由名称的拆分方式,使顶层 `Navigator` 可以不关注设置流程中的各个子路由

Create a stateful widget called `SetupFlow` that
accepts a route name.

创建一个名为 `SetupFlow`statefull widget,
该 widget 接受一个 routes name 作为参数
创建一个名为 `SetupFlow`stateful widget,
该 widget 接收一个路由名称作为参数

<?code-excerpt "lib/setupflow.dart (SetupFlow)" replace="/@override\n*.*\n\s*return const SizedBox\(\);\n\s*}/\/\/.../g"?>
```dart
Expand All @@ -194,12 +195,12 @@ class SetupFlowState extends State<SetupFlow> {

## Display an app bar for the setup flow

## 为设置流程显示一个应用栏
## 为设置流程显示一个 AppBar

The setup flow displays a persistent app bar
that appears across all pages.

设置流程显示一个持久的应用栏,该应用栏会在所有页面上保持显示
设置流程显示一个始终可见的 AppBar,贯穿设置流程中的所有页面

Return a `Scaffold` widget from your `SetupFlow`
widget's `build()` method,
Expand Down Expand Up @@ -231,7 +232,7 @@ exiting the flow causes the user to lose all progress.
Therefore, the user is prompted to confirm whether they
want to exit the setup flow.

应用栏显示一个返回箭头
AppBar 显示一个返回箭头
当返回箭头被按下时,会退出设置流程。
然而,退出流程会导致用户丢失所有进度。
因此,系统会提示用户确认是否真的想要退出设置流程。
Expand All @@ -241,7 +242,7 @@ and ensure that the prompt appears when the user
presses the hardware back button on Android.

提示用户确认是否退出设置流程,
并确保在用户按下 Android 硬件返回按钮时也会出现该提示
并确保在用户按下 Android 设备上的实体返回按钮时也会出现该提示

<?code-excerpt "lib/prompt_user.dart (PromptUser)"?>
```dart
Expand Down Expand Up @@ -321,9 +322,9 @@ If the user presses **Leave**, then the setup flow pops itself
from the top-level navigation stack.
If the user presses **Stay**, then the action is ignored.

当用户点击应用栏中的返回箭头或按下 Android 硬件返回按钮时
当用户点击 AppBar 中的返回箭头或按下 Android 设备上的实体返回按钮时
会弹出一个警告对话框,确认用户是否要离开设置流程。
如果用户点击 **Leave**则设置流程会从 top-level navigation stack 中弹出
如果用户点击 **Leave**则设置流程会从顶层导航堆栈中移除
如果用户点击 **Stay**,则忽略该操作。

You might notice that the `Navigator.pop()`
Expand All @@ -334,17 +335,17 @@ the navigation stack, not the setup flow.

你可能会注意到,
**Leave****Stay** 按钮都会调用 `Navigator.pop()`
需要明确的是,这个 `pop()` 操作是将警告对话框从 navigation stack 中弹出
而不是设置流程
需要明确的是,这个 `pop()` 操作是将警告对话框从导航堆栈中移除
而不是移除设置流程

## Generate nested routes

## 生成 nested routes
## 创建嵌套路由

The setup flow's job is to display the appropriate
page within the flow.

设置流程的任务是显示流程中的适当页面
设置流程的任务是显示流程中相应的页面

Add a `Navigator` widget to `SetupFlow`,
and implement the `onGenerateRoute` property.
Expand Down Expand Up @@ -425,9 +426,9 @@ which includes the route's `name`.
Based on that route name,
one of four flow pages is returned.

`_onGenerateRoute` 函数的工作方式与 top-level `Navigator` 相同。
一个 `RouteSettings` 对象会传递给函数,其中包含 route's `name`
根据该 routes name ,将返回四个流程页面之一。
`_onGenerateRoute` 函数的工作方式与顶层 `Navigator` 相同。
该函数接收一个`RouteSettings` 对象,其中包含了路由名称 `name`
根据路由名称,将返回四个流程页面之一。

The first page, called `find_devices`,
waits a few seconds to simulate network scanning.
Expand All @@ -439,9 +440,9 @@ Therefore, in `_onDiscoveryComplete`, the `_navigatorKey`
instructs the nested `Navigator` to navigate to the
`select_device` page.

第一页称为 `find_devices`等待几秒钟以模拟网络扫描
第一页名为 `find_devices`它会等待几秒钟来模拟网络扫描
在等待时间结束后,页面会调用其回调函数。
在这种情况下,回调函数是 `_onDiscoveryComplete`
在这个教程中,回调函数是 `_onDiscoveryComplete`
设置流程识别到设备发现完成后,应该显示设备选择页面。
因此,在 `_onDiscoveryComplete` 中,
`_navigatorKey` 指示嵌套的 `Navigator` 导航到 `select_device` 页面。
Expand All @@ -457,7 +458,7 @@ the `_navigatorKey` instructs the nested `Navigator`
to navigate to the `"connecting"` page.

`select_device` 页面要求用户从可用设备列表中选择一个设备。
在这个示例中,只向用户展示了一个设备。
在这个教程中,只向用户展示了一个设备。
当用户点击设备时,`onDeviceSelected` 回调被调用。
设置流程识别到设备选择后,应该显示连接页面。
因此,在 `_onDeviceSelected` 中,
Expand All @@ -475,7 +476,7 @@ instructs the nested `Navigator` to navigate to the

`connecting` 页面与 `find_devices` 页面工作方式相同。
`connecting` 页面等待几秒钟,然后调用其回调函数。
在这种情况下,回调函数是 `_onConnectionEstablished`
在这个教程中,回调函数是 `_onConnectionEstablished`
设置流程识别到连接建立后,应该显示最终页面。
因此,在 `_onConnectionEstablished` 中,
`_navigatorKey` 指示嵌套的 `Navigator` 导航到 `finished` 页面。
Expand All @@ -488,12 +489,12 @@ taking the user back to the home screen.

`finished` 页面提供了一个 **Finish** 按钮。
当用户点击 **Finish** 时,`_exitSetup` 回调被调用,
这将从 top-level `Navigator` stack 中弹出整个设置流程,将用户带回到首页
这会将整个设置流程从顶层 `Navigator` 堆栈中移除,使用户回到主页

Congratulations!
You implemented nested navigation with four subroutes.

恭喜你!你实现了具有四个 subroutes 的 nested navigation
恭喜你!你实现了具有四个子路由的嵌套导航

## Interactive example

Expand All @@ -508,19 +509,19 @@ Run the app:
This brings you to the **Select a nearby device**
screen. A single bulb is listed.

**添加你的第一个灯泡** 屏幕上
点击带有加号 **+** 的 FAB
这会将你带到 **选择附近设备** 屏幕
屏幕上画了一个灯泡
**Add your first bulb** 页面上
点击带有加号 **+** 的悬浮操作按钮
这会将你带到 **Select a nearby device** 页面
页面上列出了一个灯泡设备

* Click the listed bulb. A **Finished!** screen appears.

按下画着的灯泡。屏幕上出现 **结束!**
点击列出的灯泡设备。页面上出现 **Finish** 按钮

* Click the **Finished** button to return to the
first screen.

按下 **结束** 按钮返回第一页。
按下 **Finish** 按钮返回第一页。

<?code-excerpt "lib/main.dart"?>
```dartpad title="Flutter nested navigation hands-on example in DartPad" run="true"
Expand Down

0 comments on commit 8620009

Please sign in to comment.