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')
);
}