在前面一篇总结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. js中的window对象:打开窗口

    ~~ window.open():打开一个窗口 里面需要放三个参数: 1.打开窗口(网页)的位置: 2.打开的方式(自身页面,新开页面): 其中_blank新开一个窗口 3.打开网页的属性: wind ...

  2. Myeclipse优化配置

    #utf8 (do not remove)#utf8 (do not remove)-startup../Common/plugins/org.eclipse.equinox.launcher_1.2 ...

  3. centos 7 环境准备工作

    删除自带jdk: rpm -e --nodeps `rpm -qa | grep java` 打开 /etc/ 目录下的 profile 文件: vi /etc/profile 将如下代码追加到 pr ...

  4. Xmanger远程连接Centos7(成功配置)

    参考1:https://blog.csdn.net/wuzhimang/article/details/51523867 参考2:https://blog.csdn.net/name_kongkong ...

  5. mysql - 标识列

    #标识列 /* 又称为自增长列 含义:可以不用手动插入值,系统提供默认的序列值 特点: 1.表示列必须和主键搭配吗?不一定,但是要求是一个key 2.一个表中只能有一个标识列! 3.标识列的类型有限制 ...

  6. Mac apache You don't have permission to access / on this server.

    在mac下配置完apache和php环境后,通过localhost访问页面,出现403Forbidden.页面提示: Forbidden You don't have permission to ac ...

  7. 炫酷CSS3加载动画

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

  8. System的两常用个静态方法

    package cn.learn; /* System类在java.lang.System,和操作系统有关 1.currentTimeMillis直接调用,是一个返回为long型的静态方法 常用来计算 ...

  9. no suitable HttpMessageConverter found for response type

    在使用 RestTemplate 或者 Spring Cloud 的时候,经常会出现这个错误. 基本上出现的场景都是,我们要json,结果来了个 text/html. 两个原因: 第一个就是:服务器返 ...

  10. 利用Lua实现二叉查找树并进行各种遍历

    -- author : coder_zhang-- date : 2014-6-25 root = nil function insert_node(number) if root == nil th ...