小菜鸡开始学习flutter之二十一

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情

今日目标

昨天我们主要学习3种间的列表形式，今天我们继续搞列表，在我们的实际项目中，列表内容一般都是动态生成的。我们来了解下关于动态列表实现的几种方法。

通过循环语句来实现

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _getData(),
    );
  }

  // 自定义方法
  List<Widget> _getData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text('这是列表$i'),
      ));
    }
    return list;
  }
}

我们通过将listview.children需要填充的内容抽象成为一个私有方法，在方法内通过for循环生成20条数据，然后返回这些数据组成的一个List。当然了这里是模拟循环生成，在实际的项目中，还会通过接口去获取到真实的数据，然后根据需要去生成对应的list内容。

List datlist = [  {    "title": '标题1',    "subtitle": '副标题1',    "img":        'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image'  },  {    "title": '标题22',    "subtitle": '副标题222',    "img":        'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image'  }];

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _getData(),
    );
  }

  // 自定义方法
  List<Widget> _getData() {
    // List<Widget> list = [];
    var list = datlist.map((value) {
      return ListTile(
        title: Text(value['title']),
        subtitle: Text(value['subtitle']),
        leading: Image.network(value['img']),
      );
    }).toList();
    return list;
  }
}

如上我们通过另外一种循环map来生成数据，这里要注意map返回的并不是一个List类型的数据，我们还需要对map返回的数据通过tolist()方法转换成List类型才可以使用。

通过ListView.builder来实现

List datlist = [  {    "title": '标题1111',    "subtitle": '副标题1111',    "img":        'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image'  },  {    "title": '标题22222',    "subtitle": '副标题22222',    "img":        'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image'  }];

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {// context指上下文， index指循环的索引值
        return ListTile(
          title: Text(datlist[index]['title']),
          subtitle: Text(datlist[index]['subtitle']),
          leading: Image.network(datlist[index]['img']),
        );
      },
      itemCount: datlist.length,
    );
  }
}

如上我们通过ListView.builder来实现列表的动态生成。在builder里itemBuilder和itemCount是两个必不可少的属性。同样的你还可以进一步拆分组件，将itembuilder对应的方法抽离成一个私有方法，通过对复用的内容不断抽离组合，其实Flutter也并没有向我们想的套娃那么严重难以维护。

ending

持续学习,加油，如有不对的地方还请指正，谢谢~~