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

news2024/10/10 2:17:26

在这里插入图片描述

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/190836.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

九龙证券|港股盘中暴涨110%！多股涨停，有色、汽车板块爆发！

九龙证券|港股盘中暴涨110%！多股涨停，有色、汽车板块爆发！

阴历兔年春节后第三个交易日上午&#xff0c;A股首要指数重回涨势&#xff0c;全体走势略显震动胶着。北向资金持续呈现净买入趋势&#xff0c;半响净买入额到达30.61亿元。 港股方面&#xff0c;全体体现也较好&#xff0c;恒生科技指数领涨。港股个股方面亮点纷呈&#xff0c…
阅读更多...
信息安全管理体系认证

信息安全管理体系认证

​ISO信息安全管理体系认证 一、什么是ISO信息安全管理体系认证&#xff1f; ISO是信息安全管理体系认证&#xff0c;是由国际标准化组织&#xff08;ISO&#xff09;采纳英国标准协会BS-2标准后实施的管理体系&#xff0c;成为了“信息安全管理”的国际通用语言&#xff0c;企…
阅读更多...
Unity Shader - Curved World - 类似 地铁跑酷，动物森友会 的世界扭曲效果 - 球形透视

Unity Shader - Curved World - 类似 地铁跑酷，动物森友会 的世界扭曲效果 - 球形透视

我发现莉莉丝的《神觉者》在战斗中也有使用到这个效果&#xff0c;视觉效果提升还是很大的 比如&#xff0c;球形投影前的效果 球形投影后的效果 GIF: ShaderLab cginc 固定 Vector.forward 方向的球形透视 参考&#xff1a; Shader in Unity & Curved world shader …
阅读更多...
Nacos学习：二、配置中心

Nacos学习：二、配置中心

2. 配置中心 配置中心将配置从各应用中剥离出来&#xff0c;对配置进行统一管理&#xff0c;应用自身不需要自己去管理配置。 配置中心的服务流程如下&#xff1a; 1、用户在配置中心更新配置信息。 2、服务A和服务B及时得到配置更新通知&#xff0c;从配置中心获取配置。 …
阅读更多...
uni-app - H5 网站项目接入集成 51LA 网站统计详细教程（提供 51LA.js 官方插件与引入教程）

uni-app - H5 网站项目接入集成 51LA 网站统计详细教程（提供 51LA.js 官方插件与引入教程）

前言 如果您需要 Nuxt.js H5 网站项目的引入方式，请访问：Nuxt.js - 网站项目接入 51LA 网站统计 这个需求不常见，网上几乎没有教程，本文来做最新最好用的引入方案。 本文实现了 uniapp 开发的 H5 网页项目，要求接入 51LA 网站统计 的需求， 跟着本文，简简单单的几个步骤…
阅读更多...
【HTML】有趣的代码合集（附源码）

【HTML】有趣的代码合集（附源码）

文末有源码下载&#xff0c; “窝” 不信你全都看不上 文章目录CSS3 登录表单 个性化登录按钮可爱的CSS3圆盘时钟动画jQuery登录表单CSS3超酷弹出对话框 兼容移动端HTML5翻牌消除小游戏交互式分享按钮 可横向展开HTML5文件上传美化表单 支持拖拽上传纯CSS3加载Loading动画图 12…
阅读更多...
unity怎样让玩家在不同材质上行走具有不同脚步声音效

unity怎样让玩家在不同材质上行走具有不同脚步声音效

问题:玩家在草地,雪地,木板上行走需要不同的脚步声音效,且无论行走还是奔跑,音效都要和脚步动画同步.思路:在动画上添加事件触发脚步声音效,并判断地面的材质然后播放不同的音效.实现:一.判断地面材质第一种情况是在unity内置terrain上行走地面有草地,石地,木地等,需要有不同音…
阅读更多...
【蓝桥杯】历届试题 成绩统计（省赛）Java

【蓝桥杯】历届试题 成绩统计（省赛）Java

【资源限制】 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 【问题描述】 小蓝给学生们组织了一场考试&#xff0c;卷面总分为 100 分&#xff0c;每个学生的得分都是一个 0 到 100 的整数。…
阅读更多...
计算机网络概念:

计算机网络概念:

CDN:全国各地因为距离,加速响应,也因此可以节省带宽成本.DNS:域名解析器OSI七层模型:应用层:类比填写的数据报文表示层:类比浏览器层会话层:类比cookie或者token记录上次信息传输层:所谓的三次握手和四次挥手发生在这一层,进程到进程网络层:类似于ip通过路由器找到另一ip,服务器…
阅读更多...
Web3中文｜元宇宙如何更具包容性？

Web3中文｜元宇宙如何更具包容性？

