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

效果：

main.dart

import 'package:flutter/material.dart';
import 'res/listData.dart';
/*
      ListView:参数
    scrollDirection:Axis.horizontal:水平列表。Axis.vertical垂直列表
    padding:内边距。
    resolve:组件反向排序
    children:List<Widget>   列表元素
*/
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter demo'),
        ),
        body: HomeContent(),
      ),
    );
  }
}
 
class HomeContent extends StatelessWidget {
  //自定义方法：
  // List<Widget> _getData() {
 
  //   // List<Widget> list=new List();
  //   // for(var i=0;i<20;i++){
  //   //   list.add(ListTile(
  //   //     title:Text("我是${i}"),
  //   //   ));
  //   // }
  //   // return list;
 
  //   var temList=listData.map((value){
  //     return ListTile(
  //       leading: Image.network(value["imageUrl"]),
  //       title: Text(value['title']),
  //       subtitle: Text(value["author"]),
  //     );
  //   });
  //   return temList.toList();
 
  // }
 
  // @override
  // Widget build(BuildContext context) {
  //   return ListView(
  //     children:this._getData(),
  //   );
  // }
 
  //使用ListView.builder实现：
  Widget _getListData(context, index) {
    return ListTile(
      leading: Image.network(listData[index]["imageUrl"]),
      title: Text(listData[index]['title']),
      subtitle: Text(listData[index]["author"])
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: listData.length,
      itemBuilder: this._getListData,
    );
  }
}

res/listData.dart

List listData=[
  {
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/1.png",
  },
  {
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/2.png",
  },
  {
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/3.png",
  },
  {
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/4.png",
  },{
    "title":"Candy Shop",
    "author":"Mohamed Chahin",
    "imageUrl":"https://www.itying.com/images/flutter/5.png",
  }
];