从Android开发者的角度看一看IOS和Flutter中的列表实现

引言：大家都知道，目前IOS和Android是当前移动操作系统的主流，而Flutter作为Google推出的跨平台的UI框架，并且在未来作为Google新系统Fuchsia的开发框架，它采用dart语言编写，前景在目前是被很看好的。如果我们在Android领域已经有了一定深入的了解，去了解IOS平台和Flutter的开发是大有裨益的，可以增强我们对移动端的理解。List作为我们在开发中最常用的控件之一，每个开发者都要对他有一定的掌握，今天我就作为一名原生的Android开发者，从一个Android开发者的角度，来带大家了解一下IOS和Flutter中列表的实现。
今天的例子IOS这里我们采用Objective-C作为开发语言，Flutter我们是用Dart语言。

一.IOS中的列表控件UITableView/UICollectionView

IOS和我们Android有点类似，UIView作为我们所有控件的基类，类似于Android中的View。
列表控件主要有UITableView和UICollectionView来实现的，都是继承自UIView。
UITableView类似于我们Android中的RecyclerView和ListView，UICollectionView类似于Android中的GridView。这两个控件的使用方式很类似，今天我们主要来说UITableView。
在Android中我们展示控件都要通过Activity把我们的UI控件展示给用户，同样的，在IOS中我们展示UI控件需要通过UIViewController，它就类似于我们Android中的Activity。在Android中我们可以通过xml文件来编写我们的布局代码，我们也可通过编写Java代码，在我们的父控件中添加我们的子控件。IOS中同理，我们可以通过xib或者storyboard来给我们的控件建立约束进行可视化布局，也可以通过我们的代码给控件建立约束，来进行布局。

下面来看我们的代码：
1.创建我们的UITableView

 
    //创建列表控件UITableView
    //initWithFrame 指定控件的大小和位置，在IOS中没有Android的五大布局的概念
    //为了适配一般是用AutoLayout和SizeClass，为控件建立约束进行布局。
    //类似Android中的ConstraintLayout
    //指定style为UITableViewStylePlain
    //(还有一种UITableViewStyleGrouped，类似Android中的ExpandListView)
    UITableView * mTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) style:UITableViewStylePlain];
    
    //在主界面中添加我们的UITableView，类似Android中的addView操作
    [self.view addSubview:mTableView];

2.注册Cell
在上面创建好我们的UITableView后，我们如何指定它的item呢。在Android中我们是编写好item的布局文件，在adapter实现item和布局的绑定。在ios中我们调用UITableView的registerClass方法为列表注册Cell。

    //为UITableView注册cell,并且指定cell标识，为了复用（类似于Android中的item复用）
    //可以注册多个cell,不同位置展示不同的cell
    [mTableView registerClass:[CustomCell class] forCellReuseIdentifier:@"cellID"];

3.自定义Cell
在上一步我们为UITableView注册了Cell为CustomCell，下面我们就来自定义我们的Cell。
我们创建CustomCell继承自UITableViewCell，重写它的方法。这一步的操作相当于Android中编写item布局。
代码如下：

//重写此方法自定义Cell
-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{
    //调用父类方法，（类似Android中调用父类的方法）
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if(self){
    
        //创建一个UIImageView 类似Imageview
        UIImageView * headImg = [[UIImageView alloc] init];
        //设置图片
        [headImg setImage:[UIImage imageNamed:@"person_icon.png"]];

        //创建一个UILabel 类似TextView
        UILabel * tvName = [[UILabel alloc] init];
        //设置字体颜色
        tvName.textColor = [UIColor blackColor];
        //设置字体大小
        tvName.font = [UIFont systemFontOfSize:14];
        //设置文本
        tvName.text = @"sk";
        
        //添加cell的子View
        [self addSubview:headImg];
        [self addSubview:tvName];
        
        //使用第三方框架Masonry设置控件约束 类似Android的ConstraintLayout
        [headImg mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerY.equalTo(self);
            make.left.equalTo(self).offset(15);
            make.size.mas_equalTo(CGSizeMake(40, 40));
        }];
        
        //设置约束
        [tvName mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerY.equalTo(self);
            make.left.equalTo(headImg.mas_right).offset(10);
        }];
        
    }
    return self;
}

