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';