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

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

　　1.水平的列表

　　2.垂直的列表

　　3.数据量非常大的列表

　　4.矩阵式的列表

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

 

 

 

 

 

 

 

 

 

 

 

示例代码如下：

  1. import 'package:flutter/material.dart';
  2. import 'package:fluttertoast/fluttertoast.dart';
  4. void main() => runApp(DemoApp());
  6. class DemoApp extends StatelessWidget{
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return new MaterialApp(
  10.       title: 'ListView Demo',
  11.       home: new ListViewDemo(),
  12.     );
  13.   }
  14. }
  16. class ListViewDemo extends StatelessWidget {
  17.   @override
  18.   Widget build(BuildContext context) {
  19.     return new Scaffold(
  20.       appBar: new AppBar(
  21.         title: Text('ListView Dmoe'),
  22.         leading: new Icon(Icons.menu,size: 40,color: Colors.white,),
  23.         actions: <Widget>[
  24.           new IconButton(icon: Icon(Icons.search), onPressed: (){
  25.             Fluttertoast.showToast(msg: '点击了搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM);
  26.           })
  27.         ],
  28.       ),
  29.       body: new ListView(
  30. //        padding: new EdgeInsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding
  31.         padding: new EdgeInsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding
  32.         children: <Widget>[
  33.           //数据源
  34.           ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第一条数据'),),
  35.           ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第二条数据'),),
  36.           ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第三条数据'),),
  37.           ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第四条数据'),),
  38.           ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第五条数据'),),
  39.           ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第六条数据'),),
  40.           ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第七条数据'),),
  41.           ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第八条数据'),),
  42.           ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第九条数据'),),
  43.           ListTile(leading: new Icon(Icons.add_circle_outline),title: new Text('第十条数据'),),
  44.         ],
  45.       ),
  46.     );
  47.   }
  48. }

 

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

示例代码如下：

  1. import 'package:flutter/material.dart';
  2. import 'package:fluttertoast/fluttertoast.dart';
  4. void main() => runApp(DemoApp());
  6. class DemoApp extends StatelessWidget{
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return new MaterialApp(
  10.       title: 'ListView Demo',
  11.       home: new ListViewDemo(),
  12.     );
  13.   }
  14. }
  16. class ListViewDemo extends StatelessWidget {
  17.   @override
  18.   Widget build(BuildContext context) {
  19.     return new Scaffold(
  20.       appBar: new AppBar(
  21.         title: Text('ListView Dmoe'),
  22.         leading: new Icon(Icons.menu,size: 40,color: Colors.white,),
  23.         actions: <Widget>[
  24.           new IconButton(icon: Icon(Icons.search), onPressed: (){
  25.             Fluttertoast.showToast(msg: '点击了搜索按钮',toastLength: Toast.LENGTH_LONG,textColor: Colors.white,gravity: ToastGravity.BOTTOM);
  26.           })
  27.         ],
  28.       ),
  29.       body: Container(
  30.         height: 100,
  31.         child: new ListView(
  32.           scrollDirection: Axis.horizontal,
  33. //        padding: new EdgeInsets.symmetric(vertical: 10,horizontal: 10),//给子元素设置水平和垂直方向的padding
  34.           padding: new EdgeInsets.only(left: 10,top: 0,right: 10,bottom: 0),//给子元素设置左、上、右、下的padding
  35.           children: <Widget>[
  36.             //数据源
  37.             Container(
  38.               width: 50,
  39.               color: Colors.blue,
  40.             ),
  41.             Container(
  42.               width: 50,
  43.               color: Colors.green,
  44.             ),
  45.             Container(
  46.               width: 50,
  47.               color: Colors.amberAccent,
  48.             ),
  49.             Container(
  50.               width: 50,
  51.               color: Colors.blueGrey,
  52.             ),
  53.           ],
  54.         ),
  55.       ),
  56.     );
  57.   }
  58. }

 

效果截图如下：

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

  1. import 'package:flutter/material.dart';
  2. import 'package:fluttertoast/fluttertoast.dart';
  4. void main() => runApp(DemoApp());
  6. class DemoApp extends StatelessWidget {
  8.   //初始化数据源
  9.   final List<String> items = new List<String>.generate(200, (i)=>"Item $i";
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return MaterialApp(
  14.       title: '长列表组件',
  15.       debugShowCheckedModeBanner: false,
  16.       home: new Scaffold(
  17.         appBar: new AppBar(
  18.           title: Text('长列表组件'),
  19.           leading: Icon(Icons.menu,size: 30,color: Colors.white,),
  20.           actions: <Widget>[
  21.             new IconButton(icon: Icon(Icons.search), onPressed: null)
  22.           ],
  23.         ),
  24.         body: new ListView.builder(
  25.           itemCount: items.length,
    　　　　　　//列表构造器
  26.           itemBuilder: (context,index){
  27.             return new ListTile(
  28.               leading: Icon(Icons.add_circle),
  29.               title: new Text('${items[index]}'),
  30.               onTap: (){//给每一个item增加点击事件
  31.                 Fluttertoast.showToast(
  32.                   msg: '${items[index]}'+'被点击了',
  33.                   toastLength: Toast.LENGTH_SHORT,
  34.                   gravity: ToastGravity.BOTTOM,
  35.                   textColor: Colors.white);
  36.               },
  37.             );
  38.           },
  39.         ),
  40.       ),
  41.     );
  42.   }
  43. }

 

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

 

下一章节：Flutter学习笔记（13）–表单组件

 

版权声明：本文为upwgh原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/upwgh/p/11261682.html