从 Android 开发者的角度看一看 IOS 和 Flutter 中的列表实现
}
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:(UITableVie
w *)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();
},
),
),
运行程序如下展示如下：
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论