4.实现协议，重写协议方法
编写好我们的Cell之后，我们就要考虑如何把它展示在我们的列表上了。
在Android中，我们通过继承BaseAdapter或者RecyclerView.Adapter，重写它的方法。来完成我们的设置，例如getCount()，getView()方法等。然后再调用ListView或者RecyclerView的setAdapter方法实现绑定。
在IOS里，我们想要展示我们的item，并且确定item的个数等操作，我们必须要实现两个协议，
UITableViewDelegate,UITableViewDataSource。协议好比Java中的接口，在Java里当一个实现了一个接口，就要重写接口里的方法。在IOS中我们实现了协议，就要实现这个协议中的方法。
下面我们指定我们当前的Controller实现我们的协议：

//类似Java中实现接口的操作
@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>

 //指定实现协议的类 类似Android setOnCilckListener等操作
 //.delegate等于调用它的set方法
 mTableView.delegate = self;
 mTableView.dataSource = self;

重写协议中的方法，这里主要介绍四个方法，还有其他方法有需要自行了解：

//返回item的个数。好比Adapter中的getCount()方法，这里我们先写死。
-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    //如果有数据源 可以return dataArray.count;
    return 10;
}

//返回Cell高度，这里我们也先写死
-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 60;
}

//返回cell，可以通过判断indexPath展示不同的cell，这里先写一种
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    CustomCell * cell = [tableView dequeueReusableCellWithIdentifier:@"cellID"];
    return cell;
}

//类似onItemClickListener的回调
-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    //处理item点击事件 
}

好了到这里IOS中的列表的简单实现就完成了，运行模拟器。程序展示如下：

二.Flutter中的列表ListView/GridView

在Flutter中就和我们Android和IOS定义就有点区别了。在Flutter中，所有的东西都是组件，我们的布局，页面，等等全部都是Widget。
在Flutter中我们一般通过ListView/GridView来实现我们的列表展示。
这里我们用ListView来做为演示。
相比Android和IOS，Flutter的实现相对来说就没那么复杂了。

1.当我们直接构造我们的ListView并指定它的children，这种情况下ListView更加像我们的ScrollerView.如下：

      //省略了部分代码
      home: Scaffold(
        appBar: AppBar(
          title: Text("列表展示"),
          centerTitle: true,
        ),
        //这里省略了new关键字 构造了一个ListView
        body: ListView(
          //children指定了一个widget列表
          children: <Widget>[Text("item1"),Text("item2"),Text("item3"),Text("item4")],
        ),
      ),

这种情况下，一开始就会渲染所有的列表，当一次性要加载大量列表时，并不适用。
运行程序如下：

2.下面我们介绍我们常用的方法，通过ListView.builder()来构造我们的列表。

   home: Scaffold(
        appBar: AppBar(
          title: Text("列表展示"),
          centerTitle: true,
        ),
        body: ListView.builder(
             //item个数
            itemCount: 100,
            itemBuilder: (context, index) {
              //返回item 类似getView的操作
              //index对应当前的索引
              return MyItem();
            }
        ),
      )


class MyItem extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      //指定外间距
      margin: EdgeInsets.all(15),
      child:  Row(
        children: <Widget>[
          //类似于ImageView
          Image.asset("images/person_icon.png",
            width: 40,
            height: 40,),
          //指定text的监督
          Container(
            margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
            //类似于TextView
            child:  Text("sk") ,
          )
        ],
      ),
    );
  }
}

运行程序展示结果如下：

3.如果我们需要展示分割线可以使用ListView.separated()构造我们的列表
代码如下：

   home: Scaffold(
        appBar: AppBar(
          title: Text("列表展示"),
          centerTitle: true,
        ),
        body: ListView.separated(
             //item个数
            itemCount: 100,
            itemBuilder: (context, index) {
              //返回item 类似getView的操作
              //index对应当前的索引
              return MyItem();
            },
            separatorBuilder: (BuildContext context, int index) {
              return Divider();
            },
        ),
      ),

运行程序如下展示如下：

4.为item添加点击事件
如果我们需要为Item添加点击事件，很简单，我们在外面套一层FlatButton指定它的onPressed方法。
代码如下：

home: Scaffold(
        appBar: AppBar(
          title: Text("列表展示"),
          centerTitle: true,
        ),
        body: ListView.separated(
             //item个数
            itemCount: 100,
            itemBuilder: (context, index) {
            //这里好比我们把函数作为参数
            return FlatButton(onPressed: (){print("点击了$index");}, child: MyItem());
            },
            separatorBuilder: (BuildContext context, int index) {
              return Divider();
            },
        ),
      ),

好了，今天暂时就说到这里了，这里只是简单的介绍了一下IOS和Flutter中的列表实现，还有更深入的细节，感兴趣的，可以自己尝试着研究研究。