从 Android 开发者的角度看一看 IOS 和 Flutter 中的列表实现
//创建列表控件 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){
//创建一个 UI
ImageView 类似 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,
评论