flutter中ListView的详细讲解

概述1.ListView的简单介绍 ListView是最常用的可以滚动组件之一， 它可以沿一个方向进行线性排列所有的子组件。 下面是ListView的属性值介绍： scrollDirection:列表的滚 1.ListVIEw的简单介绍

ListVIEw是最常用的可以滚动组件之一，它可以沿一个方向进行线性排列所有的子组件。下面是ListVIEw的属性值介绍：scrollDirection:列表的滚动方向，可选值有Axis的horizontal和vertical，默认是垂直方向上滚动。controller:控制器，与列表滚动相关，比如监听列表的滚动事件。physics: 列表滚动至边缘后继续拖动的物理效果，AndroID与iOS效果不同。AndroID会呈现出一个波纹状（对应ClamPingScrollPhysics），而iOS上有一个回d的d性效果（对应BouncingScrollPhysics）。如果你想不同的平台上呈现各自的效果可以使用AlwaysScrollableScrollPhysics，它会根据不同平台自动选用各自的物理效果。如果你想禁用在边缘的拖动效果，那可以使用NeverScrollableScrollPhysics；shrinkWrap: 该属性将决定列表的长度是否仅包裹其内容的长度。当ListVIEw嵌在一个无限长的容器组件中时，shrinkWrap必须为true，否则Flutter会给出警告；padding: 列表内边距；itemExtent: 子元素长度。当列表中的每一项长度是固定的情况下可以指定该值，有助于提高列表的性能（因为它可以帮助ListVIEw在未实际渲染子元素之前就计算出每一项元素的位置）；children: 容纳子元素的组件数组。

2.ListTile 属性简介

this.leading,// 内容的==>前置图标this.Title,// 内容的==>标题this.subTitle,// 内容的==>副标题this.trailing,// 内容的==>后置图标this.isThreeline = false,// 内容的==>是否三行显示this.dense,// 内容的==>直观感受是整体大小this.contentpadding,// 内容的==>内容内边距this.enabled = true,// 内容 是否禁用this.onTap,// item onTap 点击事件this.onLongPress,// item onLongPress 长按事件this.selected = false,// item 是否选中状态

3.ListVIEw的基本使用

我们做一个新闻列表；结构非常的简单：有主标题和副标题Title(主标题)和subTitle(subTitle)我们一起来看看长成什么样子。

