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

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

效果：

![1057166-20190902140514777-1523444257.png][]

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

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

[1057166-20190902140514777-1523444257.png]: /images/20230810/b1a3c74435d94e94ab7b5cf1c89ee422.png