Flutter学习基础组件之ListView

ListView相当于UITableView/UIScrollView,常用属性：

padding: EdgeInsets.all(20),//设置内边距上下左右都是20pt
children:[],//一个数组，里面是Widget,可以理解为cell
scrollDirection:Axis.horizontal,//滚动方向，这里是水平滚动，:Axis.vertical为默认值，垂直滚动。

ListTile是flutter封装好的cell组件,常用属性：

leading: Icon(Icons.home,size: 40,),//左侧的图片，可以是Image
title: Text('标题'),//标题
subtitle: Text('副标题'),//副标题
trailing: Icon(Icons.send),//右侧图片

基本用法：

class TWListView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(20),
      children: [
        ListTile(leading: Icon(Icons.home,size: 40,),title: Text('标题'), subtitle: Text('副标题'),trailing: Icon(Icons.send),),//也能放Image
        ListTile(leading: Icon(Icons.home,size: 40,),title: Text('标题'), subtitle: Text('副标题'),trailing: Icon(Icons.send),),
        ListTile(leading: Icon(Icons.home,size: 40,),title: Text('标题'), subtitle: Text('副标题'),trailing: Icon(Icons.send),),
        ListTile(leading: Icon(Icons.home,size: 40,),title: Text('标题'), subtitle: Text('副标题'),trailing: Icon(Icons.send),),
        ListTile(leading: Icon(Icons.home,size: 40,),title: Text('标题'), subtitle: Text('副标题'),trailing: Icon(Icons.send),),
        ListTile(leading: Icon(Icons.home,size: 40,),title: Text('标题'), subtitle: Text('副标题'),trailing: Icon(Icons.send),),
        ListTile(leading: Icon(Icons.home,size: 40,),title: Text('标题'), subtitle: Text('副标题'),trailing: Icon(Icons.send),),
      ],
    );
  }
}

动态列表：

可以用Container来约束ListView的宽高
itemCount: _dataList.length,//数组元素的个数
itemBuilder: //IndexedWidgetBuilder类型，此类型是一个返回值是Widget,带2个参数的方法，里面返回ListTile，会自动循环生成cell,index从0到itemCount-1

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    List _dataList = [
      '标题标题标题标题标题标题标题标题', '标题标题标题标题标题标题标题标题', '标题标题标题标题标题标题标题标题',
      '标题标题标题标题标题标题标题标题', '标题标题标题标题标题标题标题标题', '标题标题标题标题标题标题标题标题',
      '标题标题标题标题标题标题标题标题', '标题标题标题标题标题标题标题标题', '标题标题标题标题标题标题标题标题',
      '标题标题标题标题标题标题标题标题', '标题标题标题标题标题标题标题标题', '标题标题标题标题标题标题标题标题',
    ];
    return Container(
      width: 300,height: 600,
      color: Colors.red,
      child: ListView.builder(
          itemCount: _dataList.length,
          itemBuilder: (context,index){
            return ListTile(title: Text(_dataList[index]+index.toString()),);
          }
      ),
    );
  }
}