文章目录

  • 二丶 效果图
  • 二丶 代码+注释
  • 三丶 知识点

二丶 效果图

二丶 代码+注释

实现动态列表:
【1】方式一:抽离组件

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(home:Scaffold(appBar: AppBar(title: Text('FlutterDemo'),),body: HomeContent(),));}
}class HomeContent extends StatelessWidget{//方式一:通过创建一个一个的ListTile来实现列表List<Widget> _getData(){return [ListTile(title: Text("我是一个列表"),),ListTile(title: Text("我是一个列表"),),ListTile(title: Text("我是一个列表"),),ListTile(title: Text("我是一个列表"),)];}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn ListView(children: this._getData(),);}
}

【2】方式二:通过List集合,来动态生成ListTile数据

...
...
class HomeContent extends StatelessWidget{//方式二:通过List集合,来动态生成ListTile数据List<Widget> _getData(){List<Widget> list = new List();for(var i=0;i<20;i++){list.add(ListTile(title: Text("我是$i列表"),));}return list;}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn ListView(children: this._getData( ),);}
}

【3】方式三:通过Map集合,来动态生成ListTile数据

现在外部创建好数据:就拿我当前是在lib/res/listData.dart

List listData=[{"title":'Candy Shop',"author":'Mohamed Chahin',"imageUrl":'https://www.itying.com/images/flutter/1.png',},{"title":'Childhood in a picture',"author":'Google',"imageUrl":'https://www.itying.com/images/flutter/2.png',},{"title":'Alibaba Shop',"author":'Alibaba',"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":'Tornado',"author":'Mohamed Chahin',"imageUrl":'https://www.itying.com/images/flutter/5.png',}
];

记得引入:import ‘res/listData.dart’;

class HomeContent extends StatelessWidget{//方式三:通过Map集合,来动态生成ListTile数据List<Widget> _getData(){var tempList = listData.map((value){      //首先我要说明一下,因为它返回的是一个map类型的值,所以我们就用var让它自动判断来接收值return ListTile(                  //其次再来分析这个return,这里它的作用是,每次返回改变后的值赋给tempListleading: Image.network(value["imageUrl"]),title: Text(value["title"]),subtitle: Text(value["author"]),);});return tempList.toList();       //最后再返回这个值,但是要记住,他不是一个集合数组,所以我们要让它转换下类型,通过toList}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn ListView(children: this._getData( ),);}
}

【4】方式四:通过builder规范,让ListView自动循环遍历 假数据

...
...class HomeContent extends StatelessWidget{//注意这里是在实例化构造方法的时候就执行了,所以是先创建好数据,再通过下面的方式四来遍历获取数据List list = new List();HomeContent(){for(var i=0;i<20;i++){this.list.add('我是第$i条');}}@overrideWidget build(BuildContext context) {// TODO: implement build//方式四:通过builder规范,让ListView自动循环遍历数据return ListView.builder(itemCount: this.list.length,      //这里必须要指定List的长度itemBuilder:(context,index){      //需要传入两个参数,然后Builder会自动从0一直循环到最大长度return ListTile(title: Text(this.list[index]),  //每次取出index的索引对应的数据返回);},);}
}

【5】方式五:通过builder规范,让ListView自动循环遍历 动态真实数据

class HomeContent extends StatelessWidget{//自定义方法Widget _getListData(context,index){return ListTile(title: Text(listData[index]["title"]),  //每次取出index的索引对应的数据返回leading: Image.network(listData[index]["imageUrl"]),subtitle: Text(listData[index]["author"]));}@overrideWidget build(BuildContext context) {// TODO: implement build//方式四:通过builder规范,让ListView自动循环遍历数据return ListView.builder(itemCount: listData.length,      //这里必须要指定List的长度itemBuilder:this._getListData   //☆这里要注意写法,我们只是把方法名后面的东西赋值给itemBuilder,并不是要执行方法,所以一定要搞清楚!//赋值的目的是在于将代码抽离出去,简洁明了);}

三丶 知识点

1、Flutter 列表组件概述
列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义
列表项,支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下
分类:
1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表
5、矩阵式列表

2、 Flutter 列表参数

名称                       类型                      说明
scrollDirection      Axis Axis.horizontal               水平列表Axis.vertical                   垂直列表padding                 EdgeInsetsGeometry              内边距resolve                       bool                    组件反向排序children              List<Widget>                  列表元素

Futter基础第5篇: 实现列表、动态列表【ListView、ListView.builder】相关推荐

  1. Futter基础第3篇: 实现引用远程图片、本地图片、实现圆形图片,实现圆角图片【Image.network、Image.asset、BorderRadius.circular(150)】

