学习背景

随着flutter技术越来越趋于稳定，业内对该技术的追捧热度越来越高；flutter确实是一个优秀的跨平台框架或者即将成为一个优秀的跨平台框架；同时最近看很多招聘信息都要求开发人员具备一定的flutter技术和实战经验；基于以上几点，本人想对flutter做一个系统的学习，并记录下来。本人做为一个iOS开发者，在接下来的对flutter的学习上，基本上会以iOS相关的东西做类比或者比较，如果你是一个iOS开发人员，会很容易理解。

flutter环境配置

此处省略几百个字，关于环境搭建可以直接访问Flutter中文网，里面有非常详细的介绍，这里就不赘述了。值得注意的是环境变量的相关配置。
开发工具：Android Studio （因为flutter是谷歌的孩子,所有用这个IDE比较友好）

main.dart

1.从第一行代码开始

import "package:flutter/material.dart"

这个是Flutter 的UI框架,对应到iOS开发中其实就是：

#import <UIKit/UIKit.h>
或者
@import UIKit

这样就一目了然了吧。

2. 万物的起源 main()

void main() {
  runApp(MyApp())
}
//只有一行代码的写法可以是这样，这里跟ES6的箭头语法含义有别
void main() => runApp(MyApp())

还是那么的熟悉，对应到iOS下

int main(int argc, char * argv[]){
    return UIApplicationMain(argc, argv,nil,NSStringFromClass([AppDelegate class]));
    //flutter中 runApp() 就可以理解为 UIApplicationMain()
    //flutter中 MyApp() 可以理解为AppDelegate
}

3.flutter下的AppDelegate (App())

class App extends StatelessWidget {
  @overrid
  Widget build(BuildContext context) {
    return MaterialApp(     //一种界面风格(后续详细介绍)
          debugShowCheckedModeBanner: false,  // 右上角的Debug标签,默认是显示的
          home: Home(),        //根页面(iOS下的window.rootViewController),Home()是我们自定的Widget
          theme: ThemeData(    //设置一些界面的风格
              primaryColor: Colors.yellow,  //主色调
          ),
    )
  }
}

Widget是什么:

flutter中,显示在界面中的都是各种Widget部件，相当于iOS下的UIView控件；在iOS下我们可以继承UIView 做各种自定义UI组件，同样在flutter 也可以继承Widget 自定义各种部件;

Widget分类:

flutter中有2中Widget(也就是说有两种UIView)，一种是可变的，一种是不可变的（听起来像iOS下的集合）
1.StatefulWidget: 可变的部分主要体现在state(怎么感觉像Vuex??)，state的改变会触发build() 重新渲染(内部做了很多性能处理)。后续的文章再深度研究。。。
2.StatelessWidget: 一个静态的Widget，不具备动态刷新能力(我的理解是他就是一个static 类型的)
3.快速创建一个Widget

stf+回车,快速创建 statefulWidget
stl+回车,快速创建 statelessWidget

自定义Widget-Home

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(   //一个Widget,类似于iOS下的UINavgationController
      backgroundColor:Colors.grey,     // view.backgroundColor
      appBar: AppBar(   //这里接受一个Widget,可以自定义的这里用一个AppBar(),ios下的navgationBar
          title: Text('FlutterDemo'),     //标题
      ),
      body: BaseWidgetDemo(),     //除了navigationbar 的其他部分(self.view)，接受一个Widget 
    )
  }
}

写到这里可以发现整个UI界面就是层层的Widget嵌套来的。
接下来看看BaseWidgetDemo 这个Widget

class BaseWidgetDemo extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return Container(     //一个具备布局能力的高级Widget(基于UIView的一个View或者理解为div),比较常用
      color: Color.yellow,
      child: Row(    //child类似于addSubviews, Row/Column/Stack 布局方式(web的盒子模型)
        children:<Widget>[              //Widget元素集合(UIView.subViews)
            Container(                  //一个UIView
                  width:100,            //UIView.frame.size.width
                  height:100,           //UIView.frame.size.height
                  padding: EdgeInsets.only(left:20,right:10,top:10,bottom:10),
                     //约束，iOS关于paddding margin 通常是使用Masory ,这里也类似css
                  color: Color.red,  //UIView.backgroundColor
                  child:Icon(Icons.add),     //UIView.layer.contents
            ),
            Text('我是泽泽')，// 一个UILabel
            .......    
         ],
      ),
    );
  }
}

以上代码块翻译为iOS就是：自定义了一个包含一个UIView 和 一个UILabel 的UIView，不同点在于iOS的UIView 没有布局方式的设置，不过还是很好理解的。如果你玩过SwiftUI的话，你就会发现这个布局方式的概念是有体现的。或者理解为web开发的Flexbox布局;
效果图：

baseWidgetDemo.png

ListViewDemo （使用一下Flutter 下的tableView）

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(   //依然是一个Widget，builder()是构造方法，这里就类似于
                                        //  iOS下的UITableView的Delegate和DataSource
      itemCount: datas.length,   //- numberOfRowsInSection: 
      itemBuilder:  _cellForRow, //- cellForRowAtIndexPath: 此处的itemBuilder 是一个
                              // func回调，为了代码的整洁，把这部分扔给了 _cellForRow 的方法
    );
  },
  //这里其实就是iOS下的 cellForRowAtIndexPath: 
  //自定义Cell 并返回
  //iOS下返回一个UITableViewCell,这里返回一个Widget
  //这里的datas 是我提前定义好的json测试数据
  Widget _cellForRow(BuildContext contex, int index) {
        return Container(
          color:Colors.white,
          margin: EdgeInsets.all(10),
          child: Column(   //这个里面是我们自定义cell 的具体内容部分
              children: <Widget>[
                  Image.network(datas.[index].imageUrl), // flutter 加载一张网络图片就是如此简单
                  Text(          // UILabel
                      datas[index].name,   //UILabel.text
                      style: TextStyle(    //这里不像UILabel,样式需要通过TextStyle设置
                          fontWeight: FontWeight.w800,
                          fontSize: 18.0,
                          fontStyle: FontStyle.values[1],
                      )
                  ),
              ]
          )
        );
  }
}

至此，flutter的cellForRowAtIndexPath：就写完了。 这里主要就是创建了一个带有一个UIImageView 和 UILabel 的UITableViewCell 并返回给了ListView。整个child部分其实应该放在一个单独的自定义Widget中, 就比如我们自定义cell。
效果图：

Simulator Screen Shot - iPhone 11 - 2020-06-08 at 14.14.18.png

总结

这篇文章主要是针对iOS开发人员快速入门flutter写的，希望大家通过这篇文章结合我们的iOS开发能够对flutter有一个初步的认识。笔者目前也是刚入flutter的坑，正在一步步探索中，系列文章会持续更新分享。不得不说Hot reload 真是个好东西。