阅读 666

Android开发者的Flutter入门(一)

前言

Flutter推出来已经有一段时间了,前一阵Google IO大会后发布了Beta3。基于Flutter的 app可以一次编写,同时在Android和iOS平台上跑,并且能给用户带来完全原生的体验。我们都知道跨平台开发还有Hybrid,React Native以及Weex等方案,这些解决方案都是从Web开发的角度向Native开发演进,其技术基础都是HTML、CSS和Javascript等Web技术,对于没有接触过Web开发的Native app程序员来讲,门槛是比较高的。而Flutter给我的感觉是从Native开发向Web开发演进,Native app程序员应该能比较舒服的入门。

作为一名Android开发者,我始终认为跨平台是移动端开发的发展趋势,但是哪一种技术方案会最终胜出,还有待时间的检验。Flutter对Native开发者友好,并且吸纳了React等Web开发的前沿技术,可以作为Native程序员学习跨平台开发的很好的路径。

为了学习Flutter, 我试着开发了一个简单的新闻app,涵盖了一些移动端app比较基础的功能。接下来我会对照这个app来给大家介绍一下Flutter开发的一些知识。整个工程源码大家可以从Github获取。如有任何问题或建议,欢迎大家提issue。

本文是Android开发者的Flutter入门的第一部分,有一些技术细节放在了第二部分介绍,戳这里查看 Android开发者的Flutter入门(二)

语言

Flutter是用Dart语言开发的。所以在开发Flutter app之前,需要我们对Dart语言有一定的掌握。对于Android程序员来讲,学习Dart是比较快的一个过程,和Java一样,Dart也是面向对象的语言。很多地方都是相通的。需要注意的是对于Dart里的类(各种构造函数,getter,setter),函数(函数也是对象,函数内部可以定义函数,函数可以作为参数和返回值, 闭包),以及异步(Future,asyncawait)等地方要反复揣摩,仔细体会。

有了Dart的基础,那么我们就可以开始尝试开发个Flutter app了。

预备

首先你要配置Flutter的开发环境。对于我们Android程序员来讲,那就是再熟悉不过的Android Studio了。整个配置过程是比较简单的,大家照文档走就是了。不过要注意一点,如果你没有穿墙的的话,需要看一下这里

开始

好了,环境已经弄好了,可能你已经把Hello World也跑起来了。那么我们就用Flutter来开发一个稍微像样点的app吧。

我们开发的是一个简单新闻app。主要包含两个页面,一个首页,显示一个头条新闻的列表,点击里面的某个头条,就跳转到那条新闻的详情页面。这个简单的app包含了一些比较基础的功能:

如何通过网络从服务器请求数据? Android程序员:我用OkHttp。

如何解析返回数据? Android程序员:我用Gson。

返回的数据如何在界面上显示出来? Android程序员:我用RecylerView。

如何显示网络图片? Android程序员:我用Glide。

页面之间如何跳转? Android程序员:我用Intent。

如何加入下拉刷新? Android程序员:我用SwipeRefreshLayout。

接下来我们就说说以上这些功能如何在Flutter里实现,先来两张截图感受一下:

新闻列表
新闻详情

新闻源我们使用的是newsapi.org。你只要申请一个apiKey就能从他家获取json格式的头条新闻数据。至于详情的话需要用webview直接打开对应的新闻url。

JSON解析

网络返回的JSON数据格式如图所示:

JSON

这里面"articles"字段的值是个jsonArray,内容是头条新闻的列表。在Android中我们可以用Gson来把json数据反序列化为对象。那再Flutter中如何来做反序列化呢?

首先我们引入必要的库: 在pubspec.yaml加入以下内容

dependencies:
  json_annotation: ^0.2.3
dev_dependencies:
  build_runner: ^0.8.0
  json_serializable: ^0.5.0
复制代码

然后在终端中运行flutter packages get(或者点击"Packages Get"的提示,类似你更改.gradle文件以后Android Studio显示的同步提示)

接下来就是model类了

import 'package:json_annotation/json_annotation.dart';

part "news.g.dart";

@JsonSerializable()
class News extends Object with _$NewsSerializerMixin {
  final String author;
  final String title;
  final String description;
  final String url;
  final String urlToImage;
  final String publishedAt;
  final Source source;

