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",
}
];
转载于//www.cnblogs.com/yiweiyihang/p/11446174.html
还没有评论,来说两句吧...