Flutter学习笔记（12）--列表组件

- 日理万妓 2021-11-17 08:12 341阅读 0赞

## 如需转载，请注明出处：[Flutter学习笔记（12）--列表组件][Flutter_12_--] ##

在日常的产品项目需求中，经常会有列表展示类的需求，在Android中常用的做法是收集数据源，然后创建列表适配器Adapter，将数据源传递到Adapter中，最终进行列表数据的展示，那么在Flutter中如何处理列表数据呢？

在Flutter中，用ListView来显示列表项，其支持垂直和水平方向展示，通过过一个属性我们就可以控制其方向，列表有以下分类：

1.水平的列表

2.垂直的列表

3.数据量非常大的列表

4.矩阵式的列表

*  ## 垂直列表组件 ##

<table> ListView组件属性及描述 
 <tbody> 
 <tr> 
 <td>属性名</td> 
 <td>类型</td> 
 <td>默认值</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>ScrollDirection</td> 
 <td>Axis</td> 
 <td>Axis.vertical</td> 
 <td>列表的排列方向，Axis.vertical为垂直方向，Axis.horizontal为水平方向</td> 
 </tr> 
 <tr> 
 <td>padding</td> 
 <td>EdgeInsetsGeometry</td> 
 <td>&nbsp;</td> 
 <td>列表内部的空白区域，如果有child的话，child位于padding内部</td> 
 </tr> 
 <tr> 
 <td>reverse</td> 
 <td>bool</td> 
 <td>false</td> 
 <td>组件排列反向</td> 
 </tr> 
 <tr> 
 <td>children</td> 
 <td>List&lt;Widget&gt;</td> 
 <td>&nbsp;</td> 
 <td>列表元素，注意List元素全部为Widget类型</td> 
 </tr> 
 </tbody> 
</table>

示例代码如下：

import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 
 void main() => runApp(DemoApp());
 
 class DemoApp extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'ListView Demo',
 home: new ListViewDemo(),
 );
 }
 }
 
 class ListViewDemo extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new Scaffold(
 appBar: new AppBar(
 title: Text('ListView Dmoe'),
 leading: new Icon(Icons.menu,size: 40,color: Colors.white,),
 actions: <Widget>[
 new IconButton(icon: Icon(Icons.search), onPressed: (){
 Fluttertoast.showToast(msg: '点击了搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM);
 })
 ],
 ),
 body: new ListView(
 // padding: new EdgeInsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding
 padding: new EdgeInsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding
 children: <Widget>[
 //数据源
 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第一条数据'),),
 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第二条数据'),),
 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第三条数据'),),
 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第四条数据'),),
 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第五条数据'),),
 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第六条数据'),),
 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第七条数据'),),
 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第八条数据'),),
 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第九条数据'),),
 ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第十条数据'),),
 ],
 ),
 );
 }
 }

上面就是一个简单了垂直方向的列表，Demo里面我尝试了两种给子元素设置padding的方式，padding属性的会作用在整个ListView上，单个的子元素是没有作用到的。附上一下效果截图：

![1024739-20190728231820240-27622209.jpg][]

*  ## 水平列表组件 ##

示例代码如下：

import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 
 void main() => runApp(DemoApp());
 
 class DemoApp extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'ListView Demo',
 home: new ListViewDemo(),
 );
 }
 }
 
 class ListViewDemo extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new Scaffold(
 appBar: new AppBar(
 title: Text('ListView Dmoe'),
 leading: new Icon(Icons.menu,size: 40,color: Colors.white,),
 actions: <Widget>[
 new IconButton(icon: Icon(Icons.search), onPressed: (){
 Fluttertoast.showToast(msg: '点击了搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM);
 })
 ],
 ),
 body: Container(
 height: 100,
 child: new ListView(
 scrollDirection: Axis.horizontal,
 // padding: new EdgeInsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding
 padding: new EdgeInsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding
 children: <Widget>[
 //数据源
 Container(
 width: 50,
 color: Colors.blue,
 ),
 Container(
 width: 50,
 color: Colors.green,
 ),
 Container(
 width: 50,
 color: Colors.amberAccent,
 ),
 Container(
 width: 50,
 color: Colors.blueGrey,
 ),
 ],
 ),
 ),
 );
 }
 }

效果截图如下：

![1024739-20190728234938632-1998981792.jpg][]

*  ## 长列表组件 ##

当列表的数据非常多时，需要使用长列表，比如淘宝后台的订单列表，手机通讯录等，这些列表项数据很多，长列表也是使用ListView作为基础组件，只不过需要添加一个列表项构造器itemBuilder。Flutter的长列表组件其实相当于Android中的RecyclerView，它会自动为您回收列表元素。在创建ListView.builder时，需要传入两个参数，一个列表的初始长度，一个itemBuilder函数

import 'package:flutter/material.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 
 void main() => runApp(DemoApp());
 
 class DemoApp extends StatelessWidget {
 
 //初始化数据源
 final List<String> items = new List<String>.generate(200, (i)=>"Item $i";
 
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 title: '长列表组件',
 debugShowCheckedModeBanner: false,
 home: new Scaffold(
 appBar: new AppBar(
 title: Text('长列表组件'),
 leading: Icon(Icons.menu,size: 30,color: Colors.white,),
 actions: <Widget>[
 new IconButton(icon: Icon(Icons.search), onPressed: null)
 ],
 ),
 body: new ListView.builder(
 itemCount: items.length,
 　　　　　　//列表构造器
 itemBuilder: (context,index){
 return new ListTile(
 leading: Icon(Icons.add_circle),
 title: new Text('${items[index]}'),
 onTap: (){
 //给每一个item增加点击事件
 Fluttertoast.showToast(
 msg: '${items[index]}'+'被点击了',
 toastLength: Toast.LENGTH_SHORT,
 gravity: ToastGravity.BOTTOM,
 textColor: Colors.white);
 },
 );
 },
 ),
 ),
 );
 }
 }

![1024739-20190729003534304-1361007823.jpg][]

上面的代码，实现了当数据源比较多时的处理办法，而且给每一个item增加了点击事件onTap()。

**下一章节：[Flutter学习笔记（13）--表单组件][Flutter_13_--]**

转载于:https://www.cnblogs.com/upwgh/p/11261682.html

[Flutter_12_--]: https://www.cnblogs.com/upwgh/p/11261682.html
[1024739-20190728231820240-27622209.jpg]: /images/20211116/931b93e9eebc4e8c9d82cf757817cc98.png
[1024739-20190728234938632-1998981792.jpg]: /images/20211116/6a2cbe520d524d0da19e5dbf44180fd4.png
[1024739-20190729003534304-1361007823.jpg]: /images/20211116/3a789f0a98474aa78b5d879c169894d7.png
[Flutter_13_--]: https://www.cnblogs.com/upwgh/p/11241818.html