在 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("我的"), ) ], ), ); } }资源搜索网站大全 http://www.szhdn.com 广州VI设计公司https://www.houdianzi.com
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, ), ); } }