学习了Flutter,来分享一下学习的一些常用的知识,先来说说ListView

案例效果:

ListView是一个类似列的widget,它的内容对于其渲染框太长时会自动提供滚动。

ListView 摘要:
用于组织盒子中列表的特殊Column
可以水平或垂直放置
检测它的内容超过显示框时提供滚动
比Column配置少,但更易于使用并支持滚动

构建ListView有四个选项:

默认构造函数采用子类的显式List <Widget>。此构造函数适用于具有少量子项的列表视图,因为构造List需要为可能在列表视图中显示的每个子项执行工作,而不仅仅是那些实际可见的子项。

该ListView.builder构造函数采用IndexedWidgetBuilder,它建立在孩子的需求。此构造函数适用于具有大量(或无限)子项数的列表视图,因为仅为那些实际可见的子项调用构建器。

该ListView.separated构造函数有两个IndexedWidgetBuilder S: itemBuilder按需建立个子项目,separatorBuilder 同样建立其出现在子项之间的分隔符的孩子。此构造函数适用于具有固定数量子项的列表视图。

该ListView.custom构造需要SliverChildDelegate,它提供了自定义子模型的其他方面的能力。例如,SliverChildDelegate可以控制用于估计实际上不可见的子项大小的算法。

官方文档介绍:

https://docs.flutter.io/flutter/widgets/ListView-class.html

案例代码:

class UITest3_ListView extends StatelessWidget{

  List<Widget> list = <Widget>[
new ListTile(
title: new Text('Mi is One',
style: new TextStyle(fontWeight: FontWeight.w500,fontSize: 20),
),
subtitle: new Text("85 W zq"),
leading: new Icon(Icons.theaters,color: Colors.blue[500]),
),
new ListTile(
title: new Text("Test at Tow",style: new TextStyle(fontWeight: FontWeight.w500,fontSize: 20)),
subtitle: new Text("666 Car"),
leading: new Icon(Icons.list,color: Colors.blue[500])
),
new ListTile(
title: new Text('Three',
style: new TextStyle(fontWeight: FontWeight.w500,fontSize: 20),
),
subtitle: new Text("85 W zq"),
leading: new Icon(Icons.theaters,color: Colors.blue[500]),
),
new ListTile(
title: new Text("Four",style: new TextStyle(fontWeight: FontWeight.w500,fontSize: 20)),
subtitle: new Text("666 Car"),
leading: new Icon(Icons.list,color: Colors.blue[500]),
onTap: (){
Fluttertoast.showToast(
msg: " Four",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIos: 1,
backgroundColor: Colors.blue,
textColor: Colors.white
);
}, )
]; @override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: new AppBar(
title: Text("ListView"),
),
body: new Center(
child: new ListView(
children: list,
),
),
);
}
}

flutter -------- ListView的使用的更多相关文章

  1. Flutter ListView 列表组件

    列表常见的情况: 1.垂直列表 2.垂直图文列表 3.横向列表 4.动态列表 名称 类型 说明 scrollDirection Axis Axis.horizontal 横向列表 Axis.verti ...

  2. Flutter——ListView组件(平铺列表组件)

    ListView的常见参数: 名称 类型 说明 scrollDirection Axis Axis.horizontal 水平列表 Axis.vertical 垂直列表 padding EdgeIns ...

  3. flutter ListView列表和导航传值以及回调

    main.dart import 'package:flutter/material.dart'; void main(){ return runApp(MyApp()); } class Produ ...

  4. flutter ListView简介

    child: new Container( child: new Center( child: ListView( shrinkWrap:true, children: <Widget>[ ...

  5. Flutter - ListView禁止用户上下滑动

    ListView禁止用户上下滑动可以使用physics属性 physics: const NeverScrollableScrollPhysics()

  6. flutter ListView 页面滚动组件

    ListView class A scrollable list of widgets arranged linearly. ListView is the most commonly used sc ...

  7. flutter ListView嵌套高度问题

    ListView嵌套时高度无法自适应,需要设置高度才可以显示,设置以下属性可以解决上述问题 shrinkWrap: true, physics: NeverScrollableScrollPhysic ...

  8. Flutter 自定义列表以及本地图片引用

    前言 上篇关于Flutter的文章总结了下标签+导航的项目模式的搭建,具体的有需要的可以去看看Flutter分类的文章,这篇文章我们简单的总结一下关于Flutter本地文件引用以及简单的自定义List ...

  9. flutter - 01 基础介绍以及ListView

    这篇主要讲flutter最基本的操作.我们从一个实例入手,先不需要知道它里面的每一行是什么意思,我会慢慢说. main.dart import 'package:flutter/material.da ...

随机推荐

  1. python数据类型之列表类型

    一.列表 作用:多个装备,多个爱好,多门课程,多个女朋友等 定义:[]内可以有多个任意类型的值,逗号分隔 以下是列表的常用操作方法: append(), count(), insert(),rever ...

  2. javascript中计算两个时间日期间隔的天数

    <script>              /*                  计算两个日期的时间间隔天数              */              //时间字符串的格 ...

  3. mongo中常用的增删改查

    db.students.find();//按性别分组,并显示每组的姓名db.students.aggregate({ $group:{ _id:'$sex', name:{$push:'$name'} ...

  4. 求你显示pdf

    123 <iframe src='http://km.shengaitcm.com/ADC/_layouts/15/WopiFrame.aspx?sourcedoc=%2FADC%2FDocLi ...

  5. PureMVC 官方文档翻译(一)

    最近在学习PureMVC框架,感觉最权威的还是阅读官方文档,顺便翻译了下全当记笔记了. PureMVC概览 这篇文档他讨论PureMVC框架的类和接口,使用UML来阐述它们的角色.职责和协作. Pur ...

  6. 写好shell脚本

    转载自https://mp.weixin.qq.com/s/f3xDHZ7dCQr7sHJ9KDvuyQ 1.提供--help标记 安装在系统上的二进制文件通常带有man帮助文档,但对于脚本来说就不一 ...

  7. 创建 Visual Studio 2017 离线安装

    代码示例: vs_Enterprise.exe --layout E:\VS2017LAYOUT --add Microsoft.VisualStudio.Workload.NetCoreTools ...

  8. Angular4 组件间通讯

  9. kibana查询语法 使用教程

    1. 使用双引号包起来作为一个短语搜索: "like Gecko" 2. ? 匹配单个字符; * 匹配0到多个字符 例如:kiba?a, el*search ? * 不能用作第一个 ...

  10. react小知识点

    1.render函数什么时候会执行? 当this.state/this.props发生改变的时候render函数就会执行 2.组件第一次执行的时候会执行哪些生命周期 constructor--> ...