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
网友评论