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

数组循环

首先循环一个数组,形成动态数据,需要注意的是,数组里的每一项都需要时Widget组件,所以,在循环数组的时候,需要带上Widget,另外,在循环构造完数据以后,一定要使用toList()将数据转为List。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('FlutterDemo')),
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;
} @override
Widget build(BuildContext context) {
return ListView(
children: this._getData(),
);
}
}

在上面模拟的是最简单的数据格式,如果数组项是下面这样的

上面的方法就行不通了,需要对上面的方法进行适当的修改。

class HomeContent extends StatelessWidget {
//自定义方法
List<Widget> _getData(){
List listData=[
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2606512668,2361120991&fm=27&gp=0.jpg',
},
{
"title": 'Childhood in a picture',
"author": 'Google',
"imageUrl": 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2191520521,2689315141&fm=27&gp=0.jpg',
}, ];
var tempList=listData.map((value){
return ListTile(
leading:Image.network(value["imageUrl"]),
title:Text(value["title"]),
subtitle:Text(value["author"])
);
});
return tempList.toList();
} @override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: this._getData(),
);
}
}

数组索引

上面是直接将数据项准备好了以后再使用的,但是,我们更多的时候是直接使用数组的。

class HomeContent extends StatelessWidget {
List listData=[
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3799915975,3745430025&fm=27&gp=0.jpg',
},
{
"title": 'Childhood in a picture',
"author": 'Google',
"imageUrl": 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2606512668,2361120991&fm=27&gp=0.jpg',
},
{
"title": 'Alibaba Shop',
"author": 'Alibaba',
"imageUrl": 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2191520521,2689315141&fm=27&gp=0.jpg',
},
]; //自定义方法
Widget _getListData(context,index){
return ListTile(
title: Text(listData[index]["title"]),
leading:Image.network(listData[index]["imageUrl"]),
subtitle:Text(listData[index]["author"])
);
} @override
Widget build(BuildContext context) {
// TODO: implement build
return ListView.builder(
itemCount:listData.length,
itemBuilder:this._getListData
);
}
}

flutter动态列表的更多相关文章

  1. Flutter ListView 列表组件

    列表常见的情况: 1.垂直列表 2.垂直图文列表 3.横向列表 4.动态列表 名称 类型 说明 scrollDirection Axis Axis.horizontal 横向列表 Axis.verti ...

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

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

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

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

  4. 【柠檬班】jmeter 不写代码,秒秒钟提取动态列表最后一个值

    在用jmeter做接口测试时,我们经常会遇到,一个接口返回一个json串,在这个json串中,某个节点的值是一个列表,而且这个列表的长度是动态变化的.如:   获取用户列表,用户信息是个列表,类似的接 ...

  5. JMeter接口测试-提取动态列表最后一个值的两种方法

    前言 在用JMeter做接口测试时,我们经常会遇到,一个接口返回一个json串,在这个json串中,某个节点的值是一个列表,而且这个列表的长度是动态变化的.今天我们来学习两种提取动态列表最后一个值的两 ...

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

    效果: main.dart import 'package:flutter/material.dart'; import 'res/listData.dart'; /* ListView:参数 scr ...

  7. flutter ListView列表和导航传值以及回调

    main.dart import 'package:flutter/material.dart'; void main(){ return runApp(MyApp()); } class Produ ...

  8. MUI - 解决动态列表页图片懒加载再次加载不成功的bug

    首先描述一下功能 实现列表页动态加载 通过官方提供的"下拉刷新和上拉刷新"及"图片懒加载"示例实现. http://www.cnblogs.com/philly ...

  9. Flutter 自定义列表以及本地图片引用

    前言 上篇关于Flutter的文章总结了下标签+导航的项目模式的搭建,具体的有需要的可以去看看Flutter分类的文章,这篇文章我们简单的总结一下关于Flutter本地文件引用以及简单的自定义List ...

随机推荐

  1. scrapy-redis源码浅析

    原文链接 前言 分析这个项目的源码原因是需要有去重过滤,增量爬取两个功能,而scrapy-redis项目已经帮我们实现了,想看看他是怎么实现的.这里只贴出部分主要代码,查看时请打开源码对照,笔记有点长 ...

  2. day46----JavaScript的函数及对象小结

    一:函数 01:普通函数 function f1(){ console.log("Helleo world") } f1(); //调用函数 -->Helleo world ...

  3. 软件体系结构-分层、代理、MVC、管道与过滤器

    什么是软件架构? 程序或计算系统的软件体系结构是系统的一个或多个结构,包括软件元素.这些元素的外部可见属性以及它们之间的关系. ——Software Engineering Institute(SEI ...

  4. Android深度探索-卷1第五章心得体会

    S3C6410是由三星公司推出的一款低功耗.高性价比的RISC处理器,开发是,首先安装minicom串口调试工具: 第一步:检测当前系统是否支持USB转串口. Lsmod | grep usseria ...

  5. 断路器,AOP实现断路器模式 ------------Hystrix

    断路器:https://martinfowler.com/bliki/CircutiBreaker.html 核心思想: 在断路器对象中封装受保护的方法调用. 该断路器监控调用和断路情况 调用失败触发 ...

  6. bfs(最短路径)

    链接:https://ac.nowcoder.com/acm/contest/993/F来源:牛客网 Farmer John is leaving his house promptly at 6 AM ...

  7. python eval( ) 使用详解

      1.解析表达式 (表达式是str类型)----最常用     a = 12     b = "联播"     result1 = eval(a+3)        # resu ...

  8. codeforces hack

    对某一题,首先你自己要先过TEST. 然后回到比赛的PROBLEM列表,把这题后面的锁锁上(锁上了就不能再提交了,所以没把握就别锁了), 然后到ROOM里面,你就可以看别人代码了,下面有HACK按钮, ...

  9. form表单,登录用户,密码,按钮,提交、重置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. go web编程——实现一个简单分页器

    在go web编程中,当需要展示的列表数据太多时,不可避免需要分页展示,可以使用Go实现一个简单分页器,提供各个数据列表展示使用.具体需求:1. 可展示“首页”和“尾页”.2. 可展示“上一页”和“下 ...