文章目录
-
- CustomScrollView简介
- CustomScrollView 一"码"当先
- Sliver的概念
- SliverList和SliverGrid
-
- SliverChildListDelegate
- SliverChildBuilderDelegate
- SliverFixedExtentList
- SliverGrid
-
- SliverGridDelegateWithFixedCrossAxisCount
- SliverGridDelegateWithMaxCrossAxisExtent
- SliverAnimatedList
- SliverPersistentHeader
- SliverAppBar
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,
),
),
),
],