Android开发者的Flutter入门（二）

2020-09-15 15:28:52 浏览数 (1)

前言

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

闪屏页 自定义布局 下拉刷新 上拉加载更多 使用Assets 路由（页面跳转） 内嵌WebView

闪屏页

由于启动Flutter app的时候需要初始化Flutter。这个时间是比较长的。所以开发Flutter app的时候都需要加一个闪屏页。给Android平台上跑的Flutter app加闪屏页其实是和给一个正常的Android app加闪屏页是一样的。

首先在AndroidManifest.xml中，

AndroidManifest.xml

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

接下来看看这个LaunchTheme:

LaunchTheme

可见就定义了一个窗口的背景了，也就是我们的闪屏页本尊了，这里你可以把这个drawable改成你自己的闪屏页图片也OK。

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

自定义布局

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

列表项

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

代码在news_item.dart中。

代码语言：javascript复制
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一般用枚举来表示，例如

代码语言：javascript复制
enum _Block {
  bg,
  text,
}

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

代码语言：javascript复制
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的代码：

代码语言：javascript复制
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就可以了

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

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

下拉刷新

上拉加载更多

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

代码语言：javascript复制
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

中声明。例如，我需要添加一张图片作为加载网络图片时候的占位图，只需要做如下声明就可以了。

代码语言：javascript复制
flutter:
  assets:
  - images/news_cover.png

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

代码语言：javascript复制
.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png

访问 Assets

Flutter中访问Assets很灵活，最基本的可以用以下方式来访问Assets:

代码语言：javascript复制
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当点击新闻项的时候要跳转另外一个页面打开新闻详情。代码如下：

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

内嵌WebView

Flutter本身没有支持内嵌WebView。我们可以用第三方插件库flutter_webview_plugin来实现。

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

代码语言：javascript复制
dependencies:
     flutter_webview_plugin: "^0.1.5"

使用的时候直接传入url和appBar就可以了

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

总结

至此对于我的第一个Flutter app讲解已经完毕，相信大家看了之后就会对开发Flutter app的一些基本的技术点都有了了解。我也是刚开始学习，文中可能会有错漏之处，欢迎大家指正。总体感觉来讲，用Flutter开发app可以体会到很多不同于Android 原生app开发的理念。对于我们开阔自己的技术思想还是有很有价值的。要深入理解Flutter开发的方方面面还是要多读代码多实践，后面的路还很长，但是会很有趣。

flutter ios 编程算法 android webview

0 人点赞