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

ゞ 浴缸里的玫瑰 2023-08-17 15:58 97阅读 0赞

效果:

1057166-20190902140514777-1523444257.png

main.dart

  1. import 'package:flutter/material.dart';
  2. import 'res/listData.dart';
  3. /*
  4. ListView:参数
  5. scrollDirection:Axis.horizontal:水平列表。Axis.vertical垂直列表
  6. padding:内边距。
  7. resolve:组件反向排序
  8. children:List<Widget> 列表元素
  9. */
  10. void main() {
  11. runApp(MyApp());
  12. }
  13. class MyApp extends StatelessWidget {
  14. @override
  15. Widget build(BuildContext context) {
  16. // TODO: implement build
  17. return MaterialApp(
  18. home: Scaffold(
  19. appBar: AppBar(
  20. title: Text('flutter demo'),
  21. ),
  22. body: HomeContent(),
  23. ),
  24. );
  25. }
  26. }
  27. class HomeContent extends StatelessWidget {
  28. //自定义方法:
  29. // List<Widget> _getData() {
  30. // // List<Widget> list=new List();
  31. // // for(var i=0;i<20;i++){
  32. // // list.add(ListTile(
  33. // // title:Text("我是${i}"),
  34. // // ));
  35. // // }
  36. // // return list;
  37. // var temList=listData.map((value){
  38. // return ListTile(
  39. // leading: Image.network(value["imageUrl"]),
  40. // title: Text(value['title']),
  41. // subtitle: Text(value["author"]),
  42. // );
  43. // });
  44. // return temList.toList();
  45. // }
  46. // @override
  47. // Widget build(BuildContext context) {
  48. // return ListView(
  49. // children:this._getData(),
  50. // );
  51. // }
  52. //使用ListView.builder实现:
  53. Widget _getListData(context, index) {
  54. return ListTile(
  55. leading: Image.network(listData[index]["imageUrl"]),
  56. title: Text(listData[index]['title']),
  57. subtitle: Text(listData[index]["author"])
  58. );
  59. }
  60. @override
  61. Widget build(BuildContext context) {
  62. return ListView.builder(
  63. itemCount: listData.length,
  64. itemBuilder: this._getListData,
  65. );
  66. }
  67. }

res/listData.dart

  1. List listData=[
  2. {
  3. "title":"Candy Shop",
  4. "author":"Mohamed Chahin",
  5. "imageUrl":"https://www.itying.com/images/flutter/1.png",
  6. },
  7. {
  8. "title":"Candy Shop",
  9. "author":"Mohamed Chahin",
  10. "imageUrl":"https://www.itying.com/images/flutter/2.png",
  11. },
  12. {
  13. "title":"Candy Shop",
  14. "author":"Mohamed Chahin",
  15. "imageUrl":"https://www.itying.com/images/flutter/3.png",
  16. },
  17. {
  18. "title":"Candy Shop",
  19. "author":"Mohamed Chahin",
  20. "imageUrl":"https://www.itying.com/images/flutter/4.png",
  21. },{
  22. "title":"Candy Shop",
  23. "author":"Mohamed Chahin",
  24. "imageUrl":"https://www.itying.com/images/flutter/5.png",
  25. }
  26. ];

转载于:https://www.cnblogs.com/yiweiyihang/p/11446174.html

发表评论

表情:
评论列表 (有 0 条评论,97人围观)

还没有评论,来说两句吧...

相关阅读

    相关 vue 循环加载动态组件以及传值

      今天遇到一个需求,某个页面是个动态页面,由多个子组件构成。   之前我们的做法是将N个需要的组件import进主页面,然后引用一下即可。但是现在遇到的问题是, 这个动态页