ListView的数据循环

之前的ListView组件里，我们将一组数据重写了多次，达到了列表布局的效果，但是在真实项目中，我们不可能将所有数据的每一条都进行手写，这个时候就需要用到循环了。ListView的数据循环大致有以下两种方式，一种是使用循环方法，一种是ListView.builder方法。

先上假数据

List list = [
  {"title": '我是哆啦A梦',
  "imgUrl": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg"
  },
  {"title": '我是哆啦B梦',
  "imgUrl": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg"
  },
  {"title": '我是哆啦C梦',
  "imgUrl": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg"
  },
  {"title": '我是哆啦D梦',
  "imgUrl": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg"
  },
  {"title": '我是哆啦E梦',
  "imgUrl": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3355464299,584008140&fm=26&gp=0.jpg"
  }
];

1.1循环方法for

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter Demo",
    home: Scaffold(
      body: HomeContent(),
    ),
  ));
}

class HomeContent extends StatelessWidget {
  getList() {
    List<Widget> useList = [];
    for(var i = 0; i < list.length; i ++) {
      useList.add(ListTile(
        title: Text(list[i]["title"])
      ));
      useList.add(Image.network(list[i]["imgUrl"]));
    }
    return useList;
  }
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: getList()
    );
  }
}

image.png

1.2循环方法map

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter Demo",
    home: Scaffold(
      body: HomeContent(),
    ),
  ));
}

class HomeContent extends StatelessWidget {
  List<Widget> getList() {
    var newList = list.map((val) {
      return ListTile(title: Text(val["title"]));
    });
    return newList.toList();
  }
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.all(10),
      children: getList()
    );
  }
}

使用ListView.builder

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: list.length,
      itemBuilder: (conText, index) {
        return ListTile(title: Text(list[index]["title"]));
      },
    );
  }
}