  News(this.author,
      this.title,
      this.description,
      this.url,
      this.urlToImage,
      this.publishedAt,
      this.source);

  factory News.fromJson(Map<String, dynamic> json) => _$NewsFromJson(json);
}

@JsonSerializable()
class Source extends Object with _$SourceSerializerMixin {
  final String id;
  final String name;

  Source(this.id, this.name);

  factory Source.fromJson(Map<String, dynamic> json) => _$SourceFromJson(json);
}

@JsonSerializable()
class NewsList extends Object with _$NewsListSerializerMixin {

  final String status;
  final int totalResults;
  final List<News> articles;
  final code;
  final message;

  NewsList(this.status, this.totalResults, this.articles, this.code, this.message);

  factory NewsList.fromJson(Map<String, dynamic> json) => _$NewsListFromJson(json);

}
复制代码

看起来既有熟悉的字段,又有陌生的注解和代码?没关系,只要你按照这里的要求来做就行了。可以看出反序列化是在_$NewsListFromJson(json);里完成的。那么这个函数从何而来呢?这需要我们运行命令flutter packages pub run build_runner build来生成对应的代码。生成的代码存放在news.g.dart中。

至此model类以及反序列化我们就已经做完了,那么下面就看看网络请求怎么来实现。

网络请求

对应于Android中的OkHttp, Flutter中的网络请求库是http.dart。如下所示,代码比较简单

import 'dart:async';
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;

import 'package:flutter_news/model/news.dart';

class NewsApi {
  static Future<NewsList> getHeadLines({String category: "general", int page: 0}) async {
    final response = await http.get(
        "https://newsapi.org/v2/top-headlines?country=us&apiKey=efaf5fb66d104385ad40c73d4fd4acb1&page=$page&category=$category");

    return compute(parseResult, response.body);
  }

  static NewsList parseResult(String respond) {
    return NewsList.fromJson(json.decode(respond));
  }
}

复制代码

我们都知道在Android中网络请求需要在子线程来做,否则会阻塞主线程;请求的结果通过callback来返回给主线程。 而在Flutter中则更加简洁,通过asyncawait,避免了难看的callback代码嵌套。 函数getHeadLines用来做http请求,在走到await的时候会"等待"后面的http.get函数执行完毕,返回值赋给response,之后继续执行函数体中的后续代码。注意,这里的"等待"并不是阻塞在那里,而只是告诉系统,后续的代码需要在await后面的表达式结束之后执行。你可以把await那一行以下的代码理解为Android网络调用中的callback。实际的运行机制其实是比较复杂的,需要另写文章详细说明。

在请求得到返回值response以后就要做json反序列化了。因为反序列化也有可能是个耗时任务,有可能会阻塞ui. 这里我们用过Flutter提供的compute函数把反序列化放在另外的isolate去完成。这里你可以先把isolate当成是Java里的线程。compute函数的第一个参数parseResult是真正进行反序列化操作的函数。大家可以感受一下,函数作为参数还是比较方便的。

Model层我们已经有了,那么接下来就看下View层怎么来搭建吧。

界面

在做Android原生开发的时候。我们一般会用XML来搭建界面,里面是一个一个的View。而在Flutter中,和View等同的是Widget。Flutter app的界面就是由一个个Widget拼接起来的。而且Widget都是写在代码中的,目前没有用xml等其他搭建UI的方式,这也是目前Flutter开发被吐槽的点,代码中各种嵌套的Widget还是比较令人酸爽的。

Widget分为StatelessWidget(无状态的)和StatefulWidget(有状态的)。无状态是指这个Widget的状态会发生改变,类比如Android中显示固定字符串的TextView或者显示固定图标的ImageView。反之有状态则是指这个Widget在显示期间内状态会发生改变,就比如我们在做网络请求的时候会显示一个Progress图标,请求回来数据以后会显示一个列表。这就是状态发生了变化。当需要变更状态的时候,只要调用setState。StatefulWidget的build函数会被调用,根据新的state来重建UI,是不是听起来和Android中的notifyDataSetChanged有点像?

让我们自上而下的看一下main.dart的代码吧

