Flutter 简介（事件、路由、异步请求）
1. 前言
Flutter是一个由谷歌开发的开源移动应用软件开发工具包，用于为Android和iOS开发应用，同时也将是Google Fuchsia下开发应用的主要工具。其官方编程语言为Dart。
同为跨端开发的react-native的语言是JavaScript，RN是通过原生之间桥接来实现，而flutter是通过dart虚拟机直接编译。
这篇就不和 React-Native 进行详细对比 ，而是从前端开发的角度来看flutter。
2. Dart简介
Dart 比 JAVA 简单，易于理解，比 JavaScript 更加规范，更加工程化，兼具静态和动态语言的一些特性。
- 强类型，可以直接生命变量类型，也可以类型推断；支持可选类型，用户可以像JavaScript一样写弱类型的定义，也可以确定类型。你可以写出动态语言风格的代码，也可以写出类似于传统静态风格的代码。Dart的类型推导使用final,var,const,dynamic关键字；
var修饰变量；final表示不可变的，修饰内置数据类型，值不可变；修饰对象表示引用不可变，使用到的频率很高；const是编译时常量，他表示始终不可变，无论修饰内置类型还是对象，或者是数据结构；dynamic是任意类型，有点像java里面的Object，Kotlin中的Any。
- 单线程异步事件模型, 独特的隔离区( Isolate )，可以实现多线程；Dart是基于单线程模型的语言。但是在开发当中我们经常会进行耗时操作比如网络请求，这种耗时操作会堵塞我们的代码，所以在Dart也有并发机制，名叫isolate。APP的启动入口
main函数就是一个类似Android主线程的一个主isolate。和Java的Thread不同的是，Dart中的isolate无法共享内存，类似于Android中的多进程。
- DartVM，具有极高的运行效率和优秀的代码运行优化；
- 面向对象编程，一切数据类型均派生自 Object ；
- 运算符重载，泛型支持；
- 异步API： Future （async/await）和 Stream（异步事件流） 模型,可以简单实现高效的代码；
- Minix 特性，可以更好的实现方法复用；
- 在语法上，Dart 提供了很多便捷的操作，可以明显减少代码量。比如字符连接，可以直接
"my name is $name, age is $age"，无需+号拼接，也无需做类型转换（相当于ES6的模板字符串）。
更多参见官方文档
3. 从前端的角度看Flutter
对于前端来说，页面就分为 HTML+CSS+JS
页面结构和样式 Flutter for Web
对于习惯了html+css结合chrome devtools 完成UI效果的前端开发来说，刚开始用这种方式极其不习惯。
本来简单的一个结构和一个样式，加个背景色，渐变这种，css轻松搞定，然而，用widget来就要嵌套好多层，只能说，习惯习惯就好了。。
3.1 先来认识一下Flutter
Hello word入门
lib/main.dart
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // StatelessWidget和StatefulWidget两种 // 两者的区别在于状态的改变，StatelessWidget面向那些始终不变的UI控件；而StatefulWidget则是面向可能会改变UI状态的控件。 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', // Title 是用来定义任务管理窗口界面所看到应用名字的 home: Scaffold( appBar: AppBar( // 导航栏 title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World'), ), ), ); } }
3.2 路由跳转传参
在前端传参很简单，是直接携带携带参数（params和query）跳转路由页面的
flutter里面的路由可以分成两种，一种是直接注册，不能传递参数。另一种要自己构造实例，可以传递参数。
分两种方法 push 和 pushNamed
3.2.1 静态路由的注册
return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter实例'), routes: <String, WidgetBuilder> { // 这里可以定义静态路由，不能传递参数 '/login': (BuildContext context) => new SecondPage(), '/register': (BuildContext context) => new RouterHomePage(), }, );
3.2.2 静态路由的使用
onPressed: () { Navigator.of(context).pushNamed("/register"); // or Navigator.pushNamed(context, '/register') },
3.2.3 动态路由的使用
Navigator.of(context).push(
MaterialPageRoute(builder: (_) { return new SecondPage(title: '传参过去'); }));
3.2.4 关闭页面
Navigator.pop(context); // or Navigator.of(context).pop(); Navigator.pop(context,"携带参数"); // 可携带参数
3.2.5 push , pushNamed 传参
Pass arguments to a named route
https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments
用 ModalRoute.of（）封装路由及传参方法
push方法封装，有一个缺点就是不能只在主页面定义导入跳转的页面，略有代码重复
用pushNamed封装参数传递方法，就比较方便，不用再每一个页面import将要跳转的页面
main.dart
import 'package:flutter/material.dart'; import 'package:app/pages/home/app.dart'; import 'package:app/pages/login/login.dart'; import 'package:app/pages/login/register.dart'; import 'package:app/pages/login/forget.dart'; import 'package:app/pages/home/search_recommend.dart'; import 'package:app/pages/home/search_result.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'myapp', routes: { "/register": (context) => RegisterPage(), "/login": (context) => LoginPage(), "/forget": (context) => ForgetPage(), "/search": (context) => SearchRecommendPage(), "/searchresult": (context) => SearchResultPage(), }, theme: new ThemeData(primarySwatch: Colors.red), home: AppPage(), ); } }
从login跳转到register的时候，携带参数，并在register页面显示相应参数
login.dart
import 'package:app/pages/login/register.dart'; // 用push方法的话就要用到这个 onPressed: () => { // 点击按钮跳转事件 Navigator.push( // push方法--支持StatelessWidget和StatefulWidget context, MaterialPageRoute( builder: (context) => RegisterPage(), settings:RouteSettings(arguments: {'title': '手机号注册'}))) // or pushNamed 方法 // Navigator.pushNamed(context, '/register', // arguments: {'title': '手机号注册'}) },
register.dart 接收参数
class _RegisterPageState extends State<RegisterPage> { @override Widget build(context) { // 参数的接收显示 final Map args = ModalRoute.of(context).settings.arguments; return Scaffold( appBar: AppBar( title: Text(args['title']), ), body: Center( child: Text('register'), ), } }
3.3 事件触发
3.3.1 触发按钮的点击事件
https://book.flutterchina.club/chapter3/buttons.html
几种按钮，触发事件都是 onPressed 点击事件
3.3.2 手势识别GestureDetector
https://book.flutterchina.club/chapter8/gesture.html
常见事件：点击、双击、长按
3.3.3 toast , alert 等弹窗
toast可直接安装 fluttertoast 包进行使用 https://pub.dev/packages/fluttertoast
alert, confirm 弹窗使用
部分代码
import 'package:flutter/material.dart'; onTap: () => showDialog( context: context, builder: (_) => _generateAlertDialog("我是弹框的内容")), ) _generateAlertDialog(String contents) { return AlertDialog( title: Text('这是标题'), content: Text(contents), actions: <Widget>[ FlatButton( child: Text('取消'), onPressed: () { Navigator.of(context).pop(); // 点击取消关掉弹窗 }, ), FlatButton( child: Text('确认'), onPressed: () { Navigator.of(context).pop(); // 点击确认关掉弹窗再跳转到别的页面 Navigator.of(context).pushNamed('/register'); }, ), ], ); }
4. 异步请求
flutter中的请求方式
- Dart 原生的网络请求
HttpClient - 库
http - Flutter中文网发布的
dio
4.1 HttpClient
4.2 使用官方 http 库
https://flutter.dev/docs/cookbook/networking/fetch-data
4.3 使用 dio http请求框架
https://book.flutterchina.club/chapter10/dio.html
dio比较流行的一个请求包，它支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传、文件下载等
先看简单的请求
import 'dart:async'; import 'package:dio/dio.dart'; var dio = new Dio(); void getHttp() async { try { Response response = await dio.get("http://www.google.com"); print(response); } catch (e) { print(e); } }
可以封装一个通用请求模板，利用拦截器一并处理通用模块-比如请求前加loading, 结束关闭loading, 统一网络请求错误处理等
utils文件夹下的 net.dart
import 'dart:async'; import 'package:dio/dio.dart'; Dio dio; class NetRequest { static Future<Dio> instance() async{ if (dio == null) { dio = new Dio(); } //添加拦截器 dio.interceptors.add( InterceptorsWrapper( onRequest: (RequestOptions options) { print("请求之前"); // Do something before request is sent return options; //continue }, onResponse: (Response response) { print("响应之前"); // Do something with response data return response; // continue }, onError: (DioError e) { print("错误之前"); // Do something with response error return e; //continue }, ), ); return dio; } static Future get(String url, Map<String, dynamic> params) async { var response = await (await instance()).get(url, queryParameters: params); print(response.data.toString()); return response.data; } static Future post(String url, Map<String, dynamic> params) async { var response = await (await instance()).post(url, data: params); print(response.data.toString()); return response.data; } }
发起请求
import 'package:flutter/material.dart'; import 'package:app/utils/net.dart'; class MyFriends extends StatefulWidget { MyFriends({Key key}) : super(key: key); @override _MyFriendsState createState() => _MyFriendsState(); } class _MyFriendsState extends State<MyFriends> { void _getInfo() async { Map list = await NetRequest.get(url,{}); print(list); // 发起get请求之后获得的数据 } @override void initState() { super.initState(); _getInfo(); } Widget build(BuildContext context) { return Scaffold( body: Container( child: Text('friends'), ), ); } }
post 请求同理
4. 开发者工具
https://flutter.github.io/devtools
Dart DevTools还是预览版，目前功能也还比较简单
VsCode Dart: Open DevTools命令打开
5. 后记
刚开始写flutter各种不习惯，和js的模式不一样，更偏向于后端语言，作为跨端语言的新秀，又有Google这颗大树，设计之初就是作为跨多终端来实现的，这两年的发展也很快，国内很多团队有些已经在使用了。
官方发布版本也很勤，随着生态的逐渐完善，还是有很大的发展空间的，值得期待。
参考：
