Flutter-ListView的使用说明

最新推荐文章于 2024-05-04 16:01:51 发布
最新推荐文章于 2024-05-04 16:01:51 发布
阅读量839 收藏 2
点赞数
分类专栏： Flutter专题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvsonghai/article/details/104281321
版权

Flutter-ListView的使用说明

1、ListView定义中的常用属性
1⃣️、scrollDirection = Axis.vertical,//设置listView是水平布局方式horizontal，还是垂直布局方式vertical,
2⃣️、 bool reverse = false,//是否反转ListView上面的children组件倒序进行排列
3⃣️、EdgeInsetsGeometry padding//设置内边距
4⃣️、List<Widget> children = const <Widget>[],//设置ListView的孩子们
2、ListView的简单使用方式一

ListView在使用过的过程中有点类似于TableView和CollectionView，可以复杂的页面进行布局。这里首先展示最简单的一种布局方式

ListView(
  padding: EdgeInsets.all(16.0),//设置内边距为16
  children: <Widget>[
    Text('dateListView1',style: TextStyle(
      color: Colors.red,
      fontSize: 20.0,
      backgroundColor: Colors.grey
    ),),
    Text('dateListView2',style: TextStyle(
        color: Colors.black,
        fontSize: 20.0,
        backgroundColor: Colors.grey
    ),),
    Text('dateListView3',style: TextStyle(
        color: Colors.orange,
        fontSize: 20.0,
        backgroundColor: Colors.grey
    ),),
    Text('dateListView4',style: TextStyle(
        color: Colors.green,
        fontSize: 20.0,
        backgroundColor: Colors.grey
    ),),
    Text('dateListView5',style: TextStyle(
        color: Colors.lightBlue,
        fontSize: 20.0,
        backgroundColor: Colors.grey
    ),),
  ],
)

运行结果如下：
在这里插入图片描述

3、使用for循环的方式ListView

在ListView里面通过手动添加的方式创建一组children固然可行，但是显得不够搞笑；通常在一组展示样式相同情况下，我们可以使用for循环厂进行创建，演示代码如下：

Widget _listView_forDemo() {
List<Widget> __createChildren() {
  List<Widget> children = new List();
  for(int index = 0; index < 20; index ++) {
    children.add(
        Container(
          margin: EdgeInsets.only(bottom: 16.0,left: 16.0),
          child: Text('dateListView$index', style: TextStyle(
              color: Colors.black,
              backgroundColor: Colors.grey
          ),),
        )
    );
  }
  return children;
}
return ListView(
  children: __createChildren(),
);
}

运行效果请自行拷贝代码查看效果。

4、使用ListView.builder

ListView.builder是Flutter主动提供的创建视图方法，在使用过程中一定要实现itemCount、itemBuilder两种方法；itemCount设置children的个数，itemBuilder接受两个变量，分别为Context、Int；演示代码如下：

Widget _listView_builder () {
return ListView.builder(
  itemCount: 30,
    itemBuilder: (context, index) {
    //可以返回任意类型的Widget
      return Container(
        height: 46.0,
        width: 100,
        padding: EdgeInsets.all(10.0),
        child:Text('dateListView$index', style: TextStyle(
            color: Colors.black,
            backgroundColor: Colors.grey
        ),),
      );
    });
	}

请自行运行代码查看；itemBuilder可以返回任意类型的Widget。

5、使用ListView.custom

ListView.custom是Flutter主动提供的创建视图的方法，在使用中一定要实现childrenDelegate、childCount两种方法，childCount是设置children的个数，childrenDelegate代理方法来实现创建子Widget，这里我们使用SliverChildBuilderDelegate代理来创建。示例代码如下：

Widget _listView_childrenDelegate() {
return ListView.custom(
    childrenDelegate: SliverChildBuilderDelegate((context, index){
      return Container(
        height: 46.0,
        width: 100,
        padding: EdgeInsets.all(10.0),
        child:Text('dateListView$index', style: TextStyle(
            color: Colors.red,
            backgroundColor: Colors.grey
        ),),
      );
    },
    childCount: 30,
    ),
);
}

请自行运行代码查看；SliverChildBuilderDelegate里面可以返回任意类型的Widget。

6、使用ListView.separated

ListView.separated也是Flutter主动提供的创建视图方法，这种方式创建的视图是带有分割线的。这个方式创建的视图必须要实现三种方法：itemBuilder、separatorBuilder、itemCount；itemCount用来设置子Widget个数，separatorBuilder设置分割线，这里我们使用Divider()，也可以自行定义，itemBuilder是创建实图提供的方法，接受两个参数context, index。演示代码如下：

Widget _listView_separated() {
return ListView.separated(
    itemBuilder: (context, index) {
      return Container(
        height: 46.0,
        width: 100,
        padding: EdgeInsets.all(10.0),
        child:Text('dateListView$index', style: TextStyle(
            color: Colors.orange,
            backgroundColor: Colors.grey
        ),),
      );
    },
    separatorBuilder: (context, index) => Divider(),//设置分割线，
    itemCount: 30
);
}

请自行运行代码查看；itemBuilder可以返回任意类型的Widget。

7、使用ListTile创建新闻类型的视图

在ListView里面可以使用ListTile组件来创建视图，ListTile类似于新闻类型的一个一个小WIdget，在ListTile里面可以自行设定leading：表示左边的小Widget，可以是一个图片或者别的；trailing表示右边的小Widget，可以是一个图片或者别的；title表示标题，subtitle表示副标题。演示代码如下：

Widget _listView_listTile() {

return ListView(
  children: <Widget>[
    ListTile(
//          trailing: Image.network(src),//右边图片
      leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
      title: Text('ListView_ListTile的使用',style: TextStyle(
        fontSize: 20.0,
        color: Colors.black
      ),),
      subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
      style: TextStyle(
        fontSize: 14.0,
        color: Colors.black45
      ),),
    ),
    ListTile(
      leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
      title: Text('ListView_ListTile的使用',style: TextStyle(
          fontSize: 20.0,
          color: Colors.black
      ),),
      subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
        style: TextStyle(
            fontSize: 14.0,
            color: Colors.black45
        ),),
    ),
    ListTile(
      leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
      title: Text('ListView_ListTile的使用',style: TextStyle(
          fontSize: 20.0,
          color: Colors.black
      ),),
      subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
        style: TextStyle(
            fontSize: 14.0,
            color: Colors.black45
        ),),
    ),
    ListTile(
      leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
      title: Text('ListView_ListTile的使用',style: TextStyle(
          fontSize: 20.0,
          color: Colors.black
      ),),
      subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
        style: TextStyle(
            fontSize: 14.0,
            color: Colors.black45
        ),),
    ),
    ListTile(
      leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
      title: Text('ListView_ListTile的使用',style: TextStyle(
          fontSize: 20.0,
          color: Colors.black
      ),),
      subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
        style: TextStyle(
            fontSize: 14.0,
            color: Colors.black45
        ),),
    ),
    ListTile(
      leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
      title: Text('ListView_ListTile的使用',style: TextStyle(
          fontSize: 20.0,
          color: Colors.black
      ),),
      subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
        style: TextStyle(
            fontSize: 14.0,
            color: Colors.black45
        ),),
    ),
    ListTile(
      leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
      title: Text('ListView_ListTile的使用',style: TextStyle(
          fontSize: 20.0,
          color: Colors.black
      ),),
      subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
        style: TextStyle(
            fontSize: 14.0,
            color: Colors.black45
        ),),
    ),
    ListTile(
      leading: Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
      title: Text('ListView_ListTile的使用',style: TextStyle(
          fontSize: 20.0,
          color: Colors.black
      ),),
      subtitle: Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用',
        style: TextStyle(
            fontSize: 14.0,
            color: Colors.black45
        ),),
    ),
  ],
);
}

现在运行查看类似新闻类型的ListView
在这里插入图片描述

8、ListView.builder与ListTile结合的方式创建

ListView.builder的itemBuilder方法接受两个参数context和int，我们可以利用这点来自定义一个方法去创建Widget；

演示代码如下：

Widget _listview_builder_listtile() {
return ListView.builder(
  itemCount: 20,
    itemBuilder:_getListTileData
);
}
//自定义方法
Widget _getListTileData(context,index){
return ListTile(
    title: Text('ListView_ListTile的使用..$index'),
    leading:Image.network('http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'),
    subtitle:Text('ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用ListView_ListTile的使用..$index')
);
}
songhai11
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flutter中ListView用法
juer2017的博客
03-28 1210
Flutter中ListView用法
Flutter中ListView 的使用示例
Android23333的博客
04-02 910
2.Android Framework学习指南，助力成为系统级开发高手。5.Android Jetpack从入门到精通，构建高质量UI界面。4.企业级Android音视频开发学习路线+项目实战（附源码）1.Android车载应用开发系统学习指南（附项目实战）8.高级Android插件化与组件化（含实战教程和源码）以上就是本文的全部内容，希望对大家的学习有所帮助。10.Android零基础入门到精通，高手进阶之路。7.Kotlin从入门到实战，全方面提升架构基础。这个小例子使用的是豆瓣 API 中。
Flutter ListView详解
最新发布
2401_84149607的博客
05-04 898
/设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直//内间距//是否倒序显示 默认正序 false 倒序true//false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。//确定每一个item的高度 会让item加载更加高效//内容适配//item 数量//滑动类型设置//cacheExtent 设置预加载的区域//滑动监听。
Flutter ListView 用法详解
weixin_33744854的博客
04-13 1729
ListView的4种构造方式 默认构造函数（传入 List children） ListView( children: <Widget>[ ListTile(title: Text("普通ListView")), ListTile( title: Text("ListView.buil...
Flutter中ListView用法详解
flutterer的博客
06-25 1859
在Flutter项目中,listview作为一个列表组件加载到页面中,使用方法如下: class _HomePageState extends State { @override Widget build(BuildContext context) { return Container( child: ListView.builder( itemCount: 10,//数据条数 itemBuilder: (BuildContext context, int index) {//返回一个 Lis
flutter基础：listview的使用
weixin_40652755的博客
11-04 732
简介 listview是flutter中最常用的滚动组件之一，可以非常方便的实现一个方向上的多个子组件的线性排列。先看一下它的默认构造函数： ListView({ Key key, Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrink
Flutter-ListView
04-14
latihan_listview 一个新的Flutter项目。入门该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门：要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，...
Flutter-ListView-and-GridView
05-10
在本文中，我们将深入探讨Flutter框架中的两个重要组件：ListView和GridView。这两个组件在构建动态、可滚动的列表和网格视图时起着至关重要的作用。Flutter是Google开发的一个开源移动应用开发框架，它使用Dart语言...
Flutter-Nested-ListView
05-15
《深入探索Flutter嵌套ListView》 在Flutter框架中，ListView是一种常见的可滚动视图，用于显示一连串数据。然而，当数据结构涉及到层级关系时，普通的ListView就无法满足需求，这时就需要用到Nested ListView...
Flutter ListView使用方法
qq_30005223的博客
01-27 1940
ListView使用方法 /// /// ListView 线性列表 class ListViewApp extends StatelessWidget { const ListViewApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) => _ListViewPage(); } class _ListViewPage extends StatefulWidget { @o
Flutter中使用ListView时如何更有效的设置Item项间距？
neuHenry
09-27 1万+
App开发中，列表的使用是比较常见的场景，Android原生开发时，ListView 是最常用的滑动组件，后来 Google 又推出了功能更加强大，使用更加灵活的 RecyclerView。同样，在 Flutter 开发中，系统也提供了 ListView 用于实现列表滑动的滑动组件，它可以沿一个方向线性排布所有子组件，并且支持基于 Sliver 的延迟构建模型。 Flutter 中使用 ListView 时，如何更有效的设置 Item 项间距呢？ 看官方文档，可以找到，我们在构建 ListView 时有四种
实现List集合中数据逆序排列
热门推荐
谢栋的专栏
10-29 4万+
今天写项目时在listview展示数据时遇到一件很苦恼的事，因为listview中的数据是从调用者传递过来的List集合，里面的数据跟传过来的数据顺序保持一致 但是项目中的需求是想让最后添加进来的数据展示在listview的最顶端，即数据需要逆序排列，尝试了好多方法都觉得不大方便，其中也尝试了用for遍历里面 的数据，但是实现起来着实太麻烦。 其实Java作为一个强大的开发语言，自然是强大的
Flutter App (一) —— ListView以及GridView的列表展示与Item点击事件
xhuww的博客
05-19 2万+
欢迎来到xhu_ww的博客 本文章为作者在学习Flutter 时的学习总结，在本文中你可了解到以下内容： Flutter的安装与使用 Flutter中网络请求 Flutter中列表展示 1. Flutter的安装与使用 能查看本文，相信你对Flutter 已经有了一定的了解，在此就不用对Flutter 进行介绍了。如果完全不了解可以查看：Flutter 官网 1.1 Flutt...
Flutter使用ListView加载列表数据
子不语的博客
10-25 1万+
移动端UI展示最常见的展示形式莫过于列表，Android中使用ListView/Recyclerview，iOS也有UIListView，都可以实现列表展示。Flutter作为兼容Android和iOS的移动UI框架，自然也有实现此功能的组件，即ListView。 本文数据采用爬虫爬取华尔街见闻全球资讯，然后采用GraphQL接口请求数据。显示效果如下 实现 创建ListView 及每个显示的...
Futter基础第5篇： 实现列表、动态列表【ListView、ListView.builder】
qq_27494201的博客
11-23 1625
一丶 代码+注释 实现动态列表： 【1】方式一：抽离组件 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { //...
Flutter 列表控件ListView
喻志强的博客
03-01 1万+
Flutter ListView 列表布局在手机上是最最常用的控件了。 Android上的RecycleView尤其的强大。 Flutter中也给我们提供了ListView,不过就目前的体验来看，性能跟原生的ListView或RecycleView比还是有一点差距的。滑动起来还是略卡。 下面我们来看一下ListView的相关知识 继承关系 可以看到，ListView和GridView都继承自Bo...
flutter listview
07-28
Flutter ListView 是一个可以用来显示一个可滚动的列表的组件。它可以根据需要动态加载列表项，并且支持垂直和水平方向的滚动。 在 Flutter 中，你可以使用 ListView.builder 构造函数来创建一个动态列表。这个构造函数接受一个 itemCount 参数用来指定列表项的数量，以及一个 itemBuilder 参数用来指定如何构建每个列表项的 Widget。 下面是一个简单的例子，演示如何使用 ListView.builder 创建一个垂直滚动的动态列表： ```dart ListView.builder( itemCount: items.length, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text(items[index]), ); }, ) ``` 在上面的例子中，items 是一个包含了所有列表项数据的 List。ListView.builder 会根据 items 的长度自动加载相应数量的列表项，并使用 itemBuilder 构建每个列表项的内容。 除了 ListView.builder，Flutter 还提供了其他几种 ListView 的构造函数，例如 ListView.separated 可以在列表项之间添加分隔线，ListView.custom 可以更加灵活地自定义列表项的构建方式等。你可以根据自己的需求选择合适的构造函数来创建 ListView。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

songhai11

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值