// 我是入口,类似于java中的 static main()
void main() => runApp(new MyApp());

// 我是最外层的容器,我不关心里面内容的变化,所以是无状态的。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //返回给你一个MaterialApp,至于内部还有啥,看参数
    return MaterialApp(
      title: 'Headlines',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 这个Widget是我们自定义的
      home: HeadLinePage(title: 'Headlines'),
    );
  }
复制代码

入口的这些代码都是常规操作。不细说了。

这里顺便说一句,一个.dart文件中是可以包含多个在最外层的类的,这点和Java是不一样的,需要习惯一下。

接下来我们再实现自定义的Widget: HeadLineList。因为其状态会发生改变(有网络请求),所以这是个StatefulWidget。

class HeadLineList extends StatefulWidget {
  @override
  _HeadLineListState createState() => new _HeadLineListState();
}
复制代码

Emmm....... 自定义一个Widget只需要一行代码吗?答案是否定的,干货都在_HeadLineListState里......

class _HeadLineListState extends State<HeadLineList> {

  List<News> _articles;
  
  Future _getNews() async {
    NewsList news = await NewsApi.getHeadLines();
    _articles = news?.articles;
    //有数据了 触发ui更新
    setState(() {
    });
  }

  @override
  void initState() {
    super.initState();
    //初始化 开始加载
    _getNews();
  }

  @override
  Widget build(BuildContext context) {
    switch (_status) {
      case IDLE:
        //有数据了,返回列表
        return ListView.builder(
                itemCount: _articles.length,
                itemBuilder: (context, index) {return NewsItem(news: _articles[index])};
      case LOADING:
        //加载中,返回个加载框
        return Center(child: CircularProgressIndicator());
    }
  }
}

复制代码

这里HeadLineList是包含加载进度框和新闻列表的容器Widget。而_HeadLineListState是和其关联的状态。真正创建Widget是在build函数内。这里会根据不同的状态返回不同的Widget。List<News> _articles;存储出来的新闻列表,在initState初始化的时候开始调用网络请求。

在状态变为加载完成时,build函数内会用ListView.builder来创建显示列表。这里不需要像Android里的ListView那样需要一个Adapter,给itemBuilder传个函数参数就行了,这个函数参数返回我们自定义的无状态Widget, NewsItem, 作为列表显示项。

自定义的NewsItem会有一个充满控件的背景图片,这个图片需要从网络加载。有一个placeHolder并且加载完有淡入淡出的效果,在Android中我们可能会用Glide来实现,而在Flutter中,仅需几行代码也可以做到

FadeInImage.assetNetwork(
       //图片url
        image: '${news.urlToImage}',
       // 图片scale方式
        fit: BoxFit.fitWidth,
       // 占位图,从assets 中获取
        placeholder: 'images/news_cover.png',
      )
复制代码

总体流程基本上走完了,未涉及到的下拉刷新,最底加载,WebView等技术点 可以戳这里Android开发者的Flutter入门(二)查看,或者大家可以参考源代码自行理解。

工程

最后我们再看一下整个工程的目录结构:

image
项目下会有三个主要的目录,android , ioslibandroid , ios目录分别是存放两个平台的相关代码。所有的Flutter代码都存放在lib目录下。pubspec.yaml文件项目的配置文件,类似于Android工程中的build.gradle。我们再看看Android开发者比较关心的android目录,这里只有一个MainActivity, 代码如下:

public class MainActivity extends FlutterActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    GeneratedPluginRegistrant.registerWith(this);
  }
}
复制代码

可见这唯一的一个Activity就是个空壳,只是用来给Flutter app提供一个容器。

打包

打apk只需要一条命令: flutter build apk 当然,这之可能需要做一些配置,具体可参考这个文档

总结

移动端跨平台开发是大势所趋,Flutter是一个比较强大的跨平台解决方案,虽然现在还是在Beta阶段,并没有完全成熟。但是相对于其他跨平台解决方案,其对Native app开发者友好,同时又吸收了一些先进的Web开发技术理念,是一个比较顺一些的学习跨平台开发的路径。另外对于一些未涉及的技术细节大家可以到这里查看Android开发者的Flutter入门(二)