学习了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. windows 下安装weblogic

    下载weblogic安装文件 https://www.oracle.com/technetwork/middleware/weblogic/downloads/index.html 在目录下, 下载后 ...

  2. Grid move

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. [游戏开发日志]Windows下Cocos2d-x 3.14环境搭建

    总介绍 我们小组使用的是cocos2d-x的游戏开发引擎,因此在所有开发工作之前,我们需要对这个引擎进行环境的搭建. 搭建过程 VS2013的下载和安装 VS只是作为一个开发环境而已,简单来说就是敲代 ...

  4. angular 4 实战开发--安卓兼容问题(1)

    首先我强调下我只是个菜鸟,大神不喜勿喷. 先介绍下项目背景,主要是公司的官网h5 ,架构用的是angular4 有点大材小用的赶脚,but ,公司要求. 在项目主功能做的差不多了.交给测试,这时候发现 ...

  5. 安卓自定义TextView实现自动滚动

    xml文件代码 <com.mobile.APITest.ScrollEditText android:id="@+id/statusEditText" android:lay ...

  6. Winform 加载datagridview

    string str = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=Test;Integrated Security=True ...

  7. Leaflet获取可视范围内4个顶点

    //地图级别改变时发生 map.on("zoomend", function (e) { var zoom_val = e.target.getZoom(); map_drag() ...

  8. re模块的应用

    import re # 正则表达式中的转义 : # '\(' 表示匹配小括号 # [()+*?/$.] 在字符组中一些特殊的字符会现出原形 # 所有的 \w \d \s(\n,\t, ) \W \D ...

  9. Lesson 02-Linux基础命令(一)

    查看系统IP Linux:ifconfig/ip a Windows:ipconfig vi:创建文件并编辑 touch:创建空文件 mkdir ~/a 在用户家目录下创建名称为a的文件夹 -p 创建 ...

  10. HTML与CSS的一些知识(三)

    CSS: 1.三大样式:行内(内嵌).内部(内联).外部(外联):基本都知道. 2.三大特性: a.继承性:父级样式会被子级继承(!important不会被继承,<a></a> ...