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

article/2025/9/26 8:27:47

在这里插入图片描述

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;}@overrideWidget 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;}@overrideWidget 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();}@overrideWidget build(BuildContext context) {return ListView(// 调用方法 可以this.也可直接去掉不用！children: _initListData(),);}
}

7.Listview.builder 的使用。


class _MyHomePageState extends State<MyHomePage> {
// 自定义方法 方法用于遍历动态组件@overrideWidget 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://chatgpt.dhexx.cn/article/GHoQN6yt.shtml

相关文章

android ListView

android ListView

android ListView几个比较特别的属性 由于这两天在做listView的东西&#xff0c;所以整理出来一些我个人认为比较特别的属性&#xff0c;通过设置这样的属性可以做出更加美观的列表 首先是stackFromBottom属性&#xff0c;这只该属性之后你做好的列表就会显示你列表的最下面&am…
阅读更多...
ListView使用总结

ListView使用总结

ListView使用总结 虽然随着RecyclerView的不断普及&#xff0c;相应的资源也越来越多&#xff0c;许多的项目都在使用RecyclerView&#xff0c;但作为他的前辈ListView&#xff0c;加深对ListView的使用有助于我们更好的适应到RecyclerView的使用中。 首先看一下我们实现的效…
阅读更多...
Android有关ListView嵌套ListView的一些问题

Android有关ListView嵌套ListView的一些问题

本人在做评论回复功能的时候&#xff0c;查阅到ListView结合Adapter适配器具有以列表的形式 展示具体数据内容&#xff0c;并且能够根据数据的长度自适应屏幕显示的功能&#xff0c;因此打算在ListView中嵌套ListView完成点击事件后弹出输入框再输入数据后在下方显示回复内容&a…
阅读更多...
ListView详解0

ListView详解0

ListView常用方法总结 1、listview拖动变黑解决方法 在Android中&#xff0c;ListView是最常用的一个控件&#xff0c;在做UI设计的时候&#xff0c;很多人希望能够改变一下它的背景&#xff0c;使他能够符合整体的UI设计&#xff0c;改变背景背很简单只需要准备一张图片然后指…
阅读更多...
C# ListView 的用法

C# ListView 的用法

ListView 是一种多列的列表视图控件&#xff0c;可以用于展示多个数据项及其相关信息。ListView 控件提供了丰富的属性和事件&#xff0c;可以用于实现各种各样的表格视图&#xff0c;包括带有单元格编辑、排序和分组等功能。 下面我们通过几个示例来演示如何使用 ListView 控…
阅读更多...
Qt ListView使用

Qt ListView使用

概述 Qt中ListView加载数据一般有两种方式&#xff0c;一种是直接qml文件中model直接定义并且放置数据&#xff0c;一种是C代码中定义Model&#xff0c;再setContextProperty的方式暴露给qml域。 步骤 &#xff08;1&#xff09;qml界面 import QtQuick 2.0 import QtQui…
阅读更多...
Android控件listview ListView的用法

Android控件listview ListView的用法

在Android开发中&#xff0c;ListView是一个比较常用的控件&#xff0c;它以列表的形式展示数据内容&#xff0c;并且能够根据列表的高度自适应屏幕显示。ListView的样式是由属性决定的&#xff0c;它的常用属性如下所示 android:listSelector 点击后改变背景颜色 android:divi…
阅读更多...
Android之ListView实现

Android之ListView实现

ListView 用来显示多个可滑动项&#xff08;Item&#xff09;列表的ViewGroup。 需要使用Adapter&#xff08;适配器&#xff09;将集合数据和每一个Item所对应的布局动态适配到ListView中显示 显示列表&#xff1a;listView.setAdapter(adapter) Adapter ArrayAdapter&#xf…
阅读更多...
ListView使用方法

ListView使用方法

ListView使用方法总结 - 直接使用ListView组件创建列表 - 通过Activity继承ListActivity创建 - 定制ListView界面 直接使用ListView组件创建列表 通过数组资源文件指定列表项 先在XML布局文件中添加ListView标志&#xff0c;设置好相关属性&#xff1b;在values下创建数组资…
阅读更多...
Android—— ListView 的简单用法及定制ListView界面

Android—— ListView 的简单用法及定制ListView界面

一、ListView的简单用法 2. 训练目标 1) 掌握 ListView 控件的使用 2) 掌握 Adapter 桥梁的作用 实现步骤&#xff1a; 1&#xff09;首先新建一个项目&#xff0c; 并让ADT 自动帮我们创建好活动。然后修改activity_main.xml 中的代码&#xff0c;如下所示&#xff1a; &…
阅读更多...
QT listView学习

QT listView学习

文章目录 listViewdemo说明demo演示model定义委托 QStyledItemDelegate总结 listView listView 对比 tableView 、 treeView来说&#xff0c;最大的不同就是数据结构的不同。treeView是像树一样的层次结构&#xff0c;而listView则就是像链表一样的结构 跟之前的treeView&…
阅读更多...
还在用ListView？

还在用ListView？

还在用Lisview&#xff1f;RecyclerView都已经出来一年多了&#xff01; 想必大家多或多或少的接触过或者了解过RecyclerView&#xff0c;为什么没有用起来&#xff0c;原因大概如下&#xff1f; ListView我用的挺好的&#xff0c;为什么要换RecyclerView&#xff1f;ListView…
阅读更多...
ListView用法

ListView用法

ListView是用于显示数据的&#xff0c;先在窗体中拉一个lisview控件&#xff0c;还有一些新增、修改、删除、查询按钮和文本框&#xff0c;控件名称为listview,按钮为btnInsert,btnUpate,btnDeleteOne,btnDelete,btnSelect,文本框的名称为txtName,txtSex,txtPhone,txtAddress,设…
阅读更多...
ListView的基础用法

ListView的基础用法

最近学到ListView和RecyclerView&#xff0c;感觉有点难理解&#xff0c;于是自己找到了篇文章&#xff0c;感觉写的挺详细的&#xff08;文章链接在文末&#xff09;&#xff0c;然后自己再整理敲了跑了一遍&#xff0c;总结了一下&#xff0c;方便自己以后回头温习。 一个Li…
阅读更多...
Android(14) ArrayAdapter（数组适配器）的三种方法

Android(14) ArrayAdapter（数组适配器）的三种方法

ArrayAdapter数组适配器用于绑定格式单一的数据&#xff0c;数据源可以是集合或者数组 列表视图(ListView)以垂直的形式列出需要显示的列表项。 实现过程&#xff1a;新建适配器->添加数据源到适配器->视图加载适配器 第一种&#xff1a;直接用ListView组件创建 列表…
阅读更多...
Android——列表视图(ListView)

Android——列表视图(ListView)

1、什么是ListView&#xff1f;它可以实现怎样的功能&#xff1f; 列表视图是android中最常用的一种视图组件&#xff0c;它以垂直列表的形式列出需要显示的列表项。手机屏幕空间有限&#xff0c;能显示的内容不多。可以借助ListView来显示更多、更丰富的内容。ListView允许用…
阅读更多...
ListView详细介绍与使用

ListView详细介绍与使用

前言介绍&#xff1a; 关于 ListView 我们大家都应该是非常的熟悉了&#xff0c;在 Android 开发中是经常用到的&#xff0c;今天就再来回顾一下&#xff0c;ListView 的使用方法&#xff0c;和一些需要优化注意的地方&#xff0c;还有日常开发过程中的一些小技巧和经验。 Li…
阅读更多...
Android最常用的控件ListView(详解)

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

一.ListView简介 在Android开发中&#xff0c;ListView是一个比较常用的控件。它以列表的形式 展示具体数据内容&#xff0c;并且能够根据数据的长度自适应屏幕显示。 二.ListView简单用法 代码部分 1.布局界面 activity_main.xml 代码&#xff1a; <?xml version"1…
阅读更多...
ListView的用法

ListView的用法

一、 ListView的使用 <ListView>:用于展示大量数据的一种列表视图,通过上下滑动的方式将屏幕外的数据滚动到屏幕内。 数据无法直接传递给ListView,需要适配器 Adapter:作用是将各种数据以合适的形式展示到View上 实例&#xff1a; Food.java: public class Food {priv…
阅读更多...
Android原生AlertDialog修改标题，内容，按钮颜色，字体大小等

Android原生AlertDialog修改标题，内容，按钮颜色，字体大小等

private void showAlerDialog() {AlertDialog dialog new AlertDialog.Builder(this).setTitle("AlerDialog").setMessage("这是一个AlertDialog").setPositiveButton("确定",null).setNegativeButton("取消",null).create();dialog.…
阅读更多...
推荐文章

Copyright @ 2022~2023