flutter之ListView

定义数据源

class listItemModel {
  const listItemModel ({
    this.title,
    this.subTitle,
    this.imageUrl,
  });

  final String title;
  final String subTitle;
  final String imageUrl;
}

final List<listItemModel> items = [
  listItemModel(
    title: '大耳朵图图',
    subTitle: '突然想到的',
    imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559384010222&di=f4a0b36f7466387d6a0b909186ad0c86&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180707%2F05%2F1530911272-gKxRVwjmpN.jpg',
  ),
  listItemModel(
      title: '哆啦a梦',
      subTitle: '机器猫！！',
      imageUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2390044523,1847392963&fm=26&gp=0.jpg'
  ),
  listItemModel(
    title: '一休哥',
    subTitle: '我在思考问题',
    imageUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559384450492&di=c410bbebf7e2974897affb2e1ebdfff8&imgtype=0&src=http%3A%2F%2Fwww.dadou.com%2FUpload%2FFckEditImage%2FQQ%25BD%25D8%25CD%25BC20131217160957.png',
  ),
  listItemModel(
    title: '忍者神龟',
    subTitle: '忍者神龟。。。。',
    imageUrl: 'http://images.ali213.net/picfile/pic/2010-03-24/500_12565963760.jpg',
  ),
  listItemModel(
    title: '光头强',
    subTitle: '我是光头强。。',
    imageUrl: 'http://img08.oneniceapp.com/upload/avatar/2017/12/07/e5521550e7dc656645c07f1efb0bac58.jpg',
  ),
  listItemModel(
    title: '熊二',
    subTitle: '俺是熊二！！',
    imageUrl: 'http://i3.qhmsg.com/t01f0a5906f7c201806.jpg',
  ),
  listItemModel(
    title: '超级飞侠',
    subTitle: '超级飞侠。。。',
    imageUrl: 'http://f3.rednet.cn/data/attachment/wq_wechatcollecting/article/201704/18/434415/5073156839010a8885f5ab8fc181e4ba.jpg',
  ),
  listItemModel(
    title: '樱桃小丸子',
    subTitle: '你好，我是樱桃小丸子！',
    imageUrl: 'http://b-ssl.duitang.com/uploads/item/201606/23/20160623110825_adyLj.thumb.700_0.jpeg',
  )
];

构造list View

class ListViewDemo extends StatelessWidget {
  // 定义列表项
  Widget _listItemBuilder(BuildContext context, int index) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(8.0),
      child: Column(
        children: <Widget>[
          Image.network(items[index].imageUrl),
          SizedBox(height: 16.0,),
          Text(
            items[index].title,
            style: Theme.of(context).textTheme.title,
          ),
          Text(
            items[index].subTitle,
            style: Theme.of(context).textTheme.subhead,
          ),
          SizedBox(height: 16.0,)
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 构造list View
    return ListView.builder(itemCount: items.length, itemBuilder: _listItemBuilder);
  }
}