Flutter-ListView的使用说明
1、ListView定义中的常用属性
1⃣️、scrollDirection = Axis.vertical,//设置listView是水平布局方式horizontal，还是垂直布局方式vertical,
2⃣️、 bool reverse = false,//是否反转ListView上面的children组件倒序进行排列
3⃣️、EdgeInsetsGeometry padding//设置内边距
4⃣️、List<Widget> children = const <Widget>[],//设置ListView的孩子们
2、ListView的简单使用方式一
ListView在使用过的过程中有点类似于TableView和CollectionView，可以复杂的页面进行布局。这里首先展示最简单的一种布局方式
ListView(
padding: EdgeInsets.all(16.0),//设置内边距为16
children: <Widget>[
Text('dateListView1',style: TextStyle(
color: Colors.red,
fontSize: 20.0,
backgroundColor: Colors.grey
),),
Text('dateListView2',style: TextStyle(
color: Colors.black,
fontSize: 20.0,
backgroundColor: Colors.grey
),),
Text('dateListView3',style: TextStyle(
color: Colors.orange,
fontSize: 20.0,
backgroundColor: Colors.grey
),),
Text('dateListView4',style: TextStyle(
color: Colors.green,
fontSize: 20.0,
backgroundColor: Colors.grey
),),
Text('dateListView5',style: TextStyle(
color: Colors.lightBlue,
fontSize: 20.0,
backgroundColor: Colors.grey
),),
],
)
运行结果如下：
listview_demo1.jpg
3、使用for循环的方式ListView
在ListView里面通过手动添加的方式创建一组children固然可行，但是显得不够搞笑；通常在一组展示样式相同情况下，我们可以使用for循环厂进行创建，演示代码如下：
Widget _listView_forDemo() {
List<Widget> __createChildren() {
List<Widget> children = new List();
for(int index = 0; index < 20; index ++) {
children.add(
Container(
margin: EdgeInsets.only(bottom: 16.0,left: 16.0),
child: Text('dateListView$index', style: TextStyle(
color: Colors.black,
backgroundColor: Colors.grey
),),
)
);
}
return children;
}
return ListView(
children: __createChildren(),
);
}
运行效果请自行拷贝代码查看效果。
4、使用ListView.builder
ListView.builder是Flutter主动提供的创建视图方法，在使用过程中一定要实现itemCount、itemBuilder两种方法；itemCount设置children的个数，itemBuilder接受两个变量，分别为Context、Int；演示代码如下：
Widget _listView_builder () {
return ListView.builder(
itemCount: 30,
itemBuilder: (context, index) {
//可以返回任意类型的Widget
return Container(
height: 46.0,
width: 100,
padding: EdgeInsets.all(10.0),
child:Text('dateListView$index', style: TextStyle(
color: Colors.black,
backgroundColor: Colors.grey
),),
);
});
}
请自行运行代码查看；itemBuilder可以返回任意类型的Widget。
5、使用ListView.custom
ListView.custom是Flutter主动提供的创建视图的方法，在使用中一定要实现childrenDelegate、childCount两种方法，childCount是设置children的个数，childrenDelegate代理方法来实现创建子Widget，这里我们使用SliverChildBuilderDelegate代理来创建。示例代码如下：
Widget _listView_childrenDelegate() {
return ListView.custom(
childrenDelegate: SliverChildBuilderDelegate((context, index){
return Container(
height: 46.0,
width: 100,
padding: EdgeInsets.all(10.0),
child:Text('dateListView$index', style: TextStyle(
color: Colors.red,
backgroundColor: Colors.grey
),),
);
},
childCount: 30,
),
);
}
请自行运行代码查看；SliverChildBuilderDelegate里面可以返回任意类型的Widget。
6、使用ListView.separated
ListView.separated也是Flutter主动提供的创建视图方法，这种方式创建的视图是带有分割线的。这个方式创建的视图必须要实现三种方法：itemBuilder、separatorBuilder、itemCount；itemCount用来设置子Widget个数，separatorBuilder设置分割线，这里我们使用Divider()，也可以自行定义，itemBuilder是创建实图提供的方法，接受两个参数context, index。演示代码如下：
Widget _listView_separated() {
return ListView.separated(
itemBuilder: (context, index) {
return Container(
height: 46.0,
width: 100,
padding: EdgeInsets.all(10.0),
child:Text('dateListView$index', style: TextStyle(
color: Colors.orange,
backgroundColor: Colors.grey
),),
);
},
separatorBuilder: (context, index) => Divider(),//设置分割线，
itemCount: 30
);
}
请自行运行代码查看；itemBuilder可以返回任意类型的Widget。
7、使用ListTile创建新闻类型的视图
在ListView里面可以使用ListTile组件来创建视图，ListTile类似于新闻类型的一个一个小WIdget，在ListTile里面可以自行设定leading：表示左边的小Widget，可以是一个图片或者别的；trailing表示右边的小Widget，可以是一个图片或者别的；title表示标题，subtitle表示副标题。演示代码如下：
Widget _listView_listTile() {
return ListView(
children: <Widget>[
ListTile(
// trailing: Image.network(src),//右边图片
leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
title: Text('ListView_ListTile的使用',style: TextStyle(
fontSize: 20.0,
color: Colors.black
),),
subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
style: TextStyle(
fontSize: 14.0,
color: Colors.black45
),),
),
ListTile(
leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
title: Text('ListView_ListTile的使用',style: TextStyle(
fontSize: 20.0,
color: Colors.black
),),
subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
style: TextStyle(
fontSize: 14.0,
color: Colors.black45
),),
),
ListTile(
leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
title: Text('ListView_ListTile的使用',style: TextStyle(
fontSize: 20.0,
color: Colors.black
),),
subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
style: TextStyle(
fontSize: 14.0,
color: Colors.black45
),),
),
ListTile(
leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
title: Text('ListView_ListTile的使用',style: TextStyle(
fontSize: 20.0,
color: Colors.black
),),
subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
style: TextStyle(
fontSize: 14.0,
color: Colors.black45
),),
),
ListTile(
leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
title: Text('ListView_ListTile的使用',style: TextStyle(
fontSize: 20.0,
color: Colors.black
),),
subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
style: TextStyle(
fontSize: 14.0,
color: Colors.black45
),),
),
ListTile(
leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
title: Text('ListView_ListTile的使用',style: TextStyle(
fontSize: 20.0,
color: Colors.black
),),
subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
style: TextStyle(
fontSize: 14.0,
color: Colors.black45
),),
),
ListTile(
leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
title: Text('ListView_ListTile的使用',style: TextStyle(
fontSize: 20.0,
color: Colors.black
),),
subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
style: TextStyle(
fontSize: 14.0,
color: Colors.black45
),),
),
ListTile(
leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
title: Text('ListView_ListTile的使用',style: TextStyle(
fontSize: 20.0,
color: Colors.black
),),
subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
style: TextStyle(
fontSize: 14.0,
color: Colors.black45
),),
),
],
);
}
现在运行查看类似新闻类型的ListView
listview_title.jpg
8、ListView.builder与ListTile结合的方式创建
ListView.builder的itemBuilder方法接受两个参数context和int，我们可以利用这点来自定义一个方法去创建Widget；
演示代码如下：
Widget _listview_builder_listtile() {
return ListView.builder(
itemCount: 20,
itemBuilder:_getListTileData
);
}
//自定义方法
Widget _getListTileData(context,index){
return ListTile(
title: Text('ListView_ListTile的使用..$index'),
leading:Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
subtitle:Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用..$index')
);
}