zoukankan      html  css  js  c++  java
  • 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",
      }
    ];
  • 相关阅读:
    手机维修费杂乱 消协命令设立扶植行业标准
    ImageList控件的使用方法
    三峡实习记之一
    [原创]2天的搜索经验对IIS的问题的全面解决方案
    亲历虚拟机安装Ubuntu Linux系统
    新的一年,新的开始
    VS2003中实现身份验证的探索经验
    [原创]VS2003中ASP.NET实现自定义用户导航控件
    全面控制Windows任务栏
    单刀赴广州
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/11446174.html
Copyright © 2011-2022 走看看