一、Flutter 列表组件概述
列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义
列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下
分类：
1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表
5、矩阵式列表
二、Flutter 列表参数
|
名称
|
类型
|
说明
|
|
scrollDirection
|
Axis
|
Axis.horizontal 水平列表
Axis.vertical 垂直列表
|
|
padding
|
EdgeInsetsGeometry | 内边距 |
|
resolve
|
bool | 组件反向排序 |
|
children
|
List<Widget> | 列表元素 |
三、Flutter 基本列表
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: ListView( children: <Widget>[ ListTile( leading: Icon(Icons.phone), title: Text( "this is list", style: TextStyle(fontSize: 28.0), ), subtitle: Text(‘this is list this is list‘), ), ListTile( title: Text("this is list"), subtitle: Text(‘this is list this is list‘), trailing: Icon(Icons.phone), ), ListTile( title: Text("this is list"), subtitle: Text(‘this is list this is list‘), ), ListTile( title: Text("this is list"), subtitle: Text(‘this is list this is list‘), ), ListTile( title: Text("this is list"), subtitle: Text(‘this is list this is list‘), ) ], ), ); } }
四、Flutter 水平列表
class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { return Container( height: 200.0, margin: EdgeInsets.all(5), child: ListView( scrollDirection: Axis.horizontal, children: <Widget>[ Container( width: 180.0, color: Colors.lightBlue, ), Container( width: 180.0, color: Colors.amber, child: ListView( children: <Widget>[ Image.network( ‘https://resources.ninghao.org/images/childhood-in-a-picture.jpg‘), SizedBox(height: 16.0), Text( ‘这是一个文本信息‘, textAlign: TextAlign.center, style: TextStyle(fontSize: 16.0), ) ], ), ), Container( width: 180.0, color: Colors.deepOrange, ), Container( width: 180.0, color: Colors.deepPurpleAccent, ), ], )); } }
五、Flutter 动态列表（动态循环数据）
import ‘package:flutter/material.dart‘; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text(‘FlutterDemo‘)), body: HomeContent(), )); } } class HomeContent extends StatelessWidget { List list = new List(); HomeContent({Key key}) : super(key: key) { for (var i = 0; i < 20; i++) { list.add("这是第${i}条数据"); } print(list); } @override Widget build(BuildContext context) { return ListView.builder( itemCount: this.list.length, itemBuilder: (context, index) { return ListTile( leading: Icon(Icons.phone), title: Text("${list[index]}"), ); }, ); } }