Flutter 的吸顶功能
Flutter 的吸顶功能
解决方案：CustomScrollView+SliverPersistentHeader
例子：
1.CustomScrollView(
controller: scrollController,
slivers: [
SliverToBoxAdapter(
child: _headWidget(context)
),
SliverPersistentHeader(
pinned: true, //是否固定在顶部
floating: true,
delegate: SubSliverAppBarDelegate(
maxHeight: 50,
minHeight: 50,
child:_floatWidget(context))
),
SliverToBoxAdapter(
child: _courseDetailWidget(context),
)
],
);
2.自定义SliverPersistentHeaderDelegate（SliverPersistentHeaderDelegate 为抽象类，需要子类实现）
class SubSliverAppBarDelegate extends SliverPersistentHeaderDelegate {
SubSliverAppBarDelegate({
@required this.minHeight,
@required this.maxHeight,
@required this.child,
});
final double minHeight;
final double maxHeight;
final Widget child;
@override
double get minExtent => minHeight;
@override
double get maxExtent => max(maxHeight, minHeight);
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return new SizedBox.expand(child: child);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return maxHeight != oldDelegate.maxHeight ||
minHeight != oldDelegate.minHeight ||
child != oldDelegate.child;
}
}
3.有嵌套ListView时，设置 shrinkWrap为true
ListView(shrinkWrap: true）
4.ScrollController 控制跳转到指定位置
scrollController.animateTo(
_headKey.currentContext
.findRenderObject()
.paintBounds
.height,
duration: Duration(milliseconds: 300),
curve: Curves.ease);
GlobalKey 动态获取Widget的大小
5.ScrollController 监听滚动的位置
scrollController.addListener(() {
double sliverToBoxAdapterKey = _headKey.currentContext.size.height;
double subListKey = _footKey.currentContext.size.height;
print(scrollController.offset - scroll);
setState(() {
if (!(indicator && scrollController.offset - scroll > 0) &&
!(!indicator && scrollController.offset - scroll < 0))
indicator =
scrollController.offset < sliverToBoxAdapterKey + subListKey
? false
: true;
scroll = scrollController.offset;
});
});