class MyCont extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return ListVIEw(children: <Widget>[      ListTile(        // 主标题        Title: Text('Flutter 由 Google 的工程师团队打造，用于创建高性能、跨平台的移动应用',//文字左对齐            textAlign: TextAlign.left,//超出显示省略号            overflow: TextOverflow.ellipsis,style: TextStyle(              //数字必须是Double类型的              FontSize: 20.0,//  设置字体的颜色              color: color.fromARGB(200,100,8)            )        ),// 副标题        subTitle: Text('你好Flutter'),),ListTile(        Title: Text('Flutter 由 Google 的工程师团队打造，用于创建高性能、跨平台的移动应用'),subTitle: Text('你好Flutter'),]);  }}

4.ListVIEw列表设置前置图标

class MyCont extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return ListVIEw(children: <Widget>[      ListTile(        // 主标题        // 在前面设置图标        leading: Icon(          //设置图标类型          Icons.settings,//0x后面开始 两位FF表示透明度16进制，          color: color(0xFFFFB6C1),//这是图标的大小          size: 30.0        ),// 在后面设置图标        // trailing: Icon(Icons.accessible),Title: Text('Flutter教程_2021 Dart Flutter入门实战视频教程132讲',//文字左对齐          textAlign: TextAlign.left,//超出显示省略号          overflow: TextOverflow.ellipsis,style: TextStyle(            FontSize: 20.0,//数字必须是Double类型的            //  设置字体的颜色            color: color(0xFFFFB6C1)          )        ),subTitle: Text('不管是Ios还是AndroID开发都可以在Flutter官网上查到安装及使用步骤，这里我就不累述太多'),]);  }}

5.设置前置图片

class MyCont extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return ListVIEw(children: <Widget>[      ListTile(        // 主标题        // 通过leading可以将图片放在前面        leading: Image.network(          "https://giIDu.c/ster/src=http%3A%2F%2Ft14.npg"),Title: Text(            'Flutter教程_2021 Dart Flutter入门实战视频教程132讲',textAlign: TextAlign.left,//文字左对齐            overflow: TextOverflow.ellipsis,//超出显示省略号            style: TextStyle(              FontSize: 20.0,//数字必须是Double类型的              //  设置字体的颜色              color: color(0xFFFFB6C1)            )          ),]);  }}

6.垂直列表

class MyCont extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return ListVIEw(children: <Widget>[      Container(        wIDth: 750.0,height: 200.0,color:color(0xFFFFB6C1),// 外边距 左上右下，跟CSS不一样哈        margin: EdgeInsets.fromLTRB(10,10,0),Container(        wIDth: 750.0,color: color(0xFFFFB6C1),)    ]);  }}

7.水平排列

class MyCont extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return Container(      height: 200.0,child:new ListVIEw(        // 水平排列         scrollDirection: Axis.horizontal,children: <Widget>[          Container(            wIDth: 220.0,// 外边距 左上右下，跟CSS不一样哈            margin: EdgeInsets.fromLTRB(10,Container(            wIDth: 220.0,]      )    );  }}

8.动态列表

在项目的实际开发过程中；我们会有很多的列表；我们想将ListVIEw中children中的代码封装成为一个函数。方便后期的管理

class MyApp extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return MaterialApp(      home: Scaffold(appbar: Appbar(Title: Text('首页')),body: MyCont()),//设置顶部的颜色      theme: themeData(primarySwatch: colors.yellow),);  }}class MyCont extends StatelessWidget {  // lis里面的数据必须是Widget组件；  // _backDataList方法下划线开头，表示当前这个类私有的。  List<Widget> _backDataList() {    return [      ListTile(        Title: Text('我是新闻标题1'),ListTile(        Title: Text('我是新闻标题2'),ListTile(        Title: Text('我是新闻标题3'),ListTile(        Title: Text('我是新闻标题4'),)    ];  }  @overrIDe  Widget build(BuildContext context) {    return ListVIEw(children: this._backDataList());  }}

9.往数组中添加数据进行循环

class MyCont extends StatelessWidget {  // lis里面的数据必须是Widget组件；  // _backDataList方法下划线开头，表示当前这个类私有的。  List<Widget>_backDataList() {    // 声明了一个数组，里面的数据类型是Widget    List<Widget> List = [];     for (var i = 0; i < 10; i++) {      List.add(ListTile(        Title: Text('我是新闻标题$i'),));    }    return List;  }  @overrIDe  Widget build(BuildContext context) {    return ListVIEw(children: this._backDataList());  }}

10.为什么要使用ListVIEw.builder

ListVIEw.builder下的两个属性值itemCount：指定被循环数组的长度itemBuilder:它有2个参数。itemBuilder(contText,index) {    contText表示的循环的内容    index表示循环的索引值}如果itemBuilder下是一个封装的函数，不要添加括号，因为括号表示调用；直接itemBuilder:this.youFunc就可以了使用ListVIEw.builder的优势：ListVIEw.builder适合列表项比较多（或者无限）的情况，只有当子组件真正显示的时候列表才会被创建，也就说通过该构造函数创建的ListVIEw是支持基于Sliver的懒加载模型的。也就是说使用ListVIEw.builder可以提升性能。下面我们将会使用ListVIEw.builder来创建一个列表

在lib目录下创建一个res在res目录下创建demo.dartdemo.dart文件下有数据的哈import 'res/demo.dart';List ListData = [  {    'Title': 'Python 创作季，秀出你的 Python 文章  }]后面使用ListData就可以直接获取数据了哈class MyCont extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return ListVIEw.builder(      // itemCount:指定该数组的长度      itemCount: ListData.length,//itemBuilder 会进行循环遍历      itemBuilder: (contText,index) {        return ListTile(          Title: Text(ListData[index]['Title']),//还有很多的属性xxxx........        );      },);  }}

前面我们说了，使用ListVIEw.builder可以提高性能；但是我们发现了itemBuilder下如果有很多属性的话；那么就会变得非常的臃肿的；后期是不利于我们维护；那么我们能不能将 itemBuilder中的抽离出去了？经过我的查询文档发现是可以的请看下面：

11.将itemBuilder中的属性抽离出去

我们可以将原来itemBuilder下的代码封装成为一个方法放置在自定义的_getListData下；方便我们后期的维护以及修改

class MyCont extends StatelessWidget {  //自定义的方法  Widget _getListData(contText,index){    return ListTile(      Title: Text(ListData[index]['Title']),);  }  @overrIDe  Widget build(BuildContext context) {    return ListVIEw.builder(      // itemCount:指定该数组的长度      itemCount: ListData.length,//this._getListData是不需要加括号的；      // 我们这里表示的复制该方法      // this._getListData()表示的是直接去调用这个方法      itemBuilder:this._getListData    );  }}

12.ListVIEw children与ListVIEw.builder的区别

通过前面的例子，我们可以发现ListVIEw有默认构造函数。ListVIEw默认构造函数有一个children参数，children接受一个Widget列表[List],通过children参数的形式接受的子组件列表。这种方式需要将所有的children都提前创建好；因此需要提前做大量的工作；所以:这种形式只适合少量的子组件的情况ListVIEw.builderListVIEw.builder适合列表项比较多（或者无限）的情况，只有当子组件真正显示的时候列表才会被创建，也就说通过该构造函数创建的ListVIEw是支持基于Sliver的懒加载模型的。

13.制作一个好看的列表

我们将使用后置图标trailing这个属性来完成图片后置。同时我们将给一个容器组件Container；容器组件的宽高来限制图片的大小；我们将会对图片进行裁剪，

在lib目录下创建一个res在res目录下创建demo.dartdemo.dart文件下有数据的哈import 'res/demo.dart';List ListData = [  {    'Title': 'Python 创作季，秀出你的 Python 文章  }]class MyCont extends StatelessWidget {  // lis里面的数据必须是Widget组件；  // _backDataList方法下划线开头，表示当前这个类私有的。  List<Widget> _backDataList() {    var temtepleList = ListData.map((value) {      return ListTile(          Title: Text(            value['Title'],// 超出显示省略号            overflow: TextOverflow.ellipsis,style: TextStyle(FontSize: 16.0,color: color(0xFF86909c)),subTitle: Text(            value['cont'],overflow: TextOverflow.ellipsis,style: TextStyle(FontSize: 13.0,trailing: Container(              wIDth: 90.0,//容器宽              height: 70.0,//容器高              decoration: Boxdecoration(                borderRadius: borderRadius.circular(4.0),image: decorationImage(                  image: NetworkImage(                    value['img'],alignment: Alignment.topleft,//左上角居中                  fit: BoxFit.cover,//裁剪，充满整个容器。不会变形                )               )          )      );    });    // 转化成为一个数组    return temtepleList.toList();  }  @overrIDe  Widget build(BuildContext context) {    return ListVIEw(children: this._backDataList());  }}

总结

以上是内存溢出为你收集整理的flutter中ListView的详细讲解全部内容，希望文章能够帮你解决flutter中ListView的详细讲解所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。