前言
CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件。它可以包含多种滚动模型,举个例子,假设有一个页面,顶部需要一个GridView,底部需要一个ListView,而要求整个页面的滑动效果是统一的,即它们看起来是一个整体。如果使用GridView+ListView来实现的话,就不能保证一致的滑动效果,因为它们的滚动效果是分离的,所以这时就需要一个"胶水",把这些彼此独立的可滚动组件"粘"起来,而CustomScrollView的功能就相当于“胶水”。
接口描述
const CustomScrollView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
Key center,
double anchor = 0.0,
double cacheExtent,
this.slivers = const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
})
const SliverAppBar({
Key key,
this.leading,
this.automaticallyImplyLeading = true,
this.title,
this.actions,
this.flexibleSpace,
this.bottom,
this.elevation,
this.forceElevated = false,
this.backgroundColor,
this.brightness,
this.iconTheme,
this.actionsIconTheme,
this.textTheme,
this.primary = true,
this.centerTitle,
this.titleSpacing = NavigationToolbar.kMiddleSpacing,
this.expandedHeight,
this.floating = false,
this.pinned = false,
this.snap = false,
this.shape,
})
代码示例
// CustomScrollView
import 'package:flutter/material.dart';
class CustomScrollViewTest extends StatelessWidget{
@override
Widget build(BuildContext context){
// 因为本路由没有使用Scaffold,为了让子级Widget(如Text)使用
// Material Design 默认的样式风格,我们使用Material作为本路由的根。
return Material(
child: CustomScrollView(
slivers: <Widget>[
// 类似AppBar,包括一个导航栏,两者不同之处在于SliverAppBar可以集成到CustomScrollView。
// SliverAppBar可以结合FlexibleSpaceBar实现Material Design中头部伸缩的模型。
SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: const Text('Demo'),
background: Image.asset('assets/images/avatar.png', fit: BoxFit.cover,),
),
),
// 用SliverPadding包裹以给SliverGrid添加补白。SliverGrid是一个两列,宽高比为4的网格,它有20个子组件。
SliverPadding(
padding: const EdgeInsets.all(8.0),
sliver: SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// Grid按两列显示
crossAxisCount: 2,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate((BuildContext context, int index){
// 创建子widget
return Container(
alignment: Alignment.center,
color: Colors.cyan[100*(index%9)],
child: Text('grid item $index'),
);
},
childCount: 20,
),
),
),
// 是一个所有子元素高度都为50像素的列表
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate((BuildContext context, int index){
// 创建列表项
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100*(index%9)],
child: Text('list item $index'),
);
},
// 50个列表项
childCount: 50,
),
)
],
),
);
}
}
总结
- 头部SliverAppBar:SliverAppBar对应AppBar,两者不同之处在于SliverAppBar可以集成到CustomScrollView。SliverAppBar可以结合FlexibleSpaceBar实现Material Design中头部伸缩的模型,具体效果。
- 中间的SliverGrid:它用SliverPadding包裹以给SliverGrid添加补白。SliverGrid是一个两列,宽高比为4的网格,它有20个子组件。
- 底部SliverFixedExtentList:它是一个所有子元素高度都为50像素的列表。