一、ListView

一个列表控件。ListView与GridView均继承自BoxScrollView，拥有共同的参数，可参考【Flutter】十七、Flutter中常用的布局容器——网格布局GridView中的参数说明。

1.1 创建ListView的多种方式

1.1.1 ListView()

使用示例：

import 'package:flutter/material.dart';

class ListViewDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return getListViewOne();
  }
  
  ListView getListViewOne () {
    return ListView(
        children: getList(20)
    );
  }

  List<Widget> getList (int length) {
    List<Widget> list = List();
    for (int i = 0; i < length; i++) {
      list.add(ListTile(
        title: Text('标题$i'),
        subtitle: Text('副标题$i'),
        trailing: Icon(Icons.keyboard_arrow_right),
        isThreeLine: false,
        dense: false,
        contentPadding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
        enabled: true,
        onTap: (){
          print('tap');
        },
        onLongPress: () {
          print('longPress');
        },
        selected: i.isEven ? true : false,
        leading: CircleAvatar(
          backgroundImage: NetworkImage('http://pic31.nipic.com/20130710/12018626_110428606000_2.jpg')
        ),
      ));
    }
    return list;
  }
}

1.1.2 ListView.builder()

  ListView getListViewTwo () {
    return ListView.builder(
      itemBuilder: (content, index) => ListTile(
        title: Text('标题$index'),
        subtitle: Text('副标题$index'),
        trailing: Icon(Icons.keyboard_arrow_right),
        isThreeLine: false,
        dense: false,
        contentPadding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
        enabled: true,
        onTap: (){
          print('tap');
        },
        onLongPress: () {
          print('longPress');
        },
        selected: index.isEven ? true : false,
        leading: CircleAvatar(
            backgroundImage: NetworkImage('http://pic31.nipic.com/20130710/12018626_110428606000_2.jpg')
        ),
      ),
      itemCount: 30,
    );
  }

1.1.3 ListView.separated()

可在列表项之间生成分割线。

  ListView getListViewThree () {
    return ListView.separated(
      itemBuilder: (context, index) => ListTile(
        title: Text('标题$index'),
        subtitle: Text('副标题$index'),
        trailing: Icon(Icons.keyboard_arrow_right),
        isThreeLine: false,
        dense: false,
        contentPadding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
        enabled: true,
        onTap: (){
          print('tap');
        },
        onLongPress: () {
          print('longPress');
        },
        selected: index.isEven ? true : false,
        leading: CircleAvatar(
            backgroundImage: NetworkImage('http://pic31.nipic.com/20130710/12018626_110428606000_2.jpg')
        ),
      ),
      padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 15.0),
      separatorBuilder: (context, index) => Divider(
        color: Colors.grey[400],
        height: 1.0,
        thickness: 1.0,
      ),
      itemCount: 20,
    );
  }

1.1.4 ListView.custom()

  ListView getListViewFour () {
    return ListView.custom(
      childrenDelegate: SliverChildBuilderDelegate((context, index) => ListTile(
        title: Text('标题$index'),
        subtitle: Text('副标题$index'),
        trailing: Icon(Icons.keyboard_arrow_right),
        isThreeLine: false,
        dense: false,
        contentPadding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
        enabled: true,
        onTap: (){
          print('tap');
        },
        onLongPress: () {
          print('longPress');
        },
        selected: index.isEven ? true : false,
        leading: CircleAvatar(
            backgroundImage: NetworkImage('http://pic31.nipic.com/20130710/12018626_110428606000_2.jpg')
        ),
      ),
      childCount: 30),
    );
  }

二、ListTile

2.1 ListTile属性说明

ListTile({
    Key key,
    this.leading,
    this.title,
    this.subtitle,
    this.trailing,
    this.isThreeLine = false,
    this.dense,
    this.contentPadding,
    this.enabled = true,
    this.onTap,
    this.onLongPress,
    this.selected = false,
  })

属性	说明
leading	显示在标题前的小部件，可以时图标或图片
title	标题
subtitle	副标题
trailing	右侧图标
isThreeLine
dense	dense为true会更小
contentPadding	内边距
enabled	是否可用
onTap	点击事件
onLongPress	长按事件
selected	选中，被选中后字体颜色与主题色一致

三、下拉刷新列表实现

class InfiniteListDemo extends StatefulWidget{
  @override
  _InfiniteListDemoState createState() => _InfiniteListDemoState();

}

class _InfiniteListDemoState extends State<InfiniteListDemo>{
  static const loadingTag = '#loading#';
  List<String> _words = <String>[loadingTag];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getWords(30);
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.separated(
      physics: BouncingScrollPhysics(),
      itemBuilder: (context, index){
        if (_words[index] == loadingTag) { // 尾部
          if (_words.length - 1 < 100) {
            //获取数据
            getWords(10);
            //加载时显示loading
            return Container(
              padding: const EdgeInsets.all(16.0),
              alignment: Alignment.center,
              child: SizedBox(
                  width: 24.0,
                  height: 24.0,
                  child: CircularProgressIndicator(strokeWidth: 2.0)
              ),
            );
          } else {
            //已经加载了100条数据，不再获取数据。
            return Container(
                alignment: Alignment.center,
                padding: EdgeInsets.all(16.0),
                child: Text("没有更多了", style: TextStyle(color: Colors.grey),)
            );
          }
        }
        return ListTile(
          title: Text(_words[index]),
        );
      },
      separatorBuilder: (context, index) => Divider(
        color: Colors.grey[400],
        height: 1.0,
        thickness: 1.0,
        indent: 15.0,
        endIndent: 15.0,
      ),
      itemCount: _words.length,
    );
  }

  void getWords(int length) {
    Future.delayed(Duration(seconds: 2)).then((e) {
      _words.insertAll(_words.length - 1 , generateWordPairs().take(length).map((e) => e.asPascalCase).toList());
      setState(() {

      });
    });
  }

}