ListView动态列表组件 以及循环动态数据

动态listviev
import ‘res/listData.dart’;

  List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.xxx.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
           "imageUrl": 'https://www.xxx.com/images/flutter/1.png',,
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.xxx.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://wwxx.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.xxx.com/images/flutter/5.png',
      },
  
  ];

渲染数据

class HomeContent extends StatelessWidget {  


  //自定义方法
  List<Widget> _getData(){      
    var tempList=listData.map((value){
        return ListTile(
          leading:Image.network(value["imageUrl"]),
          title:Text(value["title"]),
          subtitle:Text(value["author"])
        );
    });
    // ('124124','124214')
    return tempList.toList();
  }

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

或者动态的通过for添加数据

class HomeContent extends StatelessWidget {  

  List list=new List();
  HomeContent(){
     for(var i=0;i<20;i++){
        this.list.add('我是第$i条');
      }
  }  
  @override
  Widget build(BuildContext context) {    
    // TODO: implement build
    return ListView.builder(
        itemCount:this.list.length,
        itemBuilder:(context,index){
          return ListTile(
            title: Text(this.list[index]),
          );
        }
    );
  }
}

模拟数据库返回的数据

class HomeContent extends StatelessWidget {  


  //自定义方法
  Widget _getListData(context,index){
        return ListTile(           
            title: Text(listData[index]["title"]),
            leading:Image.network(listData[index]["imageUrl"]),          
            subtitle:Text(listData[index]["author"])
        );
  }

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