ListView的常见参数:

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

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: "ListWidget",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.directions_car),
title: Text("标题"),
subtitle: Text("内容"),
trailing: Icon(Icons.airplanemode_active),
),
ListTile(
leading: Icon(Icons.directions_car),
title: Text("标题"),
subtitle: Text("内容"),
trailing: Icon(Icons.airplanemode_active),
),
ListTile(
leading: Icon(Icons.directions_car),
title: Text("标题"),
subtitle: Text("内容"),
trailing: Icon(Icons.airplanemode_active),
),
],
),
);
}
}
  • 水平列表

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: "ListWidget",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
color: Colors.pink,
width: 100.0,
height: 100.0,
),
Container(
color: Colors.yellow,
width: 100.0,
height: 100.0,
),
Container(
color: Colors.blue,
width: 100.0,
height: 100.0,
),
Container(
color: Colors.green,
width: 100.0,
height: 100.0,
),
Container(
color: Colors.orange,
width: 100.0,
height: 100.0,
),
],
),
);
}
}

注意:如果是垂直列表,LIstView里面的widget设置的width属性失效。

   如果是水平列表,ListView里面的widget设置的height属性失效。

  • 动态列表

import 'package:flutter/material.dart';

void main() {
runApp(MaterialApp(
title: "ListWidget",
home: MyApp(),
));
} class MyApp extends StatelessWidget {
List list = new List();
MyApp() {
for(var i = 0; i < 15; i++) {
this.list.add("我是第$i条数据");
}
} @override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: this.list.length,
itemBuilder: (context,index) {
return ListTile(
leading: Icon(Icons.palette),
title: Text("${this.list[index]}"),
);
}
),
);
}
}

Flutter——ListView组件(平铺列表组件)的更多相关文章

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

    ListView:     ListView:参数     scrollDirection:Axis.horizontal:水平列表.Axis.vertical垂直列表     padding:内边距 ...

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

    一.Flutter 列表组件概述 列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义 列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显 ...

  3. Flutter——GridView组件(网格列表组件)

    GridView组件的常用参数: 名称 类型 说明 scrollDirection Axis 滚动方法 padding EdgeInsetsGeometry 内边距 resolve bool 组件反向 ...

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

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

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

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

  6. ReactNative: 创建自定义List列表组件

    一.介绍 在App中,很多数据消息显示都是一行行动态展示的,例如新闻标题,其实每一条新闻标题都可以独立成一个简单的列表组件,之前我们使用Text组件将数据都写死了,为了提高组件的灵活性,我们可以使用T ...

  7. Flutter中打造多行列列表GridView组件的使用

    GridView组件.一个可滚动的二维空间数组. 在使用无限加载滚动列表的时候,最先使用的还是ListView组件.但若是要一行显示2列或者更多列的滚动列表,GridView组件更为方便.如下 在向服 ...

  8. Flutter学习笔记(12)--列表组件

    如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...

  9. flutter中的列表组件

    列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类:  垂直列表 ...

随机推荐

  1. Flutter 圆形/圆角头像图片

    图片显示 1.本地图片 Image.asset加载项目资源包的图片 //先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets Image.as ...

  2. Galileo:一款开源Web应用审计框架

    转载自FreeBuf.COM Galileo是一款针对Web应用程序的开源渗透测试工具,可帮助开发和渗透测试人员识别并利用其Web应用程序中的漏洞. 截图 安装 $ git clone https:/ ...

  3. ubuntu 右上角网络图标不见了

    sudo service network-manager stop sudo rm /var/lib/NetworkManager/NetworkManager.state sudo service ...

  4. HttpHelper帮助类

    public class HttpHelper { #region 预定义方变量 //默认的编码 private Encoding _encoding = Encoding.Default; //Po ...

  5. c++ hex string array 转换 串口常用

    c++ hex string array 转换 效果如下 tset string is follow 0x50 55 0x35 00 10 203040506073031323334ff format ...

  6. Mysql性能优化之---(二)

    建立适当的索引 说起提高数据库性能,索引是最物美价廉的东西了.不用加内存,不用改程序,不用调sql,只要执行个正确的'create index',查询速度就可能提高百倍千倍,这可真有诱惑力.可是天下没 ...

  7. ubuntu配置kvm服务

    虚拟化第一弹,lei了lei了~ 首先,简单介绍一下KVM服务. KVM 全称是 Kernel-Based Virtual Machine,它是一种常用的虚拟化工具.是基于linux内核所开发的虚拟平 ...

  8. PowerPoint储存此文件时发生错误 出现错误的问题解决方法

    .单击“文件”,单击“选项”,然后单击“加载项”. . 在管理下拉框中选择“COM加载项”,单击“转到”按钮. . 检查是否存在有任何加载项,清除所有复选框来禁用它们. . 关闭PPT并重新启动,测试 ...

  9. 性能工具之JMeter+InfluxDB+Grafana打造压测可视化实时监控(centos7环境)

    前提条件,已经安装jmeter并可以运行 1.安装influxdata wget et https://dl.influxdata.com/influxdb/releases/influxdb-1.7 ...

  10. linux利用crontab添加定时任务详解

    crontab 作用:添加,查询,删除系统计划任务的指令. [root@localhost ~]# crontab [选项]选项:    -e:    编辑crontab定时任务    -l:    ...