Android开发者的Flutter入门（二）

前言

上篇文章Android开发者的Flutter入门（一）讲解了用Flutter开发一个简单的新闻app的大致流程以及主要功能的实现。其中略过了一些功能的实现细节。这篇文章会对这些细节作一些阐述。涉及到的有如下这些点：

闪屏页

自定义布局

下拉刷新

上拉加载更多

使用Assets

路由（页面跳转）

内嵌WebView

闪屏页

因为启动Flutter app的时候须要初始化Flutter。这个时间是比较长的。因此开发Flutter app的时候都须要加一个闪屏页。给Android平台上跑的Flutter app加闪屏页实际上是和给一个正常的Android app加闪屏页是同样的。

首先在AndroidManifest.xml中，

在第一个红框中，给 MainActivity设置了一个Theme; 另外注意一下第二个红框中的 meta-data标签。那段注释的大概意思是说这个标签是用来表示让Flutter在启动过程当中保持闪屏页直到第一帧画面被绘制出来。也就是说，闪屏页的隐藏不须要咱们来处理了。

接下来看看这个LaunchTheme:

可见就定义了一个窗口的背景了，也就是咱们的闪屏页本尊了，这里你能够把这个 drawable改为你本身的闪屏页图片也OK。

至于ios平台的闪屏页怎么弄，能够参考这里。

自定义布局

咱们都知道，在Android中，若是系统提供的布局控件不能知足咱们的需求，咱们会自定义布局控件来实现。Flutter一样的也提供自定义布局控件的功能。在这个新闻app中，首页的列表项显示效果以下图，这就是用自定义的布局控件来实现的。

这个列表项整个背景是新闻图片，而后在下方叠加标题和来源，文字部分会有个半透明的背景。

代码在news_item.dart中。

class NewsItem extends StatelessWidget {
 ...
  @override
  Widget build(BuildContext context) {
   ...
  return new InkWell(
      onTap: enabled ? onTap : null,
      onLongPress: enabled ? onLongPress : null,
      child: Semantics(
          selected: selected,
          enabled: enabled,
          child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: 200.0, maxHeight: 200.0),
               //这个是自定义Layout
              child: CustomMultiChildLayout(
                // 这个Delegate用来作实际的布局
                delegate: ItemLayoutDelegate(),
                //用来作布局的子控件们
                children: children,
              ))),
    );
}
}
复制代码

CustomMultiChildLayout就是来让你作自定义布局的控件，须要一个Delegate作参数，这个Delegate须要咱们本身实现。另外一个参数children是须要布局的子控件。自定义布局控件的子控件们都须要用一个LayoutId的控件包起来。这也是Flutter一个比较有意思的地方，不少在Android中咱们当作属性来用的东西，Flutter都会作成一个类来包裹，这也是形成UI代码比较难看的一个缘由。

这里的id通常用枚举来表示，例如

enum _Block {
  bg,
  text,
}
复制代码

bg表明新闻图片，text表明新闻标题。那么你传给CustomMultiChildLayout子控件列表须要是这样的，每个都要用LayoutId包起来：

final List<Widget> children = <Widget>[];
children.add(LayoutId(
     //头图的id
      id: _Block.bg,
      child: FadeInImage.assetNetwork(),
    ));
children.add(LayoutId(
     // 标题的id
      id: _Block.text,
      child: Container()
     ));
复制代码

最后咱们在看看实际布局是怎么作的，来看ItemLayoutDelegate的代码：

class ItemLayoutDelegate extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    if (hasChild(_Block.bg)) {
      layoutChild(_Block.bg, new BoxConstraints.tight(size));
      positionChild(_Block.bg, Offset.zero);
    }

    if (hasChild(_Block.text)) {
      layoutChild(_Block.text,
          new BoxConstraints.tight(Size(size.width, size.height * 0.4)));
      positionChild(
          _Block.text, new Offset(0.0, size.height - size.height * 0.4));
    }
  }
  @override
  bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) => false;
}
复制代码

