Flutter “跳转页面”(一)

“跳转页面”为啥加双引号,其实所谓的跳转页面可能和以前认识的不太一样。因为在Flutter里,所有能看到的东西一般都是widget,但是,没有说那个app是由一个页面构成的,所以,这个概念确实还是有的。这个功能的实现需要用到两个东西RouteNavigator

Using the Navigator Mobile apps typically reveal their contents via full-screen elements called "screens" or "pages". In Flutter these elements are called routes and they're managed by a Navigator widget. The navigator manages a stack of Route objects and provides methods for managing the stack, like Navigator.push and Navigator.pop.

班门弄斧的翻译一下子:手机应用们一般吧全屏的元素叫做“screens”或者“pages”。然而在Flutter里,我们叫做“routes”。它们用“Navigator”来管理。Navigator管理了一个由Route组成的堆栈,并提供了一些方法方便去管理这个堆栈,比如说:Navigator.pushNavigator.pop

Displaying a full-screen route Although you can create a navigator directly, it's most common to use the navigator created by a WidgetsApp or a MaterialApp widget. You can refer to that navigator with Navigator.of. A MaterialApp is the simplest way to set things up. The MaterialApp's home becomes the route at the bottom of the Navigator's stack. It is what you see when the app is launched.

尽管你可以直接创建一个navigator,但是最常用的还是通过WidgetsAppMaterialApp这两个widget,你可以参考Navigator.ofMaterialApp是最简单的一个方式。MaterialApphome则会成为Navigator栈的底端,就是当app刚启动的时候你看到的那个东西。eg:

void main() {
  runApp(new MaterialApp(home: new MyAppHome()));
}

To push a new route on the stack you can create an instance of MaterialPageRoute with a builder function that creates whatever you want to appear on the screen. For example:

如果你想在栈里放一个新route的话,你可以通过一个builder方法来创建一个MaterialPageRoute对象。eg:

Navigator.push(context, new MaterialPageRoute<void>(
  builder: (BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('My Page')),
      body: new Center(
        child: new FlatButton(
          child: new Text('POP'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  },
));

新的route通过Navigatorpop方法可以被出栈,返回app的首页。

Navigator.pop(context);

The route defines its widget with a builder function instead of a child widget because it will be built and rebuilt in different contexts depending on when it's pushed and popped.

这个route之所以用builder方法来定义而不是直接用一个widget,是因为它在进出栈的时候需要根据不同的上下文来进行构建。

It usually isn't necessary to provide a widget that pops the Navigator in a route with a Scaffold because the Scaffold automatically adds a 'back' button to its AppBar. Pressing the back button causes Navigator.popto be called. On Android, pressing the system back button does the same thing.

通常情况下,如果用的是Scaffold的话,是不需要我们手动去添加一个返回按钮的。它会自动的在左上角添加一个返回按钮,点击这个返回按钮就会调用Navigator.pop方法,在安卓上,按压系统的返回按钮效果是一样的。

Using named navigator routes 使用命好名的route Mobile apps often manage a large number of routes and it's often easiest to refer to them by name. Route names, by convention, use a path-like structure (for example, '/a/b/c'). The app's home page route is named '/' by default.

app通常需要管理大量的route,并且他们经常很容易的通过名字来找到它们。route的名字,按照惯例,用类似路径的结构(比如:‘a/b/c’)。app的首页路径默认为'/'

The MaterialApp can be created with a Map<String, WidgetBuilder> which maps from a route's name to a builder function that will create it. The MaterialApp uses this map to create a value for its navigator's onGenerateRoute callback.

MaterialApp创建的时候可以带着一个Map,而这个Map描述了route的名字和对应的builder方法。MaterialApp就是根据这个Map在navigatoronGenerateRoute回调里创建对应的route

void main() {
  runApp(new MaterialApp(
    home: new MyAppHome(), // becomes the route named '/'
    routes: <String, WidgetBuilder> {
      '/a': (BuildContext context) => new MyPage(title: 'page A'),
      '/b': (BuildContext context) => new MyPage(title: 'page B'),
      '/c': (BuildContext context) => new MyPage(title: 'page C'),
    },
  ));
}

个人认为,这种写法类似于Android里面清单文件的作用。

Navigator.pushNamed(context, '/b');

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

使用多个Target去管理项目版本环境

在实际开发中,为了保证所开发的产品能够尽量完美上线,在上线前会特意测试几轮,保证所开发的应用没有问题。据此,在实际的开发过程中,往往需要区分测试环境和线上环境,...

202100
来自专栏黑泽君的专栏

线程的控制之守护线程_坦克大战帮助理解

后台线程   public final void setDaemon(boolean on)   将该线程标记为守护线程或用户线程 对象名.setDae...

22710
来自专栏非典型技术宅

iOS四大对象之UIApplication对象1. 获取2. 创建联网指示器3. 设置app右上角小图标的数字4. 打电话、发短信、上网5. 判断系统版本

14250
来自专栏Scott_Mr 个人专栏

两个App之间调起通信

11210
来自专栏更流畅、简洁的软件开发方式

你的SQL语句放在了哪里?

这段时间整理自然框架,遇到了一个老问题——SQL语句放在哪里? 对于有规律的比较好办了,但是对于哪些没啥规律的怎么办呢? 想了一下,有几种方式,弄了张图。欢迎大...

20780
来自专栏DannyHoo的专栏

POST上传各种数据类型(包括图片)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

70920
来自专栏哈雷彗星撞地球

(译)openURL 在 iOS10中已弃用

翻译自:openURL Deprecated in iOS10 译者:Haley_Wong

11710
来自专栏Scott_Mr 个人专栏

两个App之间调起通信

38880
来自专栏君赏技术博客

【已解决】Xcode在StoryBoard设置UIView的控件类是Cocoapods的类,运行还是UIView?

ZHVerifyCodeFiled作为我写在Cocoapods的空间,现在我在测试例子的Main.storyboard直接添加一个UIView使用我们Cocoa...

18020
来自专栏向治洪

使用多个Target去管理项目版本环境

在实际开发中,为了保证所开发的产品能够尽量完美上线,在上线前会特意测试几轮,保证所开发的应用没有问题。据此,在实际的开发过程中,往往需要区分测试环境和线上环境,...

21660

扫码关注云+社区

领取腾讯云代金券