    文章目录 一丶 效果图 二丶 代码+注释 三丶 知识点 一丶 效果图 [1]引用远程图片 [2]引用本地图片 [3]实现圆形图片(方法一).圆角图片(受弧度影响) [4]实现圆形图片(方法二) 二丶 ...

  2. 糍粑大叔的独游之旅-u3d实现弹出菜单(上)-动态列表

    在u3d5.x中,使用ugui作为默认的界面系统,但控件实在太少,很多需求都不能满足,比如弹出菜单(PopupMenu) 我也懒得去网上找现成的实现,再加上现有代码已经有很多有关列表控件的功能,不想再 ...

  3. 基础篇9-python基本数据结构-列表

    基础篇9-python基本数据结构-列表 一.列表: 1.有序的集合 2.通过偏移来索引,从而读取数据 3.支持内嵌 a =[[1,2,3],[4,5,6]] 4.可变类型 a[0][1] = 7 二 ...

  4. Python基础篇(三)-- 列表、元组、字典、集合、字符串

    前面一篇简单介绍了Python的数据类型与运算符,这一节主要学习Python中5种常用序列结构:列表.元组.集合.字典和字符串的详细使用和一些技巧,下图概括了本篇的主要内容. 1 序列 在数学上,序列 ...

  5. python列表可以放不同类型_python基础篇数据类型之二——列表(List)

    好喽! 迟到的更新来了 ! 上回分享了数据类型中的一位重要成员--'字符串' 别看它弱不禁风,绝大部分场景都能遇到它,例如人口普查表格内录入的信息,word文档内容,网页登陆框和密码输入框等等都会有它 ...

  6. vue.js路由配置vue-router的基础学习 - 概念篇

    文章目录 引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由 引言 · ...

  7. JavaScript 基础知识 - DOM篇(二)

    7. 节点操作 7.1 节点的属性 节点分类: 标签节点 文本节点 属性节点 注释节点 节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值 常见的节 ...

  8. vue2+vue3小白零基础教程—vue2篇,全网2021最详细教程

    vue教程 提示:Vue3系列请参考Vue2+Vue3小白零基础教程-vue3篇文章,本文为vue2篇. 1. Vue核心 1.1 Vue简介 1.1.1 Vue是什么 一套用于构建用户界面的渐进式J ...

  9. 基础知识:篇4-make工具与Makefile文件概念

    说明:   本文章旨在总结备份.方便以后查询,由于是个人总结,如有不对,欢迎指正:另外,内容大部分来自网络.书籍.和各类手册,如若侵权请告知,马上删帖致歉.   QQ 群 号:513683159 [相 ...

  10. 《精通QTP——自动化测试技术领航》—第1章1.5节QTP精华—对象库(上)之基础攻略篇...

    本节书摘来自异步社区<精通QTP--自动化测试技术领航>一书中的第1章1.5节QTP精华-对象库(上)之基础攻略篇,作者余杰 , 赵旭斌,更多章节内容可以访问云栖社区"异步社区& ...

最新文章

  1. Java Thread.join()详解
  2. 如何在Swift 3中创建调度队列
  3. 通过Maven命令将本地jar打到本地Maven仓库
  4. 记录一次redis事故
  5. sklearn自学指南(part52)--潜在狄利克雷分配(LDA)
  6. 回溯算法和贪心算法_回溯算法介绍
  7. SVM原理以及Tensorflow 实现SVM分类(附代码)
  8. Python基础:字典(dict)与集合(set)
  9. python exec函数_Python3
  10. K8S Java客户端的帮助文档
  11. 李纳斯将注册 Linux 商标 用 Linux 名称将收费
  12. 立创商城PCB库下载(SVN更新)
  13. 数据处理之缺失值填充
  14. 星际争霸游戏中的操作心得
  15. 技术最好的时代,会是技术创业最好的时代吗?
  16. 香港计算机专业硕士学制几年,想读香港一年计算机硕士,懂行老哥来指导一下我这个迷茫的five...
  17. 引力波,你果真懂了吗?
  18. JavaWeb(kuang)
  19. 凯乐科技量子计算机,量子计算机仍是梦想,但量子通信的时代已经到来 原理 昨天 量子计算机仍然是一个梦...
  20. 【MindSpore易点通】安装教程

热门文章

  1. iOS 打电话 发短信功能的实现
  2. Linux在出现/java: cannot execute binary file
  3. EMNLP2021 | 标签推理的细粒度实体识别
  4. keyphrase抽取论文在聊什么?
  5. 【注意力机制】一系列关于attention的高效改进大集合
  6. 【ACL2020】今日放榜,779篇论文被接收,姚班校友陈丹琦首日演讲
  7. 机器学习面试-处理聚类问题
  8. 从零实现深度学习框架——理解正则化(二)
  9. 如果你是加勒比海盗首领,会选择哪种算法来使价值最大化?
  10. 有哪些不讲武德的国外计算机学习资源?