姬長信(Redy)

4.5 列表组件

## 4.5 列表组件 列表是前端是最常见的需求。在Flutter中/uff0c用ListView来显示列表项/uff0c支持垂直和水平方向展示/uff0c通过一个属性我们就可以控制其方向/uff0c列表有以下分类/uff1a /u2022水平的列表 /u2022垂直的列表 /u2022数据量非常大的列表 /u2022矩阵式的列表 ### 4.5.1 基础列表组件 基础列表组件为ListView组件/uff0c其常用属性见表4-8。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041837332590) 示例代码如下/uff1a ```objective-c import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = "基础列表示例"; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: Text(title), ), //添加基础列表 body: new ListView( //添加静态数据 children: [ ListTile( //添加图标 leading: Icon(Icons.alarm), //添加文本 title: Text('Alarm'), ), ListTile( leading: Icon(Icons.phone), title: Text('Phone'), ), ListTile( leading: Icon(Icons.airplay), title: Text('Airplay'), ), ListTile( leading: Icon(Icons.airplay), title: Text('Airplay'), ), ListTile( leading: Icon(Icons.airplay), title: Text('Airplay'), ), ListTile( leading: Icon(Icons.airplay), title: Text('Airplay'), ), ListTile( leading: Icon(Icons.alarm), title: Text('Alarm'), ), ListTile( leading: Icon(Icons.alarm), title: Text('Alarm'), ), ListTile( leading: Icon(Icons.alarm), title: Text('Alarm'), ), ListTile( leading: Icon(Icons.alarm), title: Text('Alarm'), ), ListTile( leading: Icon(Icons.alarm), title: Text('Alarm'), ), ], ), ), ); } } ``` 上述示例代码视图展现大致如图4-8所示。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041838218800) ### 4.5.2 水平列表组件 水平列表组件即为水平方向排列的组件/uff0c列表内部元素以水平方向排。把ListView组件的scrollDirection属性设置为Axis.horiozntal即可。 示例代码如下/uff1a ```objective-c import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = "水平列表示例"; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: Text(title), ), body: Container( margin: EdgeInsets.symmetric(vertical: 20.0), height: 200.0, child: ListView( //设置水平方向排列 scrollDirection: Axis.horizontal, //添加子元素 children: [ Container( width: 160.0, color: Colors.lightBlue, ), Container( width: 160.0, color: Colors.amber, ), Container( width: 160.0, color: Colors.green, child: Column( children: [ Text( '水平', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 36.0, ), ), Text( '列表', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 36.0, ), ), Icon(Icons.list), ], ), ), Container( width: 160.0, color: Colors.deepPurpleAccent, ), Container( width: 160.0, color: Colors.black, ), Container( width: 160.0, color: Colors.pinkAccent, ), ], ), ), ), ); } } ``` 上述示例代码视图展现大致如图4-9所示。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041839347801) ### 4.5.3 长列表组件 当列表的数据项非常多时/uff0c需要使用长列表/uff0c比如淘宝后台订单列表、手机通讯录等/uff0c这些列表项数据很多。长列表也是使用ListView作为基础组件/uff0c只不过需要添加一个列表项构造器itemBuilder。 接下来通过一个示例来说明itemBuilder的用法/uff0c代码如下/uff1a ```objective-c import 'package:flutter/material.dart'; void main() => runApp(new MyApp( //使用generate方法产生500条数据 items: new List.generate(500, (i) => "Item $i"), )); class MyApp extends StatelessWidget { //列表数据集 final List items; MyApp({Key key, @required this.items}) : super(key: key); @override Widget build(BuildContext context) { final title = "长列表示例"; return MaterialApp( title: title, home: new Scaffold( appBar: new AppBar( title: new Text(title), ), //使用ListView.builder来构造列表项 body: new ListView.builder( //列表长度 itemCount: items.length, //列表项构造器 itemBuilder: (context,index) { return new ListTile( leading: new Icon(Icons.phone), title: new Text('${items[index]}'), ); }, ), ), ); } } ``` 上述示例代码视图展现大致如图4-10所示。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041843036253) ### 4.5.4 网格列表组件 数据量很大时用矩阵方式排列比较清晰/uff0c此时用网格列表组件/uff0c即为GridView组件/uff0c可以实现多行多列的应用场景。使用GridView创建网格列表有多种方式/uff1a /u2022GridView.count通过单行展示个数创建GridView。 /u2022GridView.extent通过最大宽度创建GridView。 网格列表组件的属性参见表4-9。 接下来/uff0c我们选取GridView.count来创建风格列表/uff0c示例代码如下/uff1a ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041844197206) ```objective-c import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final title = "网格列表示例"; return new MaterialApp( title: title, home: new Scaffold( appBar: new AppBar( title: new Text(title), ), //使用GridView.count构建网格 body: new GridView.count( primary: false, //四周增加一定的空隙 padding: const EdgeInsets.all(20.0), crossAxisSpacing: 30.0, //一行上放三列数据 crossAxisCount: 3, //数据项 五行三列 children: [ const Text('第一行第一列'), const Text('第一行第二列'), const Text('第一行第三列'), const Text('第二行第一列'), const Text('第二行第二列'), const Text('第二行第三列'), const Text('第三行第一列'), const Text('第三行第二列'), const Text('第三行第三列'), const Text('第二行第三列'), const Text('第三行第一列'), const Text('第三行第二列'), const Text('第三行第三列'), const Text('第三行第三列'), const Text('第三行第三列'), ], ), ), ); } } ``` 上述示例代码视图展现大致如图4-11所示。 ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/201909041844586608)