自定义的布局是在performLayout这个函数中进行的。入参是个Size，也就是父控件的宽高。函数体就是根据id来取子控件，不一样的子控件先调用layoutChild给约束，再调用positionChild摆位置，自定义布局就完成了，是否是很简单？

下拉刷新

添加一个Material design风格的下拉刷新比较简单，直接给列表包一个RefreshIndicator就能够了

return RefreshIndicator(
            //触发的回调
            onRefresh: _onRefresh,
            child: ListView.builder()
)
复制代码

下拉刷新触发的回调经过onRefresh参数设置。在_onRefesh里实现刷新数据的逻辑，须要注意的是函数_onRefresh须要返回Null类型的Future。在这个Future complete以后。刷新的图标会本身消失。效果如图：

上拉加载更多

Flutter没有系统提供的加载更过控件，这里咱们想办法作一个比较粗糙的实现。思路是在列表的末尾添加一个加载控件，当滑动到列表底部的时候触发加载的操做。

ListView.builder(
                //列表长度加1
                itemCount: _articles.length + 1,
                itemBuilder: (context, index) {
                  if (index == _articles.length) {
                    //若是是最后一个，返回加载更过控件
                    return LoadingFooter(
                        retry: () {
                          loadMore();
                        },
                        state: _footerStatus);
                  } else {
                   //返回正常列表项
                    return NewsItem();
                  }
                },
                //检测列表滚动状态
                controller: _controller));
复制代码

在建立列表的时候咱们给列表长度加1，当要获取最后一项时返回加载更多的控件，同时还要经过controller监测列表滚动状态。这样咱们就给列表加了个上拉加载更多的功能。效果如图：

使用Assets

添加 Assets

在Flutter中若是你有图片等文件须要引入到app中，都须要使用Assets, 这个Assets的概念不一样于Android中Assets的概念，某种意义上讲， Flutter的Assets更像是Android中Resource。Flutter中添加的asset都须要在pubspec.yaml 中声明。例如，我须要添加一张图片做为加载网络图片时候的占位图，只须要作以下声明就能够了。

flutter:
  assets:
  - images/news_cover.png
复制代码

Android中的Resources咱们能够给资源文件夹按照必定规律来命名，这样系统能够挑选最适合的资源，一样的Flutter的Asset也能够。下面的声明就提供了3种不一样分辨率的图标。

.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png
复制代码

访问 Assets

Flutter中访问Assets很灵活，最基本的能够用如下方式来访问Assets:

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('assets/config.json');
}
复制代码

可是不少控件也会提供更方便的方式，具体可参考这里。

路由（页面跳转）

Android中咱们都是用startActivity或者第三方路由库来作页面跳转，在Flutter中，使用内置的Navigator来作跳转的。Navigator是一个栈，当须要打开新页面的时候就调用Navigator.push，须要返回的时候就调用Navigator.pop，本文中的app当点击新闻项的时候要跳转另一个页面打开新闻详情。代码以下：

Navigator.push(
              context,
              MaterialPageRoute(
                 builder: (context) => WebviewScaffold(),
             )));
复制代码

内嵌WebView

Flutter自己没有支持内嵌WebView。咱们能够用第三方插件库flutter_webview_plugin来实现。

首先在pubspec.yaml里引入这个库：

dependencies:
     flutter_webview_plugin: "^0.1.5"
复制代码

使用的时候直接传入url和appBar就能够了

WebviewScaffold(
      url: '${_articles[index].url}',
      appBar:
              AppBar(title: Text("News Detail")),
      )
复制代码

总结

至此对于个人第一个Flutter app讲解已经完毕，相信你们看了以后就会对开发Flutter app的一些基本的技术点都有了了解。我也是刚开始学习，文中可能会有错漏之处，欢迎你们指正。整体感受来说，用Flutter开发app能够体会到不少不一样于Android 原生app开发的理念。对于咱们开阔本身的技术思想仍是有颇有价值的。要深刻理解Flutter开发的方方面面仍是要多读代码多实践，后面的路还很长，可是会颇有趣。