## 7.3　列表及表格布局 Flutter中列表和表格的布局方式有多种/uff0c本节将介绍这类组件。 ### 7.3.1　ListView ListView布局是一种常用的布局方式/uff0cListView结合ListTitle可以布局出一些复杂的列表界面。 具体示例代码如下/uff1a ```objective-c import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( title: 'ListView布局示例', home: new MyApp(), )); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { List list = [ new ListTile( title: new Text('广州市黄埔大道建中路店',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),), subtitle: new Text('广州市福黄埔大道建中路3号'), leading: new Icon( Icons.fastfood, color: Colors.orange, ), ), new ListTile( title: new Text('广州市白云区机场路白云机场店',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),), subtitle: new Text('广州市白云区机场路T3航站楼'), leading: new Icon( Icons.airplay, color: Colors.blue, ), ), new ListTile( title: new Text('广州市中山大道中山大学附属医院',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),), subtitle: new Text('广州市中山大道45号'), leading: new Icon( Icons.local_hospital, color: Colors.green, ), ), new ListTile( title: new Text('广州市天河区太平洋数码城',style: new TextStyle(fontWeight: FontWeight.w400,fontSize: 18.0),), subtitle: new Text('广州市天河区岗顶太平洋数码城'), leading: new Icon( Icons.computer, color: Colors.deepPurple, ), ), ]; return new Scaffold( appBar: new AppBar( title: new Text('ListView布局示例'), ), body: new Center( child: new ListView( children: list, ), ), ); } } ``` 上述示例代码的视图展现大致如图7-33所示。  ListView还可以实现长文本的滚动效果/uff0c一般可用于页面内容较多的场景。示例代码如下/uff1a ```objective-c import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( title: '滚动布局示例', home: new MyApp(), )); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('滚动布局示例'), ), body:new ListView( children: [ new Center( child: new Text( '/n广州天河区公园', style: new TextStyle( fontSize:30.0, ), ), ), new Center( child: new Text( '天河公园', style: new TextStyle( fontSize: 16.0, ), ), ), new Center( child: new Text( '''天河公园/uff0c是区属综合性公园/uff0c位于广州天河区员村/uff0c西靠天府路/uff0c南连黄埔大道/uff0c北接中山大道/uff0c来往交通十分便利。公园总面积为70.7公顷/uff0c水体面积占10公顷。天河公园以自然生态景观为主要特色/uff0c公园规划为五个功能区/uff1a百花园景区、文体娱乐区、老人活动区、森林休憩区、后勤管理区。 ''', style: new TextStyle( fontSize: 14.0, ), ), ), ], ), ); } } ``` 上述示例代码的视图展现大致如图7-34所示。   ### 7.3.2　GridView GridView布局即为网格布局/uff0c通常用来布局多行多列的情况。接下来编写一个GridView布局的九宫格小例子。具体步骤如下/uff1a 1/uff09在helloworld工程下需要添加9张图片/uff0c具体添加过程请参考7.1.4节Align对齐布局添加步骤。 2/uff09编写GridView九宫格示例代码/uff0c完整的示例代码如下/uff1a ```objective-c import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( title: 'GridView九宫格示例', home: new MyApp(), )); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //使用generate构造图片列表 List _buildGridTitleList(int count) { return new List.generate( count, (int index) => new Container( child: new Image.asset('images/${index + 1}.jpeg'), )); } //渲染GridView Widget buildGrid(){ return new GridView.extent( maxCrossAxisExtent: 150.0,//次轴的宽度 padding: const EdgeInsets.all(4.0),//上下左右内边距 mainAxisSpacing: 4.0,//主轴间隙 crossAxisSpacing: 4.0,//次轴间隙 children: _buildGridTitleList(9),// 添加9个元素 ); } return new Scaffold( appBar: new AppBar( title: new Text('GridView九宫格示例'), ), body: new Center( child: buildGrid(), ), ); } } ``` 上述示例代码的视图展现大致如图7-35所示。  ### 7.3.3　Table 几乎每一个前端技术的布局中都会有一种table布局/uff0c这种组件太常见了/uff0c以至于其表现形式/uff0c完全可以借鉴其他前端技术。表格布局中/uff0c每一行的高度由其内容决定/uff0c每一列的宽度由columnWidths属性单独控制。 Table组件属性见表7-2。  接下来编写一个用于员工基本信息统计的表格。Table表格布局完整的示例代码如下/uff1a ```objective-c import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( title: 'Table表格布局示例', home: new MyApp(), )); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('Table表格布局示例'), ), body: new Center( child: Table( //设置表格有多少列,并且指定列宽 columnWidths: const { 0: FixedColumnWidth(100.0), 1: FixedColumnWidth(40.0), 2: FixedColumnWidth(80.0), 3: FixedColumnWidth(80.0), }, //设置表格边框样式 border: TableBorder.all(color: Colors.black38, width: 2.0, style: BorderStyle.solid), children: const [ //添加第一行数据 TableRow( children: [ Text('姓名'), Text('性别'), Text('年龄'), Text('身高'), ], ), //添加第二行数据 TableRow( children: [ Text('张三'), Text('男'), Text('26'), Text('172'), ], ), //添加第三行数据 TableRow( children: [ Text('李四'), Text('男'), Text('28'), Text('178'), ], ), ], ), ), ); } } ``` 上述示例代码的视图展现大致如图7-36所示。