Flutter 学习：动态列表两种实现方式

一.复习上一节

• 列表组件

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Text(
          "标题1",
          textAlign: TextAlign.center,
        ),
        Image.network(
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg",
          fit: BoxFit.fill,
          height: 100,
        ),
        Text(
          "标题2",
          textAlign: TextAlign.center,
        ),
        Image.network(
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg",
          fit: BoxFit.fill,
          height: 100,
        ),
      ],
    );
  }
}

二.动态列表

动态列表实现有两种

1.for循环实现

2. build实现

三.for循环实现动态列表

class MyBody extends StatelessWidget {
  List<Widget> _MyBody() {
    List<Widget> list = new List();
    for (int i = 0; i < 20; i++) {
      list.add(new ListTile(
        title: Text("我是第$i条"),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        child: ListView(
      children: this._MyBody(),
    ));
  }
}

• for循环实现就是遍历数据的同时创建每个item中的view放入集合中设置在listView的children上。

• 效果图

image.png

四.for循环模拟实现接口数据

1.创建一个data.dart文件存放数据集合

List listData = [
  {
    "title": "标题1",
    "subTitle": "副标题",
    "iamge":
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586769048019&di=cf952359b63fd6a90ab57c7662c875a0&imgtype=0&src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-2f3dfd6f7da18983fd5a4e48747d7ee3_hd.jpg"
  },
  {
    "title": "标题2",
    "subTitle": "副标题",
    "iamge":
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586769048019&di=cf952359b63fd6a90ab57c7662c875a0&imgtype=0&src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-2f3dfd6f7da18983fd5a4e48747d7ee3_hd.jpg"
  },
  {
    "title": "标题3",
    "subTitle": "副标题",
    "iamge":
    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586769048019&di=cf952359b63fd6a90ab57c7662c875a0&imgtype=0&src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-2f3dfd6f7da18983fd5a4e48747d7ee3_hd.jpg"
  }
];

2.遍历数据

import 'package:flutter/material.dart';
import 'data.dart';

void main() {
  runApp(MyContent());
}

class MyContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(appBar: AppBar(title: Text("标题")), body: MyBody()));
  }
}

class MyBody extends StatelessWidget {
  List<Widget> _MyBody() {
    var list = listData.map((value) {
     return ListTile(
          title: Text(value["title"]),
          subtitle:Text(value["subTitle"]) ,
          leading: Image.network(value["iamge"]));
    });
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        child: ListView(
      children: this._MyBody(),
    ));
  }
}

3.注意：

• list通过map修改后返回的数据是（XX，XX）字符串不是集合，所以需要list.toList()；
• 注意需导入数据包

• 效果图

  
  image.png

五.ListView.build实现

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
        itemCount: listData.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(listData[index]["title"]),
            subtitle: Text(listData[index]["subTitle"]),
            leading: Image.network(listData[index]["iamge"]),
          );
        });
  }
}

• 主要参数

1.调用ListView.builder实现
2.itemCount：需要把集合长度传递给
3.itemBuild：返回具体item布局 需要两个参数(context,index)

• 优化itemBuild中代码

class MyBody extends StatelessWidget {
  Widget _getItemView(context, index) {
    return ListTile(
      title: Text(listData[index]["title"]),
      subtitle: Text(listData[index]["subTitle"]),
      leading: Image.network(listData[index]["iamge"]),
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
        itemCount: listData.length, itemBuilder: _getItemView);
  }
}

注意： itemBuilder: _getItemView这里没有加(),这里是把方法赋值给itembuilder，而不是执行该方法。

总结

动态列表实现两种方式

1.通过for循环遍历数据 创建itemView
2.通过ListView.build实现 需要itemcount 和itemBuild参数