前言

本人是一个iOSer, 平常主要使用swift开发项目，项目基本是纯原生，最近公司一同事分享了一下Flutter，感觉非常不错，所以就研究了两天，拿有妖气漫画练一下手。

下载地址

https://github.com/hellolad/you_yao_qi/tree/dev
(选择优化过的dev分支)

Flutter

Flutter是一个跨平台的框架，在iOS和Android端甚至以后的PC端都可以统一一套代码来实现。Flutter的性能高效，Dart语言的简易性和高效性，也使Flutter采用了Dart来开发跨平台App。

在Flutter之前，开发跨平台App大多采用了RN, Weex等底层需要JS Runtime来和Native端交互，在性能和效率上，都有很大的屏障。Flutter每次Debug或者Run都会被AOT（预编译）成本地代码，所以不会有Bridge这层东西，所以效率要比RN,Weex高。(在我开发的一个小项目中也验证了这一点)。

Widget(控件，部件，也可以理解为iOS的UIView)

可以说Flutter里最有特点的就是Widget了，可以说Flutter应用里的所有控件都是Widget。Widget的可定制性强，扩展性强。

return Container(
  child: Text("Hello Flutter!")
);

这就是一个Widget，Container是Widget的一个子类，当然它里面有各种各样的子类供你使用。

Dart

Dart语言可以说对于移动端开发来说，都比较陌生，因为纯原生开发到现在，我只听说过可以用C#开发iOS,可能我知道的太少了，不过Dart的学习还是比较简单的，安卓开发人员用过Java，iOS开发人员用过Swift，所以再去看Dart都会有似曾相识的感觉。来看个例子:

void main() {
  List<String> list = ['1', '2', '3', '4', "5", "6"];
  final str = list.join(" ").toString();
  print(str);
  print(list.skip(1).toList());
  print(list.getRange(3, list.length).toList());
}
1 2 3 4 5 6
[2, 3, 4, 5, 6]
[4, 5, 6]

其实和Java和Swift的区别不大，一天差不多就可以入门。

怎么开发一个App

相信很多人已经接触了Flutter官方的教程，可是跟着写了一遍之后，还是一头雾水，不知道到底应该怎么写一个完整的App。下面看一个用Flutter模仿的有妖气漫画的实例：

屏幕快照 2018-07-12 上午11.46.46.png

这个页面的整个布局都是Widget，在iOS里布局的话，这个必须是一个TableView或者CollectionView，在安卓里应该是ListView,在Flutter里这个Widget也是一个ListView,比较简单。

屏幕快照 2018-07-12 上午11.49.09.png

这个是在一个ListView里套用了Column，就是垂直排列的意思，在iOS里其实可以用tableView解决，这整个页面可以用使用不同的Cell解决。

项目目录结构

结构

具体只有今日,发现这两个模块的实现，其他的还在学习研究中。

三方库

https://pub.dartlang.org 类似cocoapods.org.
第三方库里的图片加载有个(cached_network_image)还是比较好的，可以缓存，每次显示的时候有个Ease动画。具体可以在项目里运行查看。

网络获取：

/// 获取今日 模块的数据
static Future<TodayResult> requestToday() async {
  final response = await http.get(todayURL);
  final map = jsonDecode(response.body);
  final code = map["code"];
  final _data = map["data"];
  final stateCode = _data["stateCode"];
  final message = _data["message"];
  final result = TodayResult(
    code: code, 
    stateCode: stateCode, 
    message: message,
    dayDataList: List<TodayModel>()
  );
  final _returnData = _data["returnData"];
  final _dayDataList = _returnData["dayDataList"];
  if (_dayDataList.length == 0) {
    return result;
  }
  for (int i = 0; i < _dayDataList.length; i++) {
    final _dayItemDataList = _dayDataList[i]["dayItemDataList"];
    final publish = TodayPublishDate.fromJSON(_dayDataList[i]);
    result.dayDataList.add(publish);
    for (int j = 0; j < _dayItemDataList.length; j++) {
      final _dayItemData = _dayItemDataList[j];
      if (j != _dayItemDataList.length-1) {
        final dayItemData = DayItemData.fromJSON(_dayItemData);
        result.dayDataList.add(dayItemData);
      } else {
        final dayItemData2 = DayItemData2.fromJSON(_dayItemData);
        result.dayDataList.add(dayItemData2);
      }
    }
  }
  return result;

Banner滚动：

class BannerWidget extends StatefulWidget {
  final List<String> images;
  BannerWidget(this.images, {Key key}): super(key: key); 
  _BannerWidgetState createState() => _BannerWidgetState();
}

class _BannerWidgetState extends State<BannerWidget> {
  final pageController = PageController(initialPage: 0);
  Timer timer;

  void resetTimer() {
    clearTimer();
    timer = Timer.periodic(Duration(seconds: 3), (timer) {
      if (pageController.positions.isNotEmpty) {
        var i = pageController.page.toInt() + 1;
        pageController.animateToPage(
          i, 
          duration: Duration(milliseconds: 100),
          curve: Curves.linear
        );
        if (i == widget.images.length-1) {
          pageController.jumpToPage(0);
          i = 0;
        }
      }
    });
  }

  void clearTimer() {
    if (timer != null) {
      timer.cancel();
      timer = null;
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    resetTimer();
  }

  @override
  Widget build(BuildContext context){
    if (widget.images.length == 0) {
      return null;
    }
    return SizedBox(
      height: 231.0,
      width: MediaQuery.of(context).size.width,
      child: PageView.builder(
        controller: pageController,
        physics: PageScrollPhysics(parent: ClampingScrollPhysics()),
        itemCount: widget.images.length,
        itemBuilder: (context, index){
          final url = widget.images[index];
          return Image(
            image: CachedNetworkImageProvider(url),
            fit: BoxFit.cover,
          );
        },
      ) 
    );
  }

  @override
  void dispose() {
    // TODO: implement dispose
    clearTimer();
    super.dispose();
  }
}

生成一个卡片的Widget：

Widget _generatorCardWidget(BuildContext context, List<ComicItemModel> list) {
  return Container(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: list.map<Widget>((comic){
        return Container(
          width: (MediaQuery.of(context).size.width-20.0) / 3,
          child: Card(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Image(
                  image: CachedNetworkImageProvider(comic.cover),
                  fit: BoxFit.cover,
                ),
                Container(
                  padding: EdgeInsets.all(5.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(comic.name, style: TextStyle(fontSize: 15.0)),
                      Text(comic.shortDescription, style: TextStyle(fontSize: 12.0, color: Colors.grey))
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }).toList(),
    ),
  );
}

https://github.com/hellolad/you_yao_qi/tree/dev
(选择优化过的dev分支)

–以此来记录 Flutter ^ _^ —