Flutter ListView详解

///默认构建
Widget listViewDefault(List list) {
List _list = new List();
for (int i = 0; i < list.length; i++) {
_list.add(new Center(
child: new Text(list[i].age.toString()),
));
}

// 添加分割线
var divideList =
ListTile.divideTiles(context: context, tiles: _list).toList();
return new Scrollbar(
child: new ListView(
// 添加ListView控件
children: _list, // 无分割线
// children: divideList, // 添加分割线/
),
);
}

this.leading, // item 前置图标
this.title, // item 标题
this.subtitle, // item 副标题
this.trailing, // item 后置图标
this.isThreeLine = false, // item 是否三行显示
this.dense, // item 直观感受是整体大小
this.contentPadding, // item 内容内边距
this.enabled = true,
this.onTap, // item onTap 点击事件
this.onLongPress, // item onLongPress 长按事件
this.selected = false, // item 是否选中状态

/// ListTile代码
Widget listViewListTile(List list) {
List _list = new List();
for (int i = 0; i < list.length; i++) {
_list.add(new Center(
child: ListTile(
leading: new Icon(Icons.list),
title: new Text(list[i].name),
trailing: new Icon(Icons.keyboard_arrow_right),
),
));
}
return new ListView(
children: _list,
);
}

//设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直
scrollDirection: Axis.vertical,
//内间距
padding: EdgeInsets.all(10.0),
//是否倒序显示 默认正序 false 倒序true
reverse: false,
//false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。
primary: true,
//确定每一个item的高度 会让item加载更加高效
itemExtent: 50.0,
//内容适配
shrinkWrap: true,
//item 数量
itemCount: list.length,
//滑动类型设置
physics: new ClampingScrollPhysics(),
//cacheExtent 设置预加载的区域
cacheExtent: 30.0,
//滑动监听
// controller ,

shrinkWrap特别推荐
child 高度会适配 item填充的内容的高度,我们非常的不希望child的高度固定，因为这样的话，如果里面的内容超出就会造成布局的溢出。
shrinkWrap多用于嵌套listView中 内容大小不确定 比如 垂直布局中 先后放入文字 listView （需要Expend包裹否则无法显示无穷大高度 但是需要确定listview高度 shrinkWrap使用内容适配不会有这样的影响）

primary
If the [primary] argument is true, the [controller] must be null.
在构造中默认是false 它的意思就是为主的意思，primary为true时，我们的controller 滑动监听就不能使用了

physics
这个属性几个滑动的选择
AlwaysScrollableScrollPhysics() 总是可以滑动
NeverScrollableScrollPhysics禁止滚动
BouncingScrollPhysics 内容超过一屏 上拉有回弹效果
ClampingScrollPhysics 包裹内容 不会有回弹

cacheExtent
这个属性的意思就是预加载的区域
设置预加载的区域 cacheExtent 强制设置为了 0.0，从而关闭了“预加载”

controller
滑动监听，我们多用于上拉加载更多，通过监听滑动的距离来执行操作。

///listView builder 构建
Widget listViewLayoutBuilder(List list) {
return ListView.builder(
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(10.0),
reverse: false,
primary: true,
itemExtent: 50.0,
shrinkWrap: true,
itemCount: list.length,
cacheExtent: 30.0,
physics: new ClampingScrollPhysics(),
// controller ,
itemBuilder: (context, i) => new Container(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Text(
“$list[i].name",style:newTextStyle(fontSize:18.0,color:Colors.red),),newText("${list[i].age}”,
style: new TextStyle(fontSize: 18.0, color: Colors.green),
),
new Text(
“${list[i].content}”,
style: new TextStyle(fontSize: 18.0, color: Colors.blue),
),
],
),
));
}

我们在正常的需求中大部分是需要item的分割线的，而在builder模式中使用divide 会有种情况（divide放在item的布局中 通过Column），我们会发现divide并没有直接延时到item两端而是会有左右padding。
所以我们可以通过另外一种方式去实现。

1.扩大list容积 为什么是两倍，因为我们给了divide的index
Widget listView = new ListView.builder(
itemCount: list.length * 2 ,
itemBuilder: (context, index) => itemDividerRow(context, index));
2. 根据下标分配item类型
itemDividerRow(context, int i) {
if (i.isOdd) {//是奇数
return new Divider( //返回分割线
height: 1.0,
);
} else {
i = i ~/ 2;
return getRowWidget(context, orderList[i]); //返回item 布局
}
}

​
这样我们就可以去实现了，builder模式分割线

它和itemBuilder同时进行渲染，在同一个item下标中可以额外的修饰或者区分

separatorBuilder: (content, index)

itemBuilder: (content, index)

separated设置分割线就非常的简单了，我们直接在separatorBuilder进行操作
separatorBuilder: (content, index) {

return new Divider(）
｝

/// listView separated 构建 用于多类型 分割
Widget listViewLayoutSeparated(List list) {
return ListView.separated(
itemCount: list.length,
separatorBuilder: (content, index) {
//和itemBuilder 同级别的执行
if (index == 2) {
return new Container(
height: 40.0,
child: new Center(
child: new Text(“类型1”),
),
color: Colors.red,
);
} else if (index == 7) {
return new Container(
height: 40.0,
child: new Center(
child: new Text(“类型2”),
),
color: Colors.blue,
);
} else if (index == 14) {
return new Container(
height: 40.0,
child: new Center(
child: new Text(“类型3”),
),
color: Colors.yellow,
);
} else {
return new Container();
}
},
itemBuilder: (content, i) {
return new InkWell(
child: new Container(
height: 30.0,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Text(
“$list[i].name",style:newTextStyle(fontSize:18.0,color:Colors.red),),newText("${list[i].age}”,
style: new TextStyle(fontSize: 18.0, color: Colors.green),
),
new Text(
“${list[i].content}”,
style: new TextStyle(fontSize: 18.0, color: Colors.blue),
),
],
)),
onTap: () {
print(“1111”);
},
);
// return ;
},
);
}