Flutter ListView （动态）列表组件、水平列表组件、图标组件

Flutter ListView 基础列表组件、水平列表组件、图标组件

列表常见的几种情况：

垂直列表
垂直图文列表
横向列表
动态列表

ListView组件常用的参数：

scrollDirection: Axis, Axis.horizontal 横向列表 Axis.vertical 垂直列表(默认垂直列表)
padding : EdgeInsetsGeometry, 内边距
reverse : bool, 组件反向排序
children : List, 列表元素

1. 基础案例列表示例，使用`Icon`装饰列表组件

// HomeContent 组件
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn ListView(padding: EdgeInsets.all(10),  // 设置10内边距children: <Widget>[ListTile(leading: Icon(Icons.home,size: 50), // 设置图标 尺寸title: Text('这是列表标题内容',style: TextStyle(  // 设置标题样式fontSize: 23,fontWeight: FontWeight.w500)),subtitle: Text('bilibili是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。'),),ListTile(leading: Icon(Icons.settings), // 设置图标title: Text('这是列表标题内容'),subtitle: Text('这是列表副标题内容'),),ListTile(trailing: Icon(Icons.settings_brightness), // 设置图标 放在后面title: Text('这是列表标题内容'),subtitle: Text('这是列表副标题内容'),),ListTile(title: Text('这是列表标题内容'),subtitle: Text('这是列表副标题内容'),),ListTile(title: Text('这是列表标题内容'),subtitle: Text('这是列表副标题内容'),)],);}
}

案例效果展示：

2. 基础案例图片列表示例，使用`Image`装饰列表组件

// HomeContent 组件
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn ListView(padding: EdgeInsets.all(10),  // 设置10内边距children: <Widget>[ListTile(leading: Image.network("https://b-ssl.duitang.com/uploads/item/201603/06/20160306015808_yYPGz.thumb.700_0.jpeg"), // 设置图片title: Text('这是列表标题内容',style: TextStyle(  // 设置标题样式fontSize: 23,fontWeight: FontWeight.w500)),subtitle: Text('bilibili是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。'),),ListTile(leading: Image.network("https://b-ssl.duitang.com/uploads/item/201601/02/20160102164729_tQefv.jpeg"), // 设置图片title: Text('这是列表标题内容'),subtitle: Text('这是列表副标题内容'),),ListTile(leading: Image.network("https://b-ssl.duitang.com/uploads/item/201501/16/20150116145245_x4zLY.jpeg"), // 设置图标 放在后面title: Text('这是列表标题内容'),subtitle: Text('这是列表副标题内容'),),ListTile(title: Text('这是列表标题内容'),subtitle: Text('这是列表副标题内容'),)],);}
}

案例效果展示：

3. 横向列表排列，适合用于横向图文列表布局

// HomeContent 组件
class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Container(padding: EdgeInsets.all(10),height: 250,child: ListView(scrollDirection: Axis.horizontal,children: <Widget>[Container(width: 180,color: Colors.cyan,child: ListView(children: <Widget>[Image.network("https://b-ssl.duitang.com/uploads/item/201510/14/20151014195239_vcHiX.thumb.700_0.jpeg"),Text("图片标题文字",textAlign: TextAlign.center,)],),),Container(width: 180,color: Colors.deepPurple),Container(width: 180,color: Colors.indigo),Container(width: 180,color: Colors.orange)],),);}
}

案例展示效果如下：

Flutter 动态列表组件

首先我们来看一下，List类型的使用
List是Dart的集合类型之一，其实你可以把它简单理解为数组，其他语言也都有这个类型。它的声明有几种方式：

var myList = List(): 非固定长度的声明。
var myList = List(2): 固定长度的声明。
var myList= List():固定类型的声明方式。
var myList = [1,2,3]: 对List直接赋值。

那我们这里使用的是一个List传递，然后直接用List中的generate方法进行生产List里的元素。最后的结果是生产了一个带值的List变量。代码如下：

void main () => runApp(MyApp(items: new List<String>.generate(1000, (i)=> "Item $i")
));

注解：

在main函数的runApp中调用了MyApp类，再使用类的使用传递了一个items参数,并使用generate生成器对items进行赋值。
generate方法传递两个参数，第一个参数是生成的个数，第二个是方法。

1. 基础动态生成的列表

// HomeContent 组件
class HomeContent extends StatelessWidget{// 私有方法 _getData 生成列表List<Widget> _getData(){List<Widget> list = new List();for(int i=0;i<20;i++){list.add(ListTile(title: Text("我是一个${i+1}列表")));}return list;}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Container(padding: EdgeInsets.all(10),child: ListView(children: this._getData(),),);}
}

案例展示效果：

2. 动态数据生成的列表