一旦新技术在发展过程中发生意外&#xff0c;受到最大伤害的往往会是边缘化的群体。 打个比方&#xff0c;自动决定内容访问权限和图像阐释方式的算法实际上受到了种族主义和性别歧视的影响。而拥有多种边缘化身份的人通常面临更大的风险。 这就是为什么当我听到马克扎克伯格…
阅读更多...
Linux系统Shell脚本第六章：文件三剑客之sed

Linux系统Shell脚本第六章：文件三剑客之sed

目录 一、文本三剑客之sed 1、基本用法 2、sed脚本语法及命令 3、sed选项 4、sed的查找替换使用 5、后向引用 6、变量 一、文本三剑客之sed 1、基本用法 sed [选项]... {自身脚本语法};.... [input file...] 举例&#xff1a; seq 5 |sed #生成1-5数字传给sed #该…
阅读更多...
配置python虚拟环境配置【Pycharm为例】 2023年2月1日 14点43分

配置python虚拟环境配置【Pycharm为例】 2023年2月1日 14点43分

文章目录1. 新建一个项目2. 新建文件&#xff0c;创建项目3. 此时文件结构4. 安装环境样例5. 检查当前环境点击【解释器设置】点击同开头设置环境6. 开始安装根目录下有这个文件点击【终端】7. 激活虚拟环境7.1 如果出现以下错误([参考链接](https://blog.csdn.net/e5pool/arti…
阅读更多...
大数据是干什么的，TOOM大数据舆情监测系统数据挖掘

大数据是干什么的，TOOM大数据舆情监测系统数据挖掘

舆情数据挖掘是指从大量的舆情数据中&#xff0c;通过使用数据挖掘、机器学习等技术&#xff0c;对舆情数据进行分析处理&#xff0c;提取有价值的信息&#xff0c;从而得到舆情分析结果。舆情数据挖掘的目的是了解舆论趋势、话题热点、网民情绪等&#xff0c;为决策提供数据支…
阅读更多...
PowerBI实用技巧——利用DATEDIFF实现时间进度百分比

PowerBI实用技巧——利用DATEDIFF实现时间进度百分比

需求概述&#xff1a;根据系统默认时间当年1月~当年12月为一年&#xff08;或指定财年&#xff09;进行时间百分比进度展示。一、默认正常时间进度实现效果&#xff0c;例如现在系统是2023年2月1日&#xff0c;截止当前年时间已经过去了全年的8.49%.1.解决思路&#xff1a;首先…
阅读更多...
【Faster R-CNN】之 backbone 代码精读

【Faster R-CNN】之 backbone 代码精读

1、前言 在上一篇文章 【Faster R-CNN】之 Resize_and_Padding 代码精读 中&#xff0c;我们得到了图像尺寸统一的 batch 了&#xff0c;接下来&#xff0c;就是 feed 到 backbone 中 获取 feature map。 2、backbone 1&#xff09;这里的 backbone 其实就是 迁移学习&#…
阅读更多...
什么是数据治理？

什么是数据治理？

我们这些搞数据治理的人&#xff0c;几乎每天都会说到“数据治理”这个词。但有很多人依然不清楚数据治理的确切含义&#xff0c;也搞不懂数据治理和数据管理的关系。这一节&#xff0c;我们就来认真辨析“数据治理”这个词。首先&#xff0c;我们来看一看国际数据管理协会DAMA…
阅读更多...
C语言学习笔记-条件判断

C语言学习笔记-条件判断

C 判断 判断结构要求程序员指定一个或多个要评估或测试的条件&#xff0c;以及条件为真时要执行的语句&#xff08;必需的&#xff09;和条件为假时要执行的语句&#xff08;可选的&#xff09;。 C 语言把任何非零和非空的值假定为 true&#xff0c;把零或 null 假定为 fals…
阅读更多...
python基础学习2--模块、面向对象编程

python基础学习2--模块、面向对象编程

一、模块 在python中&#xff0c;一个.py文件就称之为一个模块&#xff08;module)。为了避免模块重名冲突&#xff0c;pyton又引入了按目录来组织模块的方法&#xff0c;成为包(package)。 比如mycompany&#xff0c;按照如下目录存放&#xff1a; 引入了包以后&#xff0c;只…
阅读更多...
【JavaGuide面试总结】Spring篇·上

【JavaGuide面试总结】Spring篇·上

【JavaGuide面试总结】Spring篇上1.谈谈自己对于 Spring IoC 的了解2.什么是 Spring Bean&#xff1f;3.将一个类声明为 Bean 的注解有哪些?4.注入 Bean 的注解有哪些&#xff1f;5.Component 和 Bean 的区别是什么&#xff1f;6.Autowired 和 Resource 的区别是什么&#xff…
阅读更多...
私服 Nexus

私服 Nexus

Sonatype公司的一款maven私服产品。 下载地址&#xff1a; https://help.sonatype.com/repomanager3/download 启动命令&#xff1a; nexus.exe /run nexus 访问服务器&#xff08;默认端口&#xff1a;8081&#xff09;&#xff1a; http://localhost:8081 提示信息有密码所在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023