新建项目-8.png
CustomScrollView
构造函数
const CustomScrollView({
Key key,
Axis scrollDirection = Axis.vertical, //滑动的方向
bool reverse = false, //控制 CustomScrollView 里列表项的排列顺序
ScrollController controller, //可以控制 CustomScrollView 滚动的位置
ScrollController 提供以下的几个功能：
1.设置 CustomScrollView 滑动的初始位置
2.可以控制 CustomScrollView 是否存储和恢复滑动的位置
3.可以读取、设置当前滑动的位置
可以继承 ScrollController 实现自定义的功能
当 primary 为 true 时，controller 必须为 null
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
Key center, //放在 CustomScrollView 中间的 子Widget 的 key
double anchor = 0.0, //CustomScrollView 开始滑动的偏移量
如果 anchor 为 0.0，则 CustomScrollView 的 子Widget 从头开始排列
如果 anchor 为 0.5，则 CustomScrollView 的 子Widget 从中间开始排列
如果 anchor 为 1.0，则 CustomScrollView 的 子Widget 从底部开始排列
double cacheExtent,
this.slivers = const <Widget>[],
int semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,//
确定处理拖动开始行为的方式。
如果设置为[DragStartBehavior.start]，则在检测到拖动手势时将开始滚动拖动行为
如果设置为[DragStartBehavior.down]，它将在首次检测到向下事件时开始 可选
})
SliverAppBar
基本和AppBar一样,只是他只能在CustomScrollView中使用,应该很常见,滑动的时候固定appbar,就需要用到他.
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.stretch = false,
this.stretchTriggerOffset = 100.0,
this.onStretchTrigger,
this.shape,
})
大部分和appbar一样,主要说下重要的几个:
pinned
是否将导航栏部分固定在appbar的位置.这个需求在实际中很常用. 看看效果图.
当 pinned = false:
2020-04-13 17.41.58.gif
可以看到appbar并没有固定在最上面,而是根据内容划出了界面.
当 pinned = true :
2020-04-13 17.43.50.gif
这个应该是需求中经常用到的效果了.
floating
当floating = false :
2020-04-13 17.48.02.gif
当floating = true:
2020-04-13 17.51.30.gif
仔细看 ，区别是在列表整体向下滑动时,appbar开始显示的位置不同.
当为false时,向下滑动时,会先降列表内容滑动顶部,然后appbar会跟着列表滑动显示出来.如上图
当为true时,向下滑动时,appbar会先跟着列表滑动显示出来. 然后继续列表的滑动. 如上图
snap
不能单独使用要配合 ****floating 和 ****pinned
stretch
是否展开,默认false,直接看值为true的效果图,就明白了.
2020-04-13 18.05.55.gif
flexibleSpace
可以再里面添加扩展的内容:
flexibleSpace: FlexibleSpaceBar(
title: Text('开学季 Pinned 效果'),
background: Image.network(
"https://goss.cfp.cn/creative/vcg/800/new/VCG211165042753.jpg",
fit: BoxFit.cover,
),
),
flexibleSpace: Row(
children: <Widget>[
Expanded(
child: Image.network('https://goss.cfp.cn/creative/vcg/800/new/VCG211165042753.jpg',fit: BoxFit.cover,),
)
],
),
通过测试发现 **后面不是 FlexibleSpaceBar 的话, stretch = true 无效. **
SliverPadding
和Padding一样.子控件是 sliver 类型...
const SliverPadding({
Key key,
@required this.padding,
Widget sliver,
})
列子:
SliverPadding(
padding: EdgeInsets.only(top: 10),
sliver: SliverToBoxAdapter(
child: Container(
height: 66,
color: Colors.cyanAccent,
),
),
),
![]()
2020-04-13 18.28.54.gif
2020-04-13 18.28.54.gif
上图中在padding中添加了一个背景色为青色的容器widget
SliverToBoxAdapter
const SliverToBoxAdapter({
Key key,
Widget child,
})
里面可以设置不是sliver类型的widget。如上图中的 padding中添加的 container
SliverGrid
const SliverGrid({
Key key,
@required SliverChildDelegate delegate,
@required this.gridDelegate,
})
就两个协议,一个是布局协议一个展示协议.基本和GridView一样.也有count和extext... 不设置个数默认无数个
SliverChildListDelegate 这种方式前提是知道cell个数，比较少，好搭建
SliverChildBuilderDelegate 这种方式，可以根据数组去创建，不知道cell个数
SliverFixedExtentList
const SliverFixedExtentList({
Key key,
@required SliverChildDelegate delegate,
@required this.itemExtent,
}) :
和listview差不多.也是协议 不设置个数默认无数个
例子:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MinePage extends StatefulWidget {
@override
_MinePageState createState() => _MinePageState();
}
class _MinePageState extends State<MinePage> {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
stretch: true,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('开学季'),
background: Image.network(
"https://goss.cfp.cn/creative/vcg/800/new/VCG211165042753.jpg",
fit: BoxFit.cover,
),
),
),
SliverPadding(padding: EdgeInsets.only(top: 10),),
SliverGrid(
//调整间距
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
crossAxisSpacing: 10,
maxCrossAxisExtent: 200,
mainAxisSpacing: 10,
childAspectRatio: 4.0
),
//加载内容
delegate: SliverChildBuilderDelegate(
(context,index) {
return Container( //设置每个item的内容
alignment: Alignment.center,
color: Colors.orangeAccent,
child: Text("$index"),
);
},
childCount: 20, //设置个数
),
),
SliverPadding(padding: EdgeInsets.only(top: 10),),
SliverFixedExtentList(
itemExtent: 50,
//加载内容
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
alignment: Alignment.center,
color: Colors.deepPurpleAccent,
child: Text('$index'),
);
},
//设置显示个数
childCount: 20,
),
)
],
);
}
}
2020-04-13 18.14.54.gif
