Flutter Widget 之 ListView

本文主要是Flutter中ListView控件的简单使用说明

说明

---

1. ListView： 可看做是滚动列表， 类似于iOS系统中的TableView,一个非常常用的控件。
2. ListView在主轴方向上可以滚动，在交叉轴上则是填满。
3. ListView有多种构造方式：默认ListView，ListView.builder,ListView.separated,ListView.custom
4. ListView每行可以使用ListTile控件构建，也可以自定义。
5. Divider控件可以用了添加分割线。
   6.可以使用onTap()等来控制点击事件

ListView（）

---

• 默认构造方式，把数据Iterable添加进列表中，然后添加到ListView的children数组中。
• 如果需要添加分割线，可以使用ListTile.divideTiles()。

ListView(children: [
      Divider(height: separatorHeight, color: separatorColor),
      Container(
        height: rowHeight,
        color: rowBackgroundColor,
        child: ListTile(
          title: Text(
            '这是第一行',
            style: TextStyle(fontSize: 14),
          ),
          trailing: Icon(
            Icons.keyboard_arrow_right,
            color: Color(0xff9a9a9a),
          ),
          dense: true,
          onTap: () {
            //这是点击事件
          },
        ),
      ),
      Divider(height: 8, color: Color(0x0)),
      Container(
        height: rowHeight,
        color: rowBackgroundColor,
        child: ListTile(
          title: Text(
            '这是第三行',
            style: TextStyle(fontSize: 14),
          ),
          trailing: Text(
            '末尾（右侧）文字',
            style: TextStyle(color: Color(0xff999999)),
          ),
          dense: true,
        ),
      ),
    ]);
  }

注意：此构建方法会一次性渲染所有items，只建议在item较少时使用，否则会出现卡顿，滑动不流畅的问题。

ListView.builder（）

---

• 设置单个item,懒加载模式，假如有很多行，初始渲染是并不会所有都渲染，而只会渲染特定数量，类似于UITableview的重用机制。

ListView.builder(
          padding: EdgeInsets.only(top: 1),
          itemCount: 3, // item 的个数
          itemBuilder: (context, i) {
            return _buildRow(listData[i]);//可以自定义行
          }),

ListView.separated（）&& ListView.custom（）

---

• ListView.separated类似于ListView.builder，多了分割线参数：separatorBuilder(required，必要参数)，itemCount也改为不要参数（builder中为非必填），分割线的颜色默认为初始themeData配置的颜色，可修改
• ListView.custom类似于ListView.builder，childrenDelegate为必须的参数。