flutter学习笔记-listview

一、普通的listview

该构造函数适合于具有少量子元素的列表视图,因为构造列表需要为可能显示在列表视图中的每个子元素执行工作,而不仅仅是那些实际可见的子元素。

ListView({
    
    
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    this.itemExtent,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
    List<Widget> children = const <Widget>[],
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  })

这个构造函数适合于具有少量子元素的列表视图,因为构造列表需要为可能显示在列表视图中的每个子元素执行工作,而不仅仅是那些实际可见的子元素。

Axis scrollDirection = Axis.vertical,//设置滑动方向

bool reverse = false,//是否倒序显示,默认正序

ScrollController controller,//滑动监听,我们多用于上拉加载更多,通过监听滑动的距离来执行操作。

bool primary,//如果[primary]参数为true,则[controller]必须为null。如果内容不足,则用户无法滚动,而如果primary为true,它们总是可以尝试滚动。在构造中默认是false 它的意思就是为主的意思,primary为true时,我们的controller 滑动监听就不能使用了

this.itemExtent,//确定每一个item的高度,会让item加载更加高效

shrinkWrap特别推荐child 高度会适配 item填充的内容的高度,我们非常的不希望child的高度固定,因为这样的话,如果里面的内容超出就会造成布局的溢出。shrinkWrap多用于嵌套listView中 内容大小不确定 比如 垂直布局中 先后放入文字 listView (需要Expend包裹否则无法显示无穷大高度 但是需要确定listview高度 shrinkWrap使用内容适配不会有这样的影响)

physics这个属性几个滑动的选择 
AlwaysScrollableScrollPhysics() 总是可以滑动
NeverScrollableScrollPhysics禁止滚动
BouncingScrollPhysics 内容超过一屏 上拉有回弹效果
ClampingScrollPhysics 包裹内容 不会有回弹

二、 ListView.builder

这个构造函数适合于具有大量子视图的列表视图,因为构建器只对那些实际可见的子视图调用。

ListView.builder({
    
    
    Key key,
    Axis scrollDirection = Axis.vertical,//设置滑动方向
    bool reverse = false,//是否倒序显示,默认正序
    ScrollController controller,//滑动监听,我们多用于上拉加载更多,通过监听滑动的距离来执行操作。
    bool primary,//如果[primary]参数为true,则[controller]必须为null。如果内容不足,则用户无法滚动,而如果primary为true,它们总是可以尝试滚动。在构造中默认是false 它的意思就是为主的意思,primary为true时,我们的controller 滑动监听就不能使用了
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    this.itemExtent,//确定每一个item的高度,会让item加载更加高效
    @required IndexedWidgetBuilder itemBuilder,
    int itemCount,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,//设置预加载的区域
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  })

这个构造函数适合于具有大量(或无限)子视图的列表视图,因为构建器只对那些实际可见的子视图调用。

三、ListView.separated

这个构造函数可以根据需要构造子项之间的分隔符。使用于具有固定数量的子控件的列表视图。

ListView.separated({
    
    
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    @required IndexedWidgetBuilder itemBuilder,
    @required IndexedWidgetBuilder separatorBuilder,
    @required int itemCount,
    bool addAutomaticKeepAlives = true,
    bool addRepaintBoundaries = true,
    bool addSemanticIndexes = true,
    double cacheExtent,
  })

四、ListView.custom

这个构造函数提供了定制子模型的其他方面的能力。例如,SliverChildDelegate可以 控制用于估计实际上不可见的孩子的大小的算法。

ListView.custom({
    
    
    Key key,
    Axis scrollDirection = Axis.vertical,
    bool reverse = false,
    ScrollController controller,
    bool primary,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    EdgeInsetsGeometry padding,
    this.itemExtent,
    @required this.childrenDelegate,
    double cacheExtent,
    int semanticChildCount,
  })

使用举例

 ListView.custom(childrenDelegate: SliverChildBuilderDelegate((BuildContext context, int index) {
    
    
          return Container();
        }, childCount: items.length,findChildIndexCallback: (Key key){
    
    
          final ValueKey valueKey = key;
          final String data = valueKey.value;
          return items.indexOf(data);
        }),),

五、注意事项

在开发项目过程,经常用到listview这个控件,我认为 shrinkWrap这个属性要多注意一下,
这个要根据业务内容来设置,不然容易掉坑里面。这个属性如果设置为true的话,那么这个listview的预加载功能就会失效。

猜你喜欢

转载自blog.csdn.net/hjjdehao/article/details/108682822