Flutter 学习（3）------------通过List或者map循环数据渲染页面。。

List循环渲染

最基础的一种：

定义一个List集合

List listData=["第一条数据","第二条数据","第三条数据","第四条数据","第五条数据"];

然后写一个方法，去循环它，并将数据填充到对应组件中，将其返回

  List<Widget> _listView(){
    return listData.map((f)=>Text(f)).toList();
  }

然后在build的方法中调用

Column(
          children:_listView(),
        )

全部代码

class _MyHomePageState extends State<MyHomePage> {

  List listData=["第一条数据","第二条数据","第三条数据","第四条数据","第五条数据"];
//  Map map
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Map渲染界面'),),
      body: SingleChildScrollView(
        child: Column(
          children:_listView(),
        ),
      ),
    );
  }

  List<Widget> _listView(){
    return listData.map((f)=>Text(f)).toList();
  }
}

建立一个Test实体类。代码如下，定义一个姓名和一个性别。

class Test{
  final String name;
  final String sex;

  const Test({this.name, this.sex});
}

全部代码

class _MyHomePageState extends State<MyHomePage> {

  List listData=["第一条数据","第二条数据","第三条数据","第四条数据","第五条数据"];
  List<Test> listTest=[];
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    listTest.add(Test(name: "大新哥",sex: "男"));
    listTest.add(Test(name: "大新哥",sex: "男"));
    listTest.add(Test(name: "大新哥",sex: "男"));
  }
//  Map map
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Map渲染界面'),),
      body: SingleChildScrollView(
        child: Column(
          children:_listView(),
        ),
      ),
    );
  }

  List<Widget> _listView(){
    return listTest.map((f)=>Container(
      child: Row(
        children: <Widget>[
          new Expanded(child: Text(f.name)),
          new Expanded(child: Text(f.sex))
        ],
      ),
    )).toList();
  }
}

 

Map集合渲染数据到页面上

定义一个map集合

 Map mapData={"title1":"标题1","title2":"标题2","title3":"标题3","title4":"标题4","title5":"标题5",};

还是写一个List<Widget>的方法来接收。

  List<Widget> _listView(){
    List<Widget>listWidget=[];
    mapData.forEach((k,v){
      listWidget.add(Text(v));
    });
    return listWidget;
  }

 

全部代码

class _MyHomePageState extends State<MyHomePage> {
  Map mapData={"title1":"标题1","title2":"标题2","title3":"标题3","title4":"标题4","title5":"标题5",};
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
//  Map map
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Map渲染界面'),),
      body: SingleChildScrollView(
        child: Column(
          children:_listView(),
        ),
      ),
    );
  }

  List<Widget> _listView(){
    List<Widget>listWidget=[];
    mapData.forEach((k,v){
      listWidget.add(Text(v));
    });
    return listWidget;
  }
}

嗯？？？问我为什么要用map集合？因为有些数据是比较特殊的，用list的效果就不是很好做，直接用ListVIew的组件也比较难做。（实际上是用list或者ListView我都做不出来）

什么效果？

这样的效果，前面有年份后面是这一年的请假记录  （反正用listView）我是做不出来。好啦，现在就来实现这个类似的效果。。

 

 

 

手先将map格式改为这样

  Map mapData={"2020":[{"mm","一月"},{"mm","二月"},{"mm","三月"},{"mm","四月"}],
                "2019":[{"mm","一月"},{"mm","二月"},{"mm","三月"},{"mm","四月"}]};

哦，不好意思，上面这是错误写法 要记住map的格式是 {key:value};

所以应该这么写。

  Map mapData={"2020":[{"mm":"20一月"},{"mm":"20二月"},{"mm":"20三月"},{"mm":"20四月"}],
                "2019":[{"mm":"19一月"},{"mm":"19二月"},{"mm":"19三月"},{"mm":"19四月"}]};

全部代码

class _MyHomePageState extends State<MyHomePage> {
  Map mapData={"2020":[{"mm":"20一月"},{"mm":"20二月"},{"mm":"20三月"},{"mm":"20四月"}],
                "2019":[{"mm":"19一月"},{"mm":"19二月"},{"mm":"19三月"},{"mm":"19四月"}]};
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
//  Map map
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Map渲染界面'),),
      body: SingleChildScrollView(
        child: Column(
          children:_listView(),
        ),
      ),
    );
  }

  List<Widget> _listView(){
    List<Widget>listWidget=[];
    mapData.forEach((k,v){
      listWidget.add(Text(k));
      v.map((f){
        listWidget.add(Column(
          children: <Widget>[
            Text(f['mm'])
          ],
        ));
      }).toList();
    });
    return listWidget;
  }
}

运行效果

 

 效果出来了，UI就自己慢慢调吧

 

还有一个问题就是，我们接收到的数据一般是List集合，那么像上面这种map改怎么转换，让后端的童鞋返回这样的数据格式，或者自己调整。

通常我们会根据后端返回的数据建立一个实体类，不过也可以用List<Map>的方式来代替实体类。

List<Map> list=[];

Future<void> groupByList()async{
    list.add({"year":"2020","mm":"一月","dd":"1"});
    list.add({"year":"2020","mm":"二月","dd":"2"});
    list.add({"year":"2020","mm":"三月","dd":"3"});
    list.add({"year":"2019","mm":"四月","dd":"4"});
    list.add({"year":"2019","mm":"一月","dd":"1"});
    list.add({"year":"2019","mm":"二月","dd":"2"});
    list.add({"year":"2019","mm":"三月","dd":"3"});
    list.add({"year":"2019","mm":"四月","dd":"4"});
    map=groupBy(list,(obj)=>obj['year']);
    print(map);
  }

上面的代码就是定义一个List<Map>的集合。每个list的子内容都是一个map，每个map的key都是相同。然后这时候我们通过groupBy的方法，对list集合中的map属于year字段进行一个map的转换。输出结果如下：

{2020: [{year: 2020, mm: 一月, dd: 1}, 
{year: 2020, mm: 二月, dd: 2}, 
{year: 2020, mm: 三月, dd: 3}],
 2019: [{year: 2019, mm: 四月, dd: 4},
 {year: 2019, mm: 一月, dd: 1},
 {year: 2019, mm: 二月, dd: 2},
 {year: 2019, mm: 三月, dd: 3}, 
{year: 2019, mm: 四月, dd: 4}]}

 

对于groupBy官网的意思是这样的

values按所返回的值將元素分組key。

從由計算得出的鍵key到key返回該鍵的所有值的列表 返回映射。值以與中的相對順序出現在列表中values。

官网链接

https://api.flutter.dev/flutter/package-collection_collection/groupBy.html

值得注意的是，我们需要手动引入一个文件，AS并不会自动引入

import 'package:collection/collection.dart';