Flutter（二十三）ListView

构造方法

• 默认构造方法ListView(),一次性把全部item绘制出来，然后展示，适合数据较少的情况。
• ListView.builder(),item显示时才绘制。
• ListView. separated(),在builder基础上添加来分割线。

属性

• Axis scrollDirection = Axis.vertical,//滚动方向 垂直或水平
• bool reverse = false,// 是否直接滚动到尾部
• ScrollController controller,
• bool primary,// 是否使用默认的controller
• ScrollPhysics physics,
• bool shrinkWrap = false,//listview的高度是尽可能大还是包裹住所有item为准。在ScrollView下，必须为true。
• EdgeInsetsGeometry padding,//内边距
• this.itemExtent,// 指定item的高度，比让item自己计算更高效
• bool addAutomaticKeepAlives = true,//超出显示范围后，是否保存item的状态，不GC
• bool addRepaintBoundaries = true,// 超出显示范围后，是否保持绘制状态
• bool addSemanticIndexes = true,//？？？
• double cacheExtent, //指定超出屏幕的固定值，在该值范围内缓存。
• List<Widget> children = const <Widget>[],
• int semanticChildCount,//？？？
• DragStartBehavior dragStartBehavior = DragStartBehavior.start,//？？？

默认构造函数

image.png

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<String> list = <String>[];
    for (var i = 0; i < 150; i++) {
      list.add(i.toString());
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        scrollDirection: Axis.horizontal,// 滚动方向
        itemExtent: 30,// 指定子widget的高度（垂直时）或宽度（水平时）
        cacheExtent: 40,// 在超出边界指定值内，缓存item
        shrinkWrap: true,
        padding: EdgeInsets.all(10),
        children: list
            .map((item) => Text(
          item,
          style: TextStyle(fontSize: 16),
        ))
            .toList(),
        controller: ScrollController(initialScrollOffset: 120,keepScrollOffset: true),
        addSemanticIndexes: true,
        semanticChildCount: 10,
      ),
    );
  }
}

ListView.builder()

• itemCount 总长度
• itemBuilder 构件item的widget，懒加载方式。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<String> list = <String>[];
    for (var i = 0; i < 150; i++) {
      list.add(i.toString());
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        scrollDirection: Axis.vertical,// 滚动方向
        itemExtent: 30,// 指定子widget的高度（垂直时）或宽度（水平时）
        cacheExtent: 40,// 在超出边界指定值内，缓存item
        shrinkWrap: true,
        padding: EdgeInsets.all(10),
        controller: ScrollController(initialScrollOffset: 120,keepScrollOffset: true),
        addSemanticIndexes: true,
        semanticChildCount: 10,
        itemCount: list.length,
        itemBuilder: (BuildContext context,int index){
          print(index.toString());
          return Text(list[index]);
        },
      ),
    );
  }
}

ListView.separated()

• separatorBuilder 构建分割线

image.png

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<String> list = <String>[];
    for (var i = 0; i < 150; i++) {
      list.add(i.toString());
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.separated(
        scrollDirection: Axis.vertical,// 滚动方向
        cacheExtent: 40,// 在超出边界指定值内，缓存item
        shrinkWrap: true,
        padding: EdgeInsets.all(10),
        controller: ScrollController(initialScrollOffset: 120,keepScrollOffset: true),
        addSemanticIndexes: true,
        itemCount: list.length,
        itemBuilder: (BuildContext context,int index){
          print(index.toString());
          return Text(list[index]);
        },
        separatorBuilder: (BuildContext context,int index){
          return Divider(color: Colors.blue,);
        },
      ),
    );
  }
}