// HomeContent 组件
class HomeContent extends StatelessWidget{// 私有方法 _getData 生成列表List<Widget> _getData(){// List<Widget> list = new List();List listData = [{"title":"标题内容1","author":"作者名称1","imageUrl": "http://pic.qqtn.com/up/2020-1/2020011418121854630.jpg"},{"title":"标题内容2","author":"作者名称2","imageUrl": "http://pic4.zhimg.com/50/v2-d4fe5d28374d778e642d30f8019e2f9d_hd.jpg"},{"title":"标题内容3","author":"作者名称3","imageUrl": "https://b-ssl.duitang.com/uploads/item/201505/04/20150504234255_f2Gce.jpeg"},{"title":"标题内容4","author":"作者名称4","imageUrl": "https://b-ssl.duitang.com/uploads/item/201608/31/20160831175900_xUFNM.jpeg"}];var tempList = listData.map((v){return ListTile(leading: Image.network(v['imageUrl']),title: Text(v['title']),subtitle: Text(v['author']),);});return tempList.toList();}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Container(padding: EdgeInsets.all(10),child: ListView(children: this._getData(),),);}
}

案例预览效果：

3. 使用`ListView.builder`创建动态列表

// HomeContent 组件
class HomeContent extends StatelessWidget{List list = new List();HomeContent(){for(int i=0;i<20;i++){this.list.add("我是一个${i+1}列表");}}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Container(padding: EdgeInsets.all(10),child: ListView.builder(itemCount: this.list.length,itemBuilder: (item, index){return ListTile(title: Text(this.list[index]));}));}
}

Flutter ListView （动态）列表组件、水平列表组件、图标组件详解相关推荐

flutter listview 滚动到底部_Flutter系列之Flex布局详解
PS:长期坚持是一件很难的事. Flutter 是 Google 推出的跨平台 UI 框架,可以快速地在 Android 和 IOS 上构建高质量的应用程序,其主要特点是 Flutter 具有快速开发 ...
paging library java_Android官方分页组件介绍之Paging的使用详解
Android官方分页组件介绍之Paging的使用详解发布时间:2018-04-27 13:47, 浏览次数:1618 , 标签: Android Paging Paging 使您的应用程序更容易从 ...
Android四大组件之bindService源码实现详解
Android四大组件之bindService源码实现详解 Android四大组件源码实现详解系列博客目录: Android应用进程创建流程大揭秘 Android四大组件之bindServic ...
Android-Universal-Image-Loader三大组件DisplayImageOptions、ImageLoader、ImageLoaderConfiguration详解
原文地址为: Android-Universal-Image-Loader三大组件DisplayImageOptions.ImageLoader.ImageLoaderConfiguration详解 ...
Python教程：python中二维列表的创建、访问、应用详解
欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是<Python中二维列表的创建.访问.应用详解>.本知识点主要内容有:二维列表的概念.直接定义二维列表.使用嵌套的for循环创 ...
java常量配置_java项目动态配置常量和peiconfig.properties配置使用详解
java项目动态配置常量和peiconfig.properties配置使用详解点击:2 Java工程中配置信息一般都写在 properties文件中,下面这篇文章是对java基础配置的一点学习心得整 ...
技巧：Linux 动态库与静态库制作及使用详解
http://www.ibm.com/developerworks/cn/linux/l-cn-linklib/ 技巧:Linux 动态库与静态库制作及使用详解标准库的三种连接方式及静态库制作与使用 ...
网站服务器怎么组件,网站服务器搭建与配置详解！
原标题:网站服务器搭建与配置详解! 服务器大家经常会听说,但是可能大家对个中概念还有些不明白,这里跟大家说说网站服务器的搭建与配置. 网站服务器概念网站服务器是网络应用的基础硬件设施,简言之即存放网 ...
SpringBoot2 整合Kafka组件，应用案例和流程详解
本文源码:GitHub·点这里 || GitEE·点这里一.搭建Kafka环境 1.下载解压 -- 下载 wget http://mirror.bit.edu.cn/apache/kafka/2.2 ...
vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...

Flutter ListView （动态）列表组件、水平列表组件、图标组件详解

Flutter ListView （动态）列表组件、水平列表组件、图标组件

Flutter ListView 基础列表组件、水平列表组件、图标组件

1. 基础案例列表示例，使用`Icon`装饰列表组件

2. 基础案例图片列表示例，使用`Image`装饰列表组件

3. 横向列表排列，适合用于横向图文列表布局

Flutter 动态列表组件

1. 基础动态生成的列表

2. 动态数据生成的列表

3. 使用`ListView.builder`创建动态列表

Flutter ListView （动态）列表组件、水平列表组件、图标组件详解相关推荐

最新文章

热门文章

Flutter ListView （动态）列表组件、水平列表组件、图标组件详解

Flutter ListView （动态）列表组件、水平列表组件、图标组件

Flutter ListView 基础列表组件、水平列表组件、图标组件

1. 基础案例列表示例，使用Icon装饰列表组件

2. 基础案例图片列表示例，使用Image装饰列表组件

3. 横向列表排列，适合用于横向图文列表布局

Flutter 动态列表组件

1. 基础动态生成的列表

2. 动态数据生成的列表

3. 使用ListView.builder创建动态列表

Flutter ListView （动态）列表组件、水平列表组件、图标组件详解相关推荐

最新文章

热门文章

1. 基础案例列表示例，使用`Icon`装饰列表组件

2. 基础案例图片列表示例，使用`Image`装饰列表组件

3. 使用`ListView.builder`创建动态列表