Flutter 之 ListView

在 Flutter 中，ListView 可以沿一个方向（垂直或水平方向）来排列其所有子 Widget，常被用于需要展示一组连续视图元素的场景

ListView 构造方法

• ListView：仅适用于列表中含有少量元素的场景
• ListView.build：适用于子 Widget 比较多的场景
• ListView.separated：适用于需要设置分割线的场景

ListView

可以通过设置 children 参数，将所有子 Widget 包含到 listView 中，但这种创建方法要求提前将所有子 Widget 一次性创建好，而不是等到真正需要在屏幕上显示时才创建，即这种方法是导致性能下降。因此，这种方式只适合列表中含有少量元素的场景

class List extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Android小白营"),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(
              Icons.home,
              color: Colors.cyan, // 图标颜色
            ),
            title: Text("首页"),
            selected: true, // 设置状态为选中状态
          ),
          ListTile(
            leading: Icon(
              Icons.add_shopping_cart,
              color: Colors.black54,
            ),
            title: Text("购物车"),
          ),
          ListTile(
            leading: Icon(
              Icons.account_circle,
              color: Colors.black54,
            ),
            title: Text("我的"),
          )
        ],
      ),
    );
  }
}

运行结果如下

ListView.builder

• itemBuilder：列表项的创建方法。当列表滚动到相应位置时，ListView 会调用该方法创建对应的子 Widget
• itemCount：列表项的数目。如果不设置或设置为空，则表示 ListView 为无限列表
• itemExtent：列表项高度。可选参数，但对于定高的列表项元素，建议设置该参数的值（不设置时，ListView 会动态的根据子 Widget 创建完成后的结果，决定自身的视图高度，以及子 Widget 在 ListView 中的相对位置）

class ListBuild extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemBuilder: (context, index) => ListTile(
          leading: Icon(Icons.adb),
          title: Text("下标" + index.toString()),
        ),
        itemExtent: 46, // 列表项高度
        itemCount: 50, //列表项总数，不设置为无限加载
      ),
    );
  }
}

运行结果如下

ListView.separatorBuilder

设置列表项之间的分隔线，可以根据下标设置不同的分隔线

class ListSeparated extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Android小白营"),
      ),
      body: ListView.separated(
        itemBuilder: (context, index) => GestureDetector(
          child: ListTile(
            leading: Icon(Icons.adb),
            title: Text("下标" + index.toString()),
          ),
          onTap: () => Fluttertoast.showToast(msg: index.toString()), // 列表项点击事件
        ),
        separatorBuilder: (BuildContext context, index) {
          Divider divider;
          if (index % 2 == 0) {
            divider = Divider(
              thickness: 1, // 分隔线宽度
              height: 0,
              color: Colors.black12, // 分隔线颜色
            );
          } else {
            divider = Divider(
              thickness: 2,
              height: 0,
              color: Colors.deepOrangeAccent,
            );
          }
          return divider;
        },
        itemCount: 100,
      ),
    );
  }
}

运行效果如下