文章目录
CustomScrollView简介
CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件。它可以包含多种滚动模型。包括header,footer,CustomScrollView可以实现把多个彼此独立的可滑动widget组合起来。
CustomScrollView 一"码"当先
Widget mCustomScrollView() {
return CustomScrollView(
slivers: [
SliverAppBar(
floating: true,
title: Text('CustomScrollView Demo'),
expandedHeight: 300,
flexibleSpace: Image.network(
"https://img2.baidu.com/it/u=1977503081,1869926726&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
fit: BoxFit.cover,
),
),
SliverList(
delegate: SliverChildListDelegate([
Container(
height: 80,
color: Colors.primaries[0],
),
Container(
height: 80,
color: Colors.primaries[1],
),
Container(
height: 80,
color: Colors.primaries[2],
),
Container(
height: 80,
color: Colors.primaries[3],
),
Container(
height: 80,
color: Colors.primaries[4],
),
])),
SliverAppBar(
pinned: false,
expandedHeight: 250.0,
backgroundColor: Colors.blue,
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
"https://img2.baidu.com/it/u=1977503081,1869926726&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
fit: BoxFit.cover,
),
),
),
],
);
}
效果:
CustomScrollView其实就是一个Sliver的载体,里面添加的子widget都必须是Sliver!!!接下来讲重点介绍Sliver
Sliver的概念
Flutter中提出一个Sliver(中文为“薄片”的意思)概念,如果一个可滚动组件支持Sliver模型,那么该滚动可以将子组件分成好多个“薄片”(Sliver),只有当Sliver出现在视口中时才会去构建它,这种模型也称为“基于Sliver的延迟构建模型”。可滚动组件中有很多都支持基于Sliver的延迟构建模型,如ListView、GridView,但是也有不支持该模
的,如SingleChildScrollView。
SliverList和SliverGrid
SliverList只有一个属性:delegate,类型是SliverChildDelegate。SliverChildDelegate是一个抽象类,不能直接使用。Flutter中定义好了两个继承于SliverChildDelegate的类对象,可以直接用,分别是:SliverChildListDelegate和SliverChildBuilderDelegate。
SliverChildListDelegate
先来看SliverChildListDelegate,声明如下:
SliverChildListDelegate(
this.children, {
..