Flutter 之 ListView

在 Flutter 中，ListView 能够沿一个方向（垂直或水平方向）来排列其全部子 Widget，常被用于须要展现一组连续视图元素的场景

ListView 构造方法

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

构造方法名	特色	使用场景
ListView	一次性建立好全部子 Widget	适用于展现少许连续子 Widget 的场景
ListView.build	提供了子 Widget 建立方法，仅在须要展现时才建立	适用于子 Widget 较多，且视觉效果呈现某种规律性的场景
ListView.separated	提供了子 Widget 建立方法，仅在须要展现时才建立，且提供了自定义分割线的功能	适用于子 Widget 较多，且视觉效果呈现某种规律性、每一个子 Widget 之间须要分割线的场景

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,
      ),
    );
  }
}

运行效果以下

本文由博客一文多发平台 OpenWrite 发布！