1. Toy模板网首页
  2. > Toy博客

flutter 之 ListView的使用与详解 map for listview.builder 的使用

8月前 作者：艾米家的猫儿（傻钢） 分类：Toy博客 阅读(33) 违法举报

这篇具有很好参考价值的文章主要介绍了flutter 之 ListView的使用与详解 map for listview.builder 的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

flutter 之 ListView的使用与详解 map for listview.builder 的使用

1.ListView 配合ListTile 实现新闻列表样式

ListView(
  children: <Widget>[
    ListTile(
      title: const Text('我是 title'),
      subtitle: const Text('我是 sub_title'),
      leading: Image.asset(
        'images/c.png',
        fit: BoxFit.cover,
      ),
      trailing: const Icon(
        Icons.chevron_right,
        size: 22,
        color: Colors.grey,
      ),
    ),
  ],
),

2.ListView垂直列表

ListView(
   padding: const EdgeInsets.all(16),
   children: <Widget>[
     Image.network('https://www.itying.com/images/flutter/1.png'),
     Image.network('https://www.itying.com/images/flutter/2.png'),
     Image.network('https://www.itying.com/images/flutter/4.png'),
     Image.network('https://www.itying.com/images/flutter/3.png'),
     Image.network('https://www.itying.com/images/flutter/5.png'),
     Image.network('https://www.itying.com/images/flutter/7.png'),
   ],
 ),

ListView(
          // scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.all(16),
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                color: Colors.red.shade300,
                border: Border.all(color: Colors.grey.shade200),
              ),
              height: 100,
              width: 200,
            ),
            Container(
              decoration: BoxDecoration(
                color: Colors.green.shade300,
                border: Border.all(color: Colors.grey.shade200),
              ),
              height: 100,
              width: 200,
            ),
            Container(
              decoration: BoxDecoration(
                color: Colors.blue.shade300,
                border: Border.all(color: Colors.grey.shade200),
              ),
              height: 100,
              width: 200,
            ),
            Container(
              decoration: BoxDecoration(
                color: Colors.pink.shade200,
                border: Border.all(color: Colors.grey.shade200),
              ),
              height: 100,
              width: 200,
            ),
          ],
        ),

注：ListView的垂直布局中直接加 container ，container 的宽度是自适应宽度的，设置宽度无效！
flutter 之 ListView的使用与详解 map for listview.builder 的使用

3.ListView 水平列表 scrollDirection: Axis.horizontal,

 ListView(
 scrollDirection: Axis.horizontal,
   padding: const EdgeInsets.all(16),
   children: <Widget>[
     Container(
       decoration: BoxDecoration(
         color: Colors.red.shade300,
         border: Border.all(color: Colors.grey.shade200),
       ),
       height: 100,
       width: 200,
     ),
     Container(
       decoration: BoxDecoration(
         color: Colors.green.shade300,
         border: Border.all(color: Colors.grey.shade200),
       ),
       height: 100,
       width: 200,
     ),
     Container(
       decoration: BoxDecoration(
         color: Colors.blue.shade300,
         border: Border.all(color: Colors.grey.shade200),
       ),
       height: 100,
       width: 200,
     ),
     Container(
       decoration: BoxDecoration(
         color: Colors.pink.shade200,
         border: Border.all(color: Colors.grey.shade200),
       ),
       height: 100,
       width: 200,
     ),
   ],
 ),

注：ListView水平布局中直接加 container ，container 的高度是自适应宽度的，设置高度无效！
flutter 之 ListView的使用与详解 map for listview.builder 的使用

SizedBox(
          height: 160,
          child: ListView(
            scrollDirection: Axis.horizontal,
            padding: const EdgeInsets.all(16),
            children: <Widget>[
              Container(
                height: 160,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4),
                ),
                margin: const EdgeInsets.only(right: 8),
                child: Column(
                  children: [
                    SizedBox(
                      height: 100,
                      child: Image.network(
                          'https://www.itying.com/images/flutter/4.png',
                          width: 100,
                          fit: BoxFit.cover),
                    ),
                    const SizedBox(height: 5),
                    const Text('灯塔')
                  ],
                ),
              ),
              Container(
                height: 150,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4),
                ),
                margin: const EdgeInsets.only(right: 8),
                child: Column(
                  children: [
                    SizedBox(
                      height: 100,
                      child: Image.network(
                          'https://www.itying.com/images/flutter/4.png',
                          width: 100,
                          fit: BoxFit.cover),
                    ),
                    const SizedBox(height: 5),
                    const Text('灯塔')
                  ],
                ),
              ),
              Container(
                height: 150,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4),
                ),
                margin: const EdgeInsets.only(right: 8),
                child: Column(
                  children: [
                    SizedBox(
                      height: 100,
                      child: Image.network(
                          'https://www.itying.com/images/flutter/4.png',
                          width: 100,
                          fit: BoxFit.cover),
                    ),
                    const SizedBox(height: 5),
                    const Text('灯塔')
                  ],
                ),
              ),
              Container(
                height: 150,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4),
                ),
                margin: const EdgeInsets.only(right: 8),
                child: Column(
                  children: [
                    SizedBox(
                      height: 100,
                      child: Image.network(
                          'https://www.itying.com/images/flutter/4.png',
                          width: 100,
                          fit: BoxFit.cover),
                    ),
                    const SizedBox(height: 5),
                    const Text('灯塔')
                  ],
                ),
              ),
              Container(
                height: 150,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4),
                ),
                margin: const EdgeInsets.only(right: 8),
                child: Column(
                  children: [
                    SizedBox(
                      height: 100,
                      child: Image.network(
                          'https://www.itying.com/images/flutter/4.png',
                          width: 100,
                          fit: BoxFit.cover),
                    ),
                    const SizedBox(height: 5),
                    const Text('灯塔')
                  ],
                ),
              ),
              Container(
                height: 150,
                margin: const EdgeInsets.only(right: 8),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Column(
                  children: [
                    SizedBox(
                      height: 100,
                      child: Image.network(
                          'https://www.itying.com/images/flutter/4.png',
                          width: 100,
                          fit: BoxFit.cover),
                    ),
                    const SizedBox(height: 5),
                    const Text('灯塔')
                  ],
                ),
              ),
            ],
          ),
        ),

flutter 之 ListView的使用与详解 map for listview.builder 的使用

4.ListView 动态数据处理


class _MyHomePageState extends State<MyHomePage> {
// 自定义方法方法用于遍历动态组件
  List<Widget> _initListData() {
    List<Widget> list = [];
    for (var i = 0; i < 20; i++) {
      list.add(ListTile(
        title: const Text('我是 title'),
        subtitle: const Text('我是 sub_title'),
        leading: Image.asset(
          'images/c.png',
          fit: BoxFit.cover,
        ),
        trailing: const Icon(
          Icons.chevron_right,
          size: 22,
          color: Colors.grey,
        ),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      // 调用方法
      children: _initListData(),
    );
  }
}

flutter 之 ListView的使用与详解 map for listview.builder 的使用

5.Listview 的外部动态数组 for 的使用方法

// news.dart

List newsList = [
  {
    'title': '你所经历的哪些事情让你怀疑这个世界是假的/有 bug 的？',
    'sub_title':
        '这个世界不一定是假的，但我的亲身经历告诉我，肯定不止这一个世界。在我最开始来的那个时空，2019年5月17日已经世界末日了！这个世界不一定是假的，但我的亲身经历告诉我，肯定不止这一个世界。在我最开始来的那个时空，2019年5月17日已经世界末日了！这个世界不一定是假的，但我的亲身经历告诉我，肯定不止这一个世界。',
    'cover': 'https://pica.zhimg.com/v2-a657e5713d0536ad01f301cd47bc4e7c_b.jpg',
  },
  {
    'title': '有什么网站能让你一直收藏？',
    'sub_title':
        '它的每种文件类型都包括多种文件格式，并且每种文件格式转换都支持丰富的设置。它的每种文件类型都包括多种文件格式，并且每种文件格式转换都支持丰富的设置。它的每种文件类型都包括多种文件格式，并且每种文件格式转换都支持丰富的设置。它的每种文件类型都包括多种文件格式，并且每种文件格式转换都支持丰富的设置。它的每种文件类型都包括多种文件格式，并且每种文件格式转换都支持丰富的设置。',
    'cover': 'https://pic4.zhimg.com/v2-16c9bca2a43ca7b55de9ec41a6afa833_b.jpg',
  },
  {
    'title': '穷，可以让一个人卑微成什么样？',
    'sub_title': '我经常在某鱼上挂一些小孩儿穿不下的衣服，基本都很新，或者买来没穿就小了的那种。',
    'cover':
        'https://pic1.zhimg.com/80/v2-b4f760689645df9004219b65b0df8bb8_1440w.webp?source=1940ef5c',
  },
  {
    'title': '所有穿越文生存指南，我只信我军这几本',
    'sub_title': '给大家介绍一下几本神书，不仅世界末日，穿越也能用得上，常备无患~',
    'cover':
        'https://picx.zhimg.com/80/v2-a928de8f3e617dec43e2c561c3a8511a_1440w.webp?source=1940ef5c',
  },
  {
    'title': '光看书名根本感受不到这本书的强大。',
    'sub_title': '实在很难让我把它和这些评价联系在一起。',
    'cover':
        'https://picx.zhimg.com/80/v2-90f3f78f298edbb36f1e7b036c797778_1440w.webp?source=1940ef5c',
  },
  {
    'title': '万一不小心穿越了。',
    'sub_title': '这看进度，八成已经灾后重建，进行到工业革命了吧？',
    'cover':
        'https://picx.zhimg.com/80/v2-8d4a34f102858dc1d77543ae94652014_1440w.webp?source=1940ef5c',
  },
];

引入data 数据，并动态处理数组；

import './res/news.dart';


class _MyHomePageState extends State<MyHomePage> {
// 自定义方法 方法用于遍历动态组件
  List<Widget> _initListData() {
    List<Widget> list = [];
    for (var item in newsList) {
      list.add(
        Padding(
          padding: const EdgeInsets.only(top: 8),
          child: ListTile(
            leading: Image.network(
              item['cover'],
              fit: BoxFit.cover,
              width: 100,
            ),
            title: Text(
              item['title'] ?? '--',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: const TextStyle(
                color: Colors.black87,
                fontSize: 16,
              ),
            ),
            subtitle: Padding(
              padding: const EdgeInsets.only(top: 8),
              child: Text(
                item['sub_title'] ?? '--',
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: const TextStyle(
                  color: Colors.black54,
                  fontSize: 14,
                ),
              ),
            ),
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      // 调用方法
      children: _initListData(),
    );
  }
}

flutter 之 ListView的使用与详解 map for listview.builder 的使用文章来源地址https://www.toymoban.com/news/detail-419576.html

6.Listview 的外部动态数组 map 的使用方法


class _MyHomePageState extends State<MyHomePage> {
  // 自定义方法 方法用于遍历动态组件（一层一层写法）
  List<Widget> _initListData() {
    var list = newsList.map((item) {
      return ListTile(
        title: Text(item['title']),
        leading: Image.network(
          item['cover'],
          width: 100,
          fit: BoxFit.cover,
        ),
      );
    }); // 返回值是 （1，2，3）这种各类型的
    return list.toList();
  }
  // 自定义方法 方法用于遍历动态组件（合并写法）
  List<Widget> _initListData() {
    return newsList.map((item) {
      return ListTile(
        title: Text(item['title']),
        leading: Image.network(
          item['cover'],
          width: 100,
          fit: BoxFit.cover,
        ),
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      // 调用方法 可以this.也可直接去掉不用！
      children: _initListData(),
    );
  }
}

7.Listview.builder 的使用。


class _MyHomePageState extends State<MyHomePage> {
// 自定义方法 方法用于遍历动态组件
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: newsList.length,  // 遍历总数量
      itemBuilder: (context, index) {  // 方法参数是 context 和index 两个参数
        return ListTile(
          leading: Image.network(
            newsList[index]['cover'],
            width: 100,
            fit: BoxFit.cover,
          ),
          title: Text(newsList[index]['title']),
        );
      },
    );
  }
}

到了这里，关于flutter 之 ListView的使用与详解 map for listview.builder 的使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Flutter组件-ListView滑动到指定位置(SingleChildScrollView 实现锚点效果)

    ListView 组件默认内容比较多的时候具有延迟加载的特性。  SingleChildScrollView 不支持基于 Sliver 的延迟实例化模型，也就是使用 SingleChildScrollView  默认没有延迟加载的特性。  SingleChildScrollView 类似于 Android 中的 ScrollView，它只能接收一个子组件，由于默认没  有延迟加载

    2024年02月11日
    浏览(26)
  • Android最常用的控件ListView(详解)

    Android最常用的控件ListView(详解)

           在Android开发中，ListView是一个比较常用的控件。它以列表的形式 展示具体数据内容，并且能够根据数据的长度自适应屏幕显示。     1.布局界面 activity_main.xml 代码：    2.类文件 MainActivity.java 代码：    1.ArrayAdapter适配器 1、ArrayAdapter适用亍数组或数据ArrayList(动态数

    2023年04月09日
    浏览(38)
  • ListView控件的使用

    ListView控件的使用

    ListView是由ListView控件、Adapter适配器、ListView子布局、传入的数据格式、指定Adapter适配器  共5个部分组成 首先，在想要使用ListView控件的地方写上ListView控件  编写ListView的每条的布局，也就是ListView的子布局 这里我写了两个并列的textview，效果如下：  编写传入数据的数据格

    2023年04月18日
    浏览(55)

  • C#中listView控件详细使用方法

    当使用C#中的 ListView 控件时，你可以通过以下详细方法使用它： 在窗体上放置 ListView 控件： 在 Visual Studio 的窗体设计器中，从工具箱中拖动并放置一个 ListView 控件到你的窗体上。 设置 ListView 的属性： View ：设置 ListView 的显示模式。常见的显示模式包括 Details （详细信息）

    2024年02月16日
    浏览(28)
  • 【QT】重写QAbstractLIstModel,使用ListView来显示多列数据

    【QT】重写QAbstractLIstModel,使用ListView来显示多列数据

    qt提供了几个视图来进行信息的列表显示，QListView可以用来显示继承QStractListModel的字符串列表中的字符串，默认的模型里面只包含一列的内容： 这里以qml为例子，先新建一个qml的项目，示例代码如下： 先创建一个列表的只读模型，以QAbstractListModel为基类，最基础的只用实现

    2024年02月12日
    浏览(31)
  • 【Android入门到项目实战--3.4】—— ListView控件的使用

    【Android入门到项目实战--3.4】—— ListView控件的使用

    目录 一、ListView的简单用法 二、进一步优化ListView界面 三、提升ListView的效率（优化） 四、ListView的点击事件 本篇文章主要讲解最常用的控件之一：ListView的使用。         当我们的程序有大量的数据需要展示的时候，可以借助ListView实现。ListView允许用户上下滑动滚动屏

    2024年02月07日
    浏览(36)
  • 【QML】使用 QtQuick2的ListView创建一个列表（一）

    【QML】使用 QtQuick2的ListView创建一个列表（一）

    qtquick2版本和qtquick1版本分别提供了一个ListView组件供使用，两个组件在使用上和属性的提供上还是有比较大的差异的，因为qtquick2是新的，所以就以改版本为基础学习如何使用； 首先，要知道ListView提供了那些属性提供修改，那些是只读，各个属性的类型是啥，这些可用在Q

    2024年02月09日
    浏览(29)
  • Android中SQLite数据库增删改查/使用ListView显示数据库内容(有完整源码)

    Android中SQLite数据库增删改查/使用ListView显示数据库内容(有完整源码)

    android作业笔记 编写SQLite数据库相关操作的代码，实现下图中的功能（第一排按钮布局没有调整屏幕大小适配…不过下面那一排加了 android:layout_weight=“1”） SQLite展示 先上源码：https://gitee.com/meng-fanyang/SQLiteWork 里边有三个分支，对应这不同的写法： master主分支是写的可以说

    2024年02月09日
    浏览(34)
  • 滚动菜单ListView

    滚动菜单ListView

    activity_main.xml         include layout=\\\"@layout/title\\\"/ 引用上章自定义标题栏 MainActivity.java 当String[]中的数据足够的，超出屏幕即可滑动查看

    2024年01月18日
    浏览(29)
  • 滚动菜单+图片ListView

    滚动菜单+图片ListView

    目录 Fruit.java FruitAdapter MainActivity activity_main.xml fruit.xml PNG资源素材请跳转    iconfont-阿里巴巴矢量图标库

    2024年01月20日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包