豕の家

我永远喜爱高桥李依

Flutter  Flutter入门:Scrollable之滚动列表与动态加载
March 8, 2021 / 17:27 / 105 °C

Flutter_Logo

我们常常需要使用到ListView之类的组件来帮助我们完成诸如商品列表、通讯录联系人列表这样的滚动界面,但是这样的场景往往数量有限,成百上千一次获取之后进行加载是可以接受的。然而一旦数量级迅速增大的时候,用ListView获取数据之后再加载滚动条的话可能就比较灾难了。

——所以,我们转向ListView.builder()方法:

ListView.builder(
    itemBuilder:(context,index){
        print('building $index');
        return Container(
            color:Colors.pink[200],
            height:100,
            alignment:Alignment.center,
            child:Text('$index'),
        )
    }
)

这样我们每次滚动的时候,比如说手机屏幕高度一次只能显示十条这样的item,那么Flutter会帮我们加载一个缓冲区(比如说第十一条到十三条),当我们向下滑动,此时屏幕显示第二条到第十一条,那么第十四条就帮我们缓冲好了。而之前的内容(被滑动上去不再显示的部分)就被回收了。(安卓原生开发中就有可回收滚动列表)

缓冲区的大小可以通过builder方法的cacheExtent属性来手动调节,一般情况下可以忽略,Flutter默认的情况已经足够。

理论上像上面这样的列表,只要你一直向下滚动,那么它就会不停的进行这样的动态加载和回收的操作,所以是个“无限”长度的滚动列表,这样就方便我们去获取数量级很大的数据列表了。(当然也可以用builder方法的itemCount属性来限制列表最大的索引数)

在实战中,itemCount还是比较重要的,不会说要超出数据范围来操作。

另外,如果需要给ListView每项之间增加分割线,可以通过ListView.separated()方法设置separatedBuilder来指定divider:

    ...
        
ListView.separated(
    itemCount:1024,
    separatedBuilder:(context,index){
        //只有索引为0的下面的分隔符宽度为4,其它都是默认
    if(index==0){
        return Divider(thickness:4);
    }
    return Divider();
}

itemBuilder:(context,index){
    print('building $index');
}
    ...
)
    ...





© Posted By @shawnt

Comment

称呼:  
邮箱:  
网址: