效果:

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

08ListView动态列表组件 以及循环动态数据的更多相关文章

  1. React(0.13) 定义一个动态的组件(函数作为动态的值)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  2. Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作

    1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: acit ...

  3. Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作

    1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V:  view  (显示的视图) C: controller 控制器 入门案例: aci ...

  4. T-SQL Recipes之生成动态列表数据

    Problem 首先什么是动态列表?举个示例,假设你想输出以逗号分隔的IDs,如: 1,45,67,199,298 Solution 生成动态列表数据在我们生活场景中很常见,比如在 Dynamic P ...

  5. ajax获取动态列表数据后的分页问题

    ajax获取动态列表数据后的分页问题 这是我在写前台网站时遇到的一个分页问题,由于数据是通过ajax的方式来请求得到的,如果引入相应的js文件来做分页,假如只是静态的填放数据到列表各项内容中(列表条数 ...

  6. vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据

    需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功. 过程出现的bug和问题: 1.使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载 ...

  7. flutter动态列表

    在前面一篇总结flutter里面的列表组件ListView的时候,一直都是使用的静态数据,但是在实际的运用过程中,数据都是从后台获取的动态数据,不能再像前面那样写静态数据了,下面模拟一下如果使用动态数 ...

  8. 【Docker】数据库动态授权组件在Kubernetes集群下的测试过程记录

    背景 我们都知道出于安全性考虑,生产环境的权限一般都是要做最小化控制,尤其是数据库的操作授权,更是重中之重. 博主所在公司使用的是Kubernetes(k8s)进行的集群容器管理,因为容器发布时的IP ...

  9. Vue动态创建组件方法

    组件写好之后有的时候需要动态创建组件.例如: 编辑文章页面,正文是一个富文本编辑器,富文本编辑器是一个第三方的组件,点击添加章节的时候需要动态的创建一个富文本编辑器这个时候怎么处理呢. 富文本编辑器也 ...

随机推荐

  1. (转载)小白的linux设备驱动归纳总结(一):内核的相关基础概念---学习总结

    1. 学习总结 小白的博客讲的linux内核驱动这一块的东西比较基础,因此想通过学习他的博客,搭配着看书的方式来学习linux内核和驱动.我会依次更新在学习小白的博客的过程的感悟和体会. 2.1 内核 ...

  2. Codeforces 567C - Geometric Progression - [map维护]

    题目链接:https://codeforces.com/problemset/problem/567/C 题意: 给出长度为 $n$ 的序列 $a[1:n]$,给出公比 $k$,要求你个给出该序列中, ...

  3. TCP首部介绍

    每个T C P段都包含源端和目的端的端口号,用于寻找发端和收端应用进程.这两个值加上I P首部中的源端I P地址和目的端I P地址唯一确定一个T C P连接.有时,一个I P地址和一个端口号也称为一个 ...

  4. 部署kibana节点

    部署Kibana节点 1.查看系统环境: [root@Kibana ~]# hostname Kibana [root@Kibana ~]# cat /etc/redhat-release CentO ...

  5. office+visio2016版本一同安装说明

    安装所需软件: Office或者visio镜像 比如:cn_visio_professional_2016_x86_x64_dvd_6970929.iso 下载网址:http://pan.baidu. ...

  6. git 在eclipse中忽略上传文件

    在我们的工程项目中,有些文件是不需要上传到服务器上的,比如那些 */target/ */bin/*.settings/*.classpath*.gitignore*.project 我们将这些文件添加 ...

  7. 华为云:实现高可用的负载均衡web集群

    华为云: 2台云主机做负载均衡调度 >>申请一个虚拟浮动ip,并绑定一个弹性公网ip >>将两台云主机绑定到虚拟浮动ip上 3台web服务器 1台云服务器做jumpserver ...

  8. LNOI2018 劈配

    主要思路为连反向边. 对于本题,贪心策略,依次决定每个人的最优解 但因为每人达到的最优解可能有多种方式,如果每个都尝试就会超时,所以只能先采取其中一种 并将这个方案连反向边,其它方案连正向边 这样对于 ...

  9. Oracle 物理结构(五) 文件-在线日志文件

    一.什么是在线日志文件 默认情况下redo的块大小是磁盘的扇区大小,通常是512字节,但是现在很多磁盘开始支持4k的扇区,oracle能自动识别并使用4k的大小,但是使用4k的redo block会有 ...

  10. Gym - 101955K Let the Flames Begin 约瑟夫环

    Gym - 101955KLet the Flames Begin  说实话,没怎么搞懂,直接挂两博客. 小飞_Xiaofei的约瑟夫问题(Josephus Problem)3:谁最后一个出列 小飞_ ...