颤振稳定性叶瓣图_颤振导航器pageroutebuilder过渡

颤振稳定性叶瓣图

In this project, you are going to take a look at:

在这个项目中，您将看一下：

• How to use the Navigator widget to navigate between pages with arguments (pass data)

  如何使用Navigator小部件在带参数的页面之间导航(传递数据)

• How to use the Navigator Named Route with arguments (pass data)

  如何使用带有参数的Navigator Named Route (传递数据)

• How to use the PageRouteBuilder to create custom navigation transitions

  如何使用PageRouteBuilder创建自定义导航过渡

Navigator Sample Code

导航器示例代码

航海家 (Navigator)

The Navigator widget manages a stack of routes to move between pages. You can optionally pass data to the destination page and back to the original page. To start navigating between pages, you use the Navigator.of(context).push, pushNamed, and pop methods.

Navigator小部件管理一堆在页面之间移动的路由。 您可以选择将数据传递到目标页面并返回原始页面。 要开始在页面之间导航，请使用Navigator.of(context).push ， pushNamed和pop方法。

Navigator is incredibly smart; it shows native navigation on iOS or Android. For example, when navigating to a new page, in iOS, the new page slides in from the right, and in Android, it slides in from the bottom.

Navigator非常智能； 它显示了iOS或Android上的本机导航。 例如，导航到新页面时，在iOS中，新页面从右侧滑入，而在Android中，它从底部滑入。

导航器示例代码 (Navigator Sample Code)

The following example shows you how to use the Navigator.of(context).push method to navigate to the Details page. The push method passes the Route arguments. To push a new Route argument, you create an instance of the MaterialPageRoute class that replaces the screen with the appropriate platform (iOS or Android) animation transition. In the example, the fullscreenDialog property is set to true to present the Details page as a full-screen modal dialog. By setting the fullscreenDialog property to true, the Details page app bar automatically includes a close button. In iOS, the modal dialog transition presents the page by sliding from the bottom of the screen toward the top, and this is also the default for Android.

下面的示例向您展示如何使用Navigator.of(context).push方法导航到“ Details页面。 push方法传递Route参数。 要推送新的Route参数，请创建MaterialPageRoute类的实例，该实例用适当的平台(iOS或Android)动画过渡替换屏幕。 在该示例中，将fullscreenDialog属性设置为true以将“ Details页面显示为全屏模式对话框。 通过将fullscreenDialog属性设置为true ，“ Details页面应用程序栏将自动包含一个关闭按钮。 在iOS中，模式对话框过渡通过从屏幕底部向顶部滑动来显示页面，这也是Android的默认设置。

Navigator.of(context).push(
  MaterialPageRoute(
    fullscreenDialog: true,
    builder: (context) => Details(),
  ),
);

The following example shows how to use the Navigator.of(context).pop method to close the page and navigate back to the previous page. You call the Navigator.of(context).pop() method and the page closes by sliding from the top of the screen toward the bottom.

下面的示例演示如何使用Navigator.of(context).pop方法关闭页面并导航回到上一页。 您调用Navigator.of(context).pop()方法，然后通过从屏幕顶部向底部滑动来关闭页面。

// Close page
Navigator.of(context).pop();

The second example shows how to pass a value back to the previous page by passing a result value argument. The result can be a single value, object, lists (arrays) and so on.

第二个示例显示如何通过传递结果值参数将值传递回上一页。 结果可以是单个值，对象，列表(数组)等。

// Close page and pass a value back to previous page
Navigator.of(context).pop('Done');

导航器命名为路线 (Navigator Named Route)

An alternate way to use Navigator is to refer to the page that you are navigating to by the route name. The route name starts with a slash, and then comes the route name. For example, the Details page route name is '/details'. The list of routes is built into the MaterialApp() widget. The routes have a Map of String and WidgetBuilder where the String is the route name, and the WidgetBuilder has a builder to build the contents of the route by the Class name (Details) of the page to open.

使用Navigator的另一种方法是通过路由名称引用要Navigator到的页面。 路径名称以斜杠开头，然后为路径名称。 例如，“详细信息”页面路由名称为'/details' 。 路线列表内置在MaterialApp()小部件中。 路由具有String Map和WidgetBuilder ，其中String是路由名称，而WidgetBuilder具有生成器，可通过要打开页面的类名称( Details )构建路由的内容。

MaterialApp(
  initialRoute: '/home',
  routes: <String, WidgetBuilder>{
    '/home': (BuildContext context) => Home(),
    '/details': (BuildContext context) => Details(),
    '/about': (BuildContext context) => About(),
  },
);

To call the route, the Navigator.of(context).pushNamed() method is called by passing the route name argument.

要调用路由，可通过传递路由名称参数来调用Navigator.of(context).pushNamed()方法。

Navigator.of(context).pushNamed('/details');

You also have an optional second argument to pass data

您还具有可选的第二个参数来传递数据

// Pass Arguments
Navigator.of(context).pushNamed(
    '/details',
    arguments: {'emotion': 'Happy'}
);

To Extract the arguments (data) you call the ModalRoute.of(context).settings.arguments and for this example you access the data by calling the arguments variable key value.

要提取参数(数据)，请调用ModalRoute.of(context).settings.arguments ，在本示例中，您可以通过调用参数变量键值来访问数据。

// Extract Arguments from navigated page
class _DetailsState extends State<Details> {
  Map arguments = Map();  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    arguments = ModalRoute.of(context).settings.arguments;
  }  @override
  Widget build(BuildContext context) {
      return Scaffold(
       body: Text(arguments['emotion']),
      );
  }
}

PageRouteBuilder (PageRouteBuilder)

The PageRouteBuilder class is used to create custom route transitions. PageRouteBuilder provides an Animation object. This Animation can be used with Tween and Curve objects to customize the transition animation.

PageRouteBuilder类用于创建自定义路由转换。 PageRouteBuilder提供了Animation对象。 该Animation可以与Tween和Curve对象一起使用，以自定义过渡动画。

You need to define a pageBuilder function to create the route's content and define the transitionBuilder function to add transition animation.

您需要定义一个pageBuilder函数来创建路径的内容，并定义transitionBuilder函数来添加过渡动画。

Navigator.of(context).push(
  PageRouteBuilder(
    pageBuilder: (
        BuildContext context, 
        Animation<double> animation, 
        Animation<double> secondaryAnimation) {
      return Details();
    },
    transitionsBuilder: (
        BuildContext context, 
        Animation<double> animation, 
        Animation<double> secondaryAnimation, 
        Widget child) {
      return Align(
        child: SizeTransition(
          sizeFactor: animation,
          child: child,
        ),
      );
    },
    transitionDuration: Duration(milliseconds: 500),
  ),
);

这个怎么运作 (How it Works)

航海家 (Navigator)

The Navigator widget manages a stack of routes to move between pages. To start navigating between pages, you use the Navigator.of(context).push, pushNamed, and pop methods. You optionally passed data to the navigation page and back to the original page.

Navigator小部件管理一堆在页面之间移动的路由。 要开始在页面之间导航，请使用Navigator.of(context).push ， pushNamed和pop方法。 您可以选择将数据传递到导航页面并返回原始页面。

导航器命名为路线 (Navigator Named Route)

An alternate way to use Navigator is to refer to the page that you are navigating to by the route name. The route name starts with a slash, and then comes the route name. To call the route, the Navigator.of(context).pushNamed() method is called by passing the route name argument. You also have an optional second argument to pass data. To Extract the arguments (data) you call the ModalRoute.of(context).settings.arguments.

使用Navigator的另一种方法是通过路由名称引用要Navigator到的页面。 路径名称以斜杠开头，然后为路径名称。 要调用路由，可通过传递路由名称参数来调用Navigator.of(context).pushNamed()方法。 您还具有一个可选的第二个参数来传递数据。 要提取参数(数据)，请调用ModalRoute.of(context).settings.arguments 。

导航器PageRouteBuilder (Navigator PageRouteBuilder)

The PageRouteBuilder class is used to create custom route transitions. PageRouteBuilder provides an Animation object. This Animation can be used with Tween and Curve objects to customize the transition animation.

PageRouteBuilder类用于创建自定义路由转换。 PageRouteBuilder提供了Animation对象。 该Animation可以与Tween和Curve对象一起使用，以自定义过渡动画。

Find me on Twitter @JediPixels

在Twitter @JediPixels上找到我

For more information: https://JediPixels.dev

有关更多信息： https : //JediPixels.dev

翻译自: https://medium.com/@JediPixels/flutter-navigator-pageroutebuilder-transitions-b05991f53069

颤振稳定性叶瓣图