初入Flutter，谈一谈页面的跳转与数据传递

03每日一题

谈一谈页面的跳转与数据传递

「小新」在技术群里又看到大家在讨论 flutter 相关的知识点，flutter 出来已经有段时间了，可自己并没有深入学习，记得上次配好了环境，编译成功「Hello word」后，就搁置了。是时候重新拾起来，闻道有先后，本来就落后他人，只能更加努力。

对于初学 flutter 的「小新」，遇到了一个小问题，页面怎样跳转与传递数据？

在 Android 中，页面的跳转是通过来 Intent 来实现的：

Intent intent = new Intent(MainActivity.this,SecondActivity.class);	
startActivity(intent);

数据传递多种方法，常见的可以用 intent、Bundle、静态变量，甚至还可以通过持久化来传递数据，如数据库，file，sp 等。

那么 flutter 又怎么实现页面跳转与数据传递？导航 Navigator 的概念应运而生。

flutter 中的默认导航分成两种，一种是命名的路由；一种是构建路由。

相信大家对阿里开源的 ARouter 的框架肯定不陌生，路由的设计应用非常广，不仅在前端流行，比如在 vue、reactjs、Angular 中用到，而且在后端应用中也非常成熟。

在 flutter 中具体的实现：

final Map<String, WidgetBuilder> routes;

命名路由

这种路由需要一开始现在创建 App 的时候定义（不能传递参数）：

new MaterialApp(	
      ....	
      routes: {	
        "nameRoute":(BuildContext context)=>new SecondPage(),	
      },	
    );

然后就可以在程序中使用 Navigator.pushNamed 来跳转：

 Navigator.pushNamed(context, "nameRoute");

构建路由

在 push 的时候使用自定义方法构建一个路由（能传递参数）：

Navigator.push(context, new MaterialPageRoute(builder: (BuildContext context){	
   return new ThirdPage(title:"请输入昵称");	
}))

界面的跳转

从「主界面」跳转到「下一界面」的代码如下（main.dart 类）：

import 'package:flutter/material.dart';	
	
void main() {	
  runApp(new MaterialApp(	
    title: '页面跳转',	
    home: new MainPage(),	
  ));	
}	
	
class MainPage extends StatelessWidget {	
  @override	
  Widget build(BuildContext context) {	
    return new Scaffold(	
      appBar: new AppBar(	
        title: new Text('主界面'),	
        backgroundColor: Colors.blueAccent,	
      ),	
      body: new Center(	
        child: new RaisedButton(	
          child: new Text('下一个界面'),	
          onPressed: () {	
            Navigator.push(	
              context,	
              new MaterialPageRoute(builder: (context) {	
                return new SecondPage();	
                }),	
            );	
          },	
        ),	
      ),	
    );	
  }	
}	
	
class SecondPage extends StatelessWidget {	
  @override	
  Widget build(BuildContext context) {	
    return new Scaffold(	
      appBar: new AppBar(	
        title: new Text('第二个页面'),	
        backgroundColor: Colors.pinkAccent,	
      ),	
      body: new Center(	
        child: new RaisedButton(	
          onPressed: () {	
            Navigator.pop(context);	
          },	
          child: new Text('返回主界面'),	
        ),	
      ),	
    );	
  }	
}

效果如图：

跳转的相关代码：

  Navigator.push(	
    context,	
    new MaterialPageRoute(builder: (context) {	
      new SecondPage();	
    }),	
  );

参数 context：代表上下文，指的是当前的这个页面窗口，与 Android 中的 this 类似。

MaterialPageRoute 里面已经实现了具体的方法，此处的 Material 中文翻译为一种材质设计风格，Material Design 风格为谷歌设计，它是一种界面设计标准，为平板、手机、web 等提供一致、广泛的外观，目前在国外是一种非常受欢迎的 UI 设计标准。Material Design 简洁的界面备受国内人士的喜爱。

Navigator.push， Navigator 具体翻译为导航、跳转。push 翻译为推，还记得 adb push 命令吗？把文件推到手机上，这里理解成追加一个界面，显示在当前窗口。

有推，那就有出：

Navigator.pop(context);

关闭当前界面，返回到上一个界面。

数据传递

从前一个界面传递 int 数据到下一个界面：

import 'package:flutter/material.dart';	
	
void main() {	
  runApp(new MaterialApp(	
    title: '页面跳转',	
    home: new MainPage(),	
  ));	
}	
	
class MainPage extends StatelessWidget {	
  @override	
  Widget build(BuildContext context) {	
    var data = 666;	
    return new Scaffold(	
      appBar: new AppBar(	
        title: new Text('主界面'),	
        backgroundColor: Colors.blueAccent,	
      ),	
      body: new Center(	
        child: new RaisedButton(	
          child: new Text('下一个界面 \n'	
              '传递数据666'),	
          onPressed: () {	
            Navigator.push(	
              context,	
              new MaterialPageRoute(builder: (context) {	
                return new SecondPage(666);	
              }),	
            );	
          },	
        ),	
      ),	
    );	
  }	
}	
	
class SecondPage extends StatelessWidget {	
  int receiveData = 0;	
	
  SecondPage(int i) {	
    receiveData = i;	
  }	
	
  @override	
  Widget build(BuildContext context) {	
    return new Scaffold(	
      appBar: new AppBar(	
        title: new Text('第二个页面'),	
        backgroundColor: Colors.pinkAccent,	
      ),	
      body: new Center(	
        child: new RaisedButton(	
          onPressed: () {	
            Navigator.pop(context);	
          },	
          child: new Text('返回主界面 \n' + '接收到的数据：' + receiveData.toString()),	
        ),	
      ),	
    );	
  }	
}

效果如下图：

「有参」构造，与 java 类似：

  SecondPage(int i) {	
    receiveData = i;	
  }

国外页面「传值」用的比较多的是 fluro 第三方框架。有关 fluro 的初识将在下一篇讲到。

恭喜上期，人品红包的获奖名单：「无畏」

扫一扫 关注我的公众号

想了解更多flutter基础知识吗~

推荐阅读：

Flutter学习之事件循环机制、数据库、网络请求

Flutter学习之入门和体验

请长按下图小程序：