Flutter——ListView组件(平铺列表组件)
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组件(平铺列表组件)的更多相关文章
- 07Flutter ListView基础列表组件、水平列表组件、图标组件
ListView: ListView:参数 scrollDirection:Axis.horizontal:水平列表.Axis.vertical垂直列表 padding:内边距 ...
- ListView 基础列表组件、水平 列表组件、图标组件
一.Flutter 列表组件概述 列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义 列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显 ...
- Flutter——GridView组件(网格列表组件)
GridView组件的常用参数: 名称 类型 说明 scrollDirection Axis 滚动方法 padding EdgeInsetsGeometry 内边距 resolve bool 组件反向 ...
- Android(java)学习笔记186:对ListView等列表组件中数据进行增、删、改操作
1.ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: acit ...
- Android(java)学习笔记129:对ListView等列表组件中数据进行增、删、改操作
1. ListView介绍 解决大量的相似的数据显示问题 采用了MVC模式: M: model (数据模型) V: view (显示的视图) C: controller 控制器 入门案例: aci ...
- ReactNative: 创建自定义List列表组件
一.介绍 在App中,很多数据消息显示都是一行行动态展示的,例如新闻标题,其实每一条新闻标题都可以独立成一个简单的列表组件,之前我们使用Text组件将数据都写死了,为了提高组件的灵活性,我们可以使用T ...
- Flutter中打造多行列列表GridView组件的使用
GridView组件.一个可滚动的二维空间数组. 在使用无限加载滚动列表的时候,最先使用的还是ListView组件.但若是要一行显示2列或者更多列的滚动列表,GridView组件更为方便.如下 在向服 ...
- Flutter学习笔记(12)--列表组件
如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...
- flutter中的列表组件
列表布局是我们项目开发中最常用的一种布局方式.Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示.通过一个属性就可以控制列表的显示方向.列表有以下分类: 垂直列表 ...
随机推荐
- phpcms前台无法退出无法清除cookie
phpcms前台无法退出无法清除cookie 如果caches\configs\system.php 中的cookie_path 设置为空..就会出现退不出的情况..设置为'cookie_path' ...
- No manual entry for printf in section 3
在引入标准库头文件的时候,很多时候要先查询一下该函数所属的库,以及基本用法,在linux系统下,可以使用 man 1-9 函数名称 但是 问题来了,No manual entry for printf ...
- Shell中特殊字符的含义
$0 这个程式的执行名字 $n 这个程式的第n个参数值,n=1..9 $* 这个程式的所有参数,此选项参数可超过9个. $# 这个程式的参数个数 $$ 这个程式的PID(脚本运行的当前进程ID号) $ ...
- IDEA debug漏洞第一篇(weblogic,cve-2017-10271)
在weblogic.wsee.jaxws.WLSServletAdapter的129行打点 if (var2.getMethod().equals("GET") || var2.g ...
- selenium3关于ddt驱动之读取json文件。。。
from selenium import webdriver import ddt import time import unittest """ DDT(驱动.json ...
- windows上OpenSSH服务安装及启动
一.windows安装OpenSSH 1,下载openSSH windows版 GitHub下载链接 我安装的是64位版本 OpenSSH-Win64.zip 2,解压到C:\Program File ...
- formSelects设置不可选择
看效果 还把颜色换成灰色 js代码formSelectsId是formSelects的id,不是元素的id,而是xm-select的值 layui.formSelects.disabled(" ...
- ajax head带参数两次请求
ajax请求head里带数据 客户端先发一次option看看能不能登录,然后再发一次post
- javascript let
es6支持通过let关键字声明属于单独块{}的变量,更好的管理变量作用屿 funtion foo() { var a=1; if (a>1) { let b=2; //只属于if模块 while ...
- 分享 Shiro 学习过程中遇到的一些问题
最近在学习 shiro 安全框架后,自己手写了一个小的管理系统 web 项目,并使用 shiro 作为安全管理框架.接下来分享一下在这过程中,遇到的一些问题以及自己的解决思路和方法. 一.Log ou ...