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页面显示相应参数

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': '手机号注册'})
},

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

（1）RaisedButton 漂浮按钮（2）FlatButton 扁平按钮（3） OutlineButton （4） IconButton

几种按钮，触发事件都是 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这颗大树，设计之初就是作为跨多终端来实现的，这两年的发展也很快，国内很多团队有些已经在使用了。

官方发布版本也很勤，随着生态的逐渐完善，还是有很大的发展空间的，值得期待。

参考：

Flutter 官网

科普Dart语言

Flutter 中文网

posted @ 2019-06-27 21:22 c-137Summer 阅读(2326) 评论(0) 编辑收藏举报

刷新页面返回顶部

Flutter 简介（事件、路由、异步请求）

Pass arguments to a named route

公告