如需转载，请注明出处：Flutter学习笔记（12）--列表组件
在日常的产品项目需求中，经常会有列表展示类的需求，在Android中常用的做法是收集数据源，然后创建列表适配器Adapter，将数据源传递到Adapter中，最终进行列表数据的展示，那么在Flutter中如何处理列表数据呢？
在Flutter中，用ListView来显示列表项，其支持垂直和水平方向展示，通过过一个属性我们就可以控制其方向，列表有以下分类：
1.水平的列表
2.垂直的列表
3.数据量非常大的列表
4.矩阵式的列表
垂直列表组件
ListView组件属性及描述 属性名 类型 默认值 说明ScrollDirection Axis Axis.vertical 列表的排列方向，Axis.vertical为垂直方向，Axis.horizontal为水平方向
padding EdgeInsetsGeometry 列表内部的空白区域，如果有child的话，child位于padding内部
reverse bool false 组件排列反向
children List<Widget> 列表元素，注意List元素全部为Widget类型
示例代码如下：
import 'package:flutter/material.dart'; import 'package:fluttertoast/fluttertoast.dart'; void main() => runApp(DemoApp()); class DemoApp extends StatelessWidget{ @override Widget build(BuildContext context) { return new MaterialApp( title: 'ListView Demo', home: new ListViewDemo(), ); } } class ListViewDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: Text('ListView Dmoe'), leading: new Icon(Icons.menu,size: 40,color: Colors.white,), actions: <Widget>[ new IconButton(icon: Icon(Icons.search), onPressed: (){ Fluttertoast.showToast(msg: '点击了搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM); }) ], ), body: new ListView( // padding: new EdgeInsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding padding: new EdgeInsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding children: <Widget>[ //数据源 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第一条数据'),), ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第二条数据'),), ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第三条数据'),), ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第四条数据'),), ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第五条数据'),), ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第六条数据'),), ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第七条数据'),), ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第八条数据'),), ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第九条数据'),), ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第十条数据'),), ], ), ); } }