效果:
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", } ];