flutter ListView 基础列表组件、水平 列表组件、图标组件

一、Flutter 列表组件概述

// 列表布局在项目开发中是非常常见的，Flutter中的ListView组件提供了创建列表的功能。
// ListView可以轻松地创建垂直和水平的列表，这里有以下几种常见的列表类型：

1. 垂直列表
2. 垂直图文列表
3. 水平列表
4. 动态列表
5. 矩阵式列表

二、Flutter 列表参数

// ListView有多种参数可以进行配置，使得列表更加灵活和高效。
// 这里列举了一些常见的参数及其用途：

scrollDirection: Axis.vertical, // 设置滑动方向。可以是垂直或水平。
padding: EdgeInsets.all(10.0), // 内间距。
reverse: false, // 控制列表是正序还是倒序显示。
primary: true, // 控制当内容不足时，是否允许滚动。
itemExtent: 50.0, // 确定每一个item的高度，有助于提高加载效率。
shrinkWrap: true, // 内容适配。在嵌套的ListView中特别有用。
itemCount: list.length, // item数量。
physics: new ClampingScrollPhysics(), // 滑动类型设置。
cacheExtent: 30.0, // 设置预加载的区域。
// controller, // 滑动监听。

// 以下部分为一些参数的详细说明：
// - shrinkWrap:
//     在ListView中嵌套ListView时推荐使用。这能够使子ListView的高度自适应其内容，防止内容溢出。
// - primary:
//     如果设置为true，则不能使用滑动监听controller。
// - physics:
//     控制滑动的行为，比如是否允许滚动、是否有回弹效果等。
// - cacheExtent:
//     设置预加载的区域大小。如果设置为0.0，表示关闭预加载。

三、Flutter 基本列表

// 使用ListTile可以创建基本的列表项。

ListTile(
    leading: Text('111111111'),
    title: Text('2222'),
    subtitle: Text('222222222222'),
    trailing: Text('33'),
),
Divider(),

四、Flutter 水平列表

// 使用ListView并设置滑动方向为水平，可以创建水平列表。

ListView(
    scrollDirection: Axis.horizontal
)

五、动态列表

// ListView.builder可以根据数据动态创建列表项。

return ListView.builder(
    itemCount: listData.length,
    itemBuilder: (context, index) {
        return ListTile(
            title: Text(listData[index]['title']),
            subtitle: Text(listData[index]['author']),
            leading: Image.network(listData[index]['imageUrl']),
        );
    },
);

// 也可以使用List<Widget>来动态创建一个列表。

List<Widget> getList() {
    List<Widget> list = [];
    for (var i = 0; i < 30; i++) {
        list.add(Text('222'));
    }
    return list;
}
Widget build(BuildContext context) {
    return ListView(
        children: this.getList()
    );
}

// 通过listData的map方法也可以动态生成列表项。

getList() {
    var tempList = listData.map((val) {
        return ListTile(
            title: Text(val['title']),
            subtitle: Text(val['author']),
            leading: Image.network(val['imageUrl']),
        );
    });
    return tempList.toList();
}
Widget build(BuildContext context) {
    return ListView(
        children: this.getList()
    );
}