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

已于 2023-02-01 16:36:19 修改
阅读量1.3k 收藏
点赞数 3
分类专栏： flutter 文章标签： flutter android
于 2023-02-01 14:30:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_731335498/article/details/128819993
版权

在这里插入图片描述

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 的宽度是自适应宽度的，设置宽度无效！
在这里插入图片描述

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 的高度是自适应宽度的，设置高度无效！
在这里插入图片描述

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('灯塔')
                  ],
                ),
              ),
            ],
          ),
        ),

在这里插入图片描述

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(),
    );
  }
}

在这里插入图片描述

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(),
    );
  }
}

在这里插入图片描述

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']),
        );
      },
    );
  }
}
艾米家的猫儿（傻钢）
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter中ListView 的使用示例
08-27
在这个示例中，我们使用了 ListView.builder 构造函数来创建一个 ListView 控件，并使用了 itemCount 参数来指定列表项的数量。同时，我们使用了 itemBuilder 回调函数来创建每个列表项。 知识点六：Item 的结构 ...
android使用flutter的ListView实现滚动列表的示例代码
08-26
与 ListView.builder 不同的是，ListView.separated 多了一个参数 separatorBuilder，用于控制列表各个元素的间隔如何渲染。 ```dart class ListViewDemo extends StatelessWidget { final _items = List<String>....
Flutter ListView详解
最新发布
2401_84132496的博客
04-17 2117
/设置滑动方向 Axis.horizontal 水平 默认 Axis.vertical 垂直//内间距//是否倒序显示 默认正序 false 倒序true//false，如果内容不足，则用户无法滚动 而如果[primary]为true，它们总是可以尝试滚动。//确定每一个item的高度 会让item加载更加高效//内容适配//item 数量//滑动类型设置//cacheExtent 设置预加载的区域//滑动监听。
Flutter的ListVIew获取并动态展示JSON数据
qq_56688614的博客
04-28 2580
插件配置 dio: ^4.0.4 信息获取——netConfig类 import 'dart:io'; import 'package:dio/dio.dart'; class NetConfig{ static String baseurl="http://localhost:8888/articleList/pageview_article"; //接口地址，与后台交互 static getArticle() async {//异步处理 try{ .
【自学Flutter】20.2 ListView.builder 的使用
技术宅-Nopi的博客
06-29 9131
20.2 ListView.builder 的使用 1.源代码 import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppS...
Flutter列表组件（ListView，GrideView）
m0_46527751的博客
01-11 4801
Flutter列表组件ListView介绍ListView参数列表基本列表垂直列表水平列表动态列表ListView.builder遍历数据生成列表GrideView组件参数说明GrideView.builder遍历数据生成列表 ListView介绍 Flutter 中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下 分类： 1、垂直列表 2、垂直图文列表 3、水平列表 4、动态列表 5、矩阵式列表 ListView参数列表 名称
flutter listview item宽度撑满的问题
qq_38373150的博客
09-29 1933
flutter中使用listView，item的宽度是撑满的，这时候如果想要某个item宽度不充满，可以用center()包裹。
Flutter之ListView
01-08
文章目录资料基础用法ListView 简单堆列ScrollPhysics样式的listView 资料 三、Flutter基础—ListView入门 Flutter ListView 列表进阶 基础用法 import 'package:flutter/cupertino.dart'; import 'package:flutter/...
Flutter PageView+GridView实现菜单横屏滚动
hx20103562的博客
07-08 1794
PageView实现页面横向滑动，GwridView实现单个页面内的菜单展示，横向ListView实现指示器，展示效果如下： 具体实现如下：
Flutter 从入门实践到开发一个APP之UI基础篇
07-26
本课程详细讲解 Flutter 中涉及到的视图组件，通过这门课程的学习使得大家能掌握使用 Flutter 来编写跨平台移动客户端应用中的基本布局视图。 本课程涉及到： * flutter 中 MaterialApp 使用精讲* flutter 中 Scaffold 使用精讲* flutter 中 Text 使用精讲* flutter 中 TextField 使用精讲* flutter 中 button 使用精讲* flutter 中 Row 使用精讲* flutter 中 Column 使用精讲* flutter 中 Container 使用精讲* flutter 中 Stack 使用精讲* flutter 中 Image 使用精讲* flutter 中 Checkbox 使用精讲* flutter 中 Switch 使用精讲* flutter 中 Radio 使用精讲* flutter 中 InkWell 使用精讲* flutter 中 CustomScrollView 使用精讲* flutter 中 ListView 使用精讲* flutter 中 GridView 使用精讲
【Flutter】ListView 列表 ( List 集合的 map 方法说明 垂直列表 水平列表 代码示例 ).zip
08-26
【Flutter】ListView 列表 ( List 集合的 map 方法说明 | 垂直列表 | 水平列表 | 代码示例 ) https://hanshuliang.blog.csdn.net/article/details/119932936 博客源码快照
Flutter教程09——可滚动组件
m0_37073941的博客
03-17 5415
目录 1.可滚动组件介绍 1.1Scrollable 1.2Viewport 1.3Sliver 2.1Scrollbar 2.SingleChildScrollView 1.可滚动组件介绍 Flutter中有两种布局模型：Render的盒模型布局和Sliver按需加载列表布局。 可滚动的组件的子组件一般会很多，如果一次性全部加载会影响性能。为此Flutter提供了Sliver(片段)，Sliver可以包含多个子组件。Sliver作用：按需加载子组件并确定每一个子组件的布局。 F
Flutter 滑动列表组件 ListView&&GridView
卓原的进化之旅
09-05 1万+
前言： 今天就来介绍下Flutter中的列表组件ListView和网格组件GirdView，嗯，果然是Google家的亲儿子，连名字都和Android里的一模一样。 好的吧，我们还是来看下这两个Widget的用法吧 ListView ListView就是我们常见的列表组件，在平时的应用开发中十分的常见，无论你做的是什么类型的应用都会多多少少会用到ListView，所以要好好看下这篇文章...
Flutter——最详细ListView(列表）布局教程
热门推荐
人生在世
12-09 1万+
ListView简介： 列表显示，可容纳多个子组件，可以通过builder、separated、custom等构造。 属性 作用 padding 内边距 controller 列表滚动控制器 itemExtent 每条item的高度 itemCount 列表的总数 separatorBuilder 每条item的分隔符 keyboardDismissBehavior 键盘关闭模式 scrollDirection 滚动方向 创建ListView列表 class
Flutter 列表控件ListView
喻志强的博客
03-01 1万+
Flutter ListView 列表布局在手机上是最最常用的控件了。 Android上的RecycleView尤其的强大。 Flutter中也给我们提供了ListView,不过就目前的体验来看，性能跟原生的ListView或RecycleView比还是有一点差距的。滑动起来还是略卡。 下面我们来看一下ListView的相关知识 继承关系 可以看到，ListView和GridView都继承自Bo...
Flutter入门学习--(9)横向列表组件ListView
游响云停专栏
01-22 7665
  ListView可以纵向显示也可以横向显示，使用scrollDirection属性控制，效果图如下   import 'package:flutter/material.dart'; void main() =&gt; runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root...
flutter简单的listview用法
梨子社区
02-19 149
import 'package:flutter/material.dart'; class TextPage extends StatefulWidget { @override _TextPageState createState() => _TextPageState(); } class _TextPageState extends State<TextPage> { @override Widget build(BuildContext context) { .
flutter学习日记之ListView,网络请求动态更新listview
qq_36767261的博客
08-24 8839
  在Android中通常都会用到listview.那么flutter里面怎么用呢. 在flutter官网文档可以看见对listview介绍: 在Android ListView中，您可以创建一个适配器，然后您可以将它传递给ListView，该适配器将使用适配器返回的内容来展示每一行。 然而，你必须确保在合适的时机回收行，否则，你会得到各种疯狂的视觉和内存问题。 在Flutter中，由于F...
flutter listview.builder
06-28
### 回答1： 好的，以下是Flutter ListView.builder的相关内容： Flutter中的ListView.builder是一种创建可滚动列表的方式。 它是使用基于生成器的方式来创建项目的，这意味着仅当需要显示项目时才会生成它们，这可以显著提高性能。 以下是ListView.builder的基本用法： ```dart ListView.builder( itemCount: items.length, itemBuilder: (BuildContext context, int index) { return ListTile( title: Text(items[index]), ); }, ); ``` 其中，`itemCount`属性指定了列表中的项数，而`itemBuilder`属性是一个回调函数，用于生成每个项目的小部件。 在这个例子中，我们使用了`ListTile`小部件来呈现列表项。`ListTile`是一种内置的小部件，用于创建带有文本和可选图标的项目。 你可以将这些代码放到Flutter应用程序中的任何位置，以创建一个基本的ListView.builder。 ### 回答2： Flutter Listview.Builder是Flutter框架中的一种基于ListView的快速构建方法。ListView是Flutter中的一个常见UI组件，用于在Flutter应用中呈现多个数据垂直或水平列表。ListView.Builder是ListView的一种实现方式，它可以更加灵活地适应不同的应用场景。 使用Flutter Listview.Builder，我们可以使用一组数据来快速构建一个列表视图，而不需要手动添加多个组件。我们可以使用类似于map（）函数的方式来将列表中每个数据项映射到一个组件，然后将这些组件作为列表的items属性传递给ListView.Builder。 与其他构建ListView的方法相比，使用ListView.Builder的好处在于它的效率更高，因为它只会在显示屏幕所需要的数据项上构建组件，而不是在整个列表上构建所有组件。这种构建方式能够显著提高性能和渲染速度。 在实际使用ListView.Builder时，我们需要通过itemCount属性来指定列表的长度，然后在itemBuilder回调函数中构建每个数据项所对应的组件。此外，我们还可以在ListView.Builder中使用其他键来进行更多的自定义，例如控制滚动的控制器、构建分割线、调整列表项之间的间距等等。 总之，Flutter Listview.Builder是一个快速、灵活且高效的构建Flutter列表视图的方法，在应用中使用它可以有效地提高应用渲染性能和响应速度，是一个值得使用的重要UI组件。 ### 回答3： Flutter是一个快速开发高质量、高性能并且可即时部署到iOS和Android平台的跨平台移动应用框架。ListView是Flutter中最基本、最常用的列表组件之一，它可以用来显示任意类型的数据列表，而ListView.builder则是一个快速而且可以高度定制列表的方法。 ListView.builder的工作方式是接受一个itemBuilder回调函数，它可以根据数据源和索引来构建一个可视化的列表项。ListView.builder用于构建动态列表，只会在需要时才会进行渲染，通过比普通ListView更高效地创建长列表来减少资源占用。 该组件有许多属性来控制其外观、交互和动画效果。您可以设置列表项高度、内容填充等，使您的列表在各种设备和屏幕尺寸上看起来完美。除了itemBuilder，还有一些其他属性，如itemCount，用于指定列表项数量；itemExtent，用于指定每个列表项的固定高度等。 总之，ListView.builder是Flutter中非常重要的一个组件，它简化了Flutter中的动态列表的构建和管理。 由于其高效性和易于使用的属性，它已经成为Flutter应用程序中的重要部分。所以我们要熟练掌握该组件以便更有效地构建数据展示列表、列表式的交互体验等功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值