Flutter 常用组件-5 列表控件

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

• 水平的列表
• 垂直的列表
• 数据量非常大的列表
• 矩阵式的列表

1 基础列表组件

基础列表组件为ListView组件。

常用属性

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

2 水平列表组件

水平列表组件即为水平方向排列的组件，列表内部元素以水平方向排列。把ListView组件的scrollDirection属性设置为Axis.horizontal即可。

3 长列表组件

当列表的数据项非常多时，需要使用长列表，比如淘宝后台订单列表、手机通讯录等，这些列表项数据很多。长列表也是使用ListView作为基础组件，只不过需要添加一个列表项构造器itemBuilder。

4 示例

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('ListView示例'),
        ),
        body:
            //右键-refactor-extract-method/widget

//        new NormalListView(),
//            new HorizontalListView(),
            ListView.builder(
                itemCount: 100,
                itemBuilder: (context, index) {
                  print('$index');
                  if(index.isOdd){
                    return Divider();
                  }
                  return ListTile(
                    leading: Icon(Icons.favorite_border),
                    title: Text('$index号程序员'),
                    subtitle: Text('棒棒的！'),
                    trailing: Icon(Icons.arrow_forward_ios),
                  );
                }),
      ),
    );
  }
}

class HorizontalListView extends StatelessWidget {
  const HorizontalListView({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      //一次性加载所有item
      children: List.generate(100, (index) {
        return Text(
          '$index',
          style: TextStyle(fontSize: 20.0),
        );
      }),
    );
  }
}

class NormalListView extends StatelessWidget {
  const NormalListView({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.favorite_border),
          title: Text('favorite_border'),
          subtitle: Text('favorite_border'),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.favorite_border),
          title: Text('favorite_border'),
          subtitle: Text('favorite_border'),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.favorite_border),
          title: Text('favorite_border'),
          subtitle: Text('favorite_border'),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.favorite_border),
          title: Text('favorite_border'),
          subtitle: Text('favorite_border'),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
      ],
    );
  }
}

           

显示效果：