美文网首页
CustomScrollView高性能滚动

CustomScrollView高性能滚动

作者: 晓函 | 来源:发表于2022-06-23 16:46 被阅读0次

    Sliver的概念

    白话:基于Sliver模型是高性能的,只有出现在可视范围内的组件才够构建,界面外的组件不构建。
    官话:Flutter中提出一个Sliver(中文为“薄片”的意思)概念,如果一个可滚动组件支持Sliver模型,那么该滚动可以将子组件分成好多个“薄片”(Sliver),只有当Sliver出现在视口中时才会去构建它,这种模型也称为“基于Sliver的延迟构建模型”。
    可滚动组件中有很多都支持基于Sliver的延迟构建模型,如ListView、GridView,CustomScrollView但是也有不支持该模型的,如SingleChildScrollView(性能很低,所有UI都会完整的绘制)。

    CustomScrollView

    CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件。它可以包含多种滚动模型。CustomScrollView可以实现把多个彼此独立的可滑动widget组合起来,并且是高性能的。
    CustomScrollView可以控制SliverListView根据需要才构建item,类似与分页加载,复用加载,数据量比较大的时候对提高加载效率非常有帮助。

    CustomScrollView和SingleChildScrollView对比

    CustomScrollView:高性能,懒加载,只构建屏幕可视范围内组件,超出屏幕外的组件等滑动的时候再构建,适用于子widget数据量较大的场景。
    SingleChildScrollView:低性能,完整加载,直接把整个child完整的构建出来,只适用于子widget数量有限的场景。

    实践

    我们用CustomScrollView把“导航栏”和“瀑布流”组合在一起,并且依然保持很好的滚动性能。
    CustomScrollView下使用的listview也必须是基于sliver模型的,如SliverMasonryGrid,SliverListView,SliverGridView,这样CustomScrollView可以计算listview中需要构建的items。非Sliver组件需要用SliverToBoxAdapter包起来。

    伪代码:
    CustomScrollView(slivers:[SliverToBoxAdapter(Container)、SliverListView])
    

    瀑布流Demo如下:

    import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
        //滚动
        Widget page = CustomScrollView(
          slivers: [
              SliverToBoxAdapter(child:Container(color:Colors.red,child:Text("导航栏"))),
              //CustomScrollView是基于Sliver模型,所以需要用SliverMasonryGrid
              SliverMasonryGrid.count.count(
                crossAxisCount: 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                childCount: 500,
                itemBuilder: (context, index) {
                  return Container(color: index%2==0?Colors.blueAccent:Colors.orangeAccent,height: (130+Random().nextInt(150)).w,);
                },
              ),                
          ],
          
        );
        //刷新
        page = RefreshIndicator(child:page,onRefresh:() async{});
          
        return Scaffold(
          body: page,
          appBar: null
        );
    

    实践效果:


    image.png image.png

    相关文章

      网友评论

          本文标题:CustomScrollView高性能滚动

          本文链接:https://www.haomeiwen.com/subject/anqmvrtx.html