02_Flutter自定義Sliver組件實(shí)現(xiàn)分組列表吸頂效果

一.先上效果圖

二.列表布局實(shí)現(xiàn)

比較簡單，直接上代碼，主要使用CustomScrollView和SliverToBoxAdapter實(shí)現(xiàn)

_buildSection(String title) {return SliverToBoxAdapter(child: RepaintBoundary(child: Container(height: 50,color: Colors.brown,alignment: Alignment.center,child: Text(title),),));
}_buildItem(String title) {return SliverToBoxAdapter(child: RepaintBoundary(child: Container(padding: const EdgeInsets.symmetric(horizontal: 15),height: 70,color: Colors.cyanAccent,alignment: Alignment.centerLeft,child: Text(title),),));
}CustomScrollView(slivers: [_buildSection("蜀漢五虎將"),_buildItem("關(guān)羽"),_buildItem("張飛"),_buildItem("趙云"),_buildItem("馬超"),_buildItem("黃忠"),_buildSection("虎賁雙雄"),_buildItem("許褚"),_buildItem("典韋"),_buildSection("五子良將"),_buildItem("張遼"),_buildItem("樂進(jìn)"),_buildItem("于禁"),_buildItem("張郃"),_buildItem("徐晃"),_buildSection("八虎騎"),_buildItem("夏侯惇"),_buildItem("夏侯淵"),_buildItem("曹仁"),_buildItem("曹純"),_buildItem("曹洪"),_buildItem("曹休"),_buildItem("夏侯尚"),_buildItem("曹真")],
)

三.SliverToBoxAdapter和SliverPersistentHeader

可以使用Flutter提供的SliverPersistentHeader組件實(shí)現(xiàn)，在使用SliverPersistentHeader時要求我們明確指定子控件的高度，不支持吸頂上推效果，使用起來不夠靈活，所以我們參考并結(jié)合SliverToBoxAdapter和SliverPersistentHeader源碼，自己實(shí)現(xiàn)一個自適應(yīng)高度的吸頂Sliver組件，并在此基礎(chǔ)上一步步實(shí)現(xiàn)吸頂上推效果。

• 編寫StickySliverToBoxAdapter類，繼承自SingleChildRenderObjectWidget

class StickySliverToBoxAdapter extends SingleChildRenderObjectWidget {const StickySliverToBoxAdapter({super.key,super.child});@overrideRenderObject createRenderObject(BuildContext context) => _StickyRenderSliverToBoxAdapter();}

SingleChildRenderObjectWidget類要求我們自己實(shí)現(xiàn)createRenderObject方法，返回一個RenderObject對象，而對于一個S liver組件而言，這個RenderObject必須是RenderSilver的子類。

• 編寫_StickyRenderSliverToBoxAdapter，繼承RenderSliverSingleBoxAdapter

class _StickyRenderSliverToBoxAdapter extends RenderSliverSingleBoxAdapter {@overridevoid performLayout() {// TODO: implement performLayout}}

RenderSliverSingleBoxAdapter要求子類實(shí)現(xiàn)performLayout方法，performLayout會對widegt的布局和繪制做控制，實(shí)現(xiàn)吸頂效果的關(guān)鍵就在于performLayout方法的實(shí)現(xiàn)。先依次看下SliverToBoxAdapter和SliverPersistentHeader對應(yīng)RenderObject的performLayout相關(guān)方法的實(shí)現(xiàn)。

• RenderSliverToBoxAdapter#performLayout

@override
void performLayout() {if (child == null) {geometry = SliverGeometry.zero;return;}final SliverConstraints constraints = this.constraints;//擺放子View，并把constraints傳遞給子Viewchild!.layout(constraints.asBoxConstraints(), parentUsesSize: true);//獲取子View在滑動主軸方向的尺寸final double childExtent;switch (constraints.axis) {case Axis.horizontal:childExtent = child!.size.width;case Axis.vertical:childExtent = child!.size.height;}final double paintedChildSize = calculatePaintOffset(constraints, from: 0.0, to: childExtent);final double cacheExtent = calculateCacheOffset(constraints, from: 0.0, to: childExtent);assert(paintedChildSize.isFinite);assert(paintedChildSize >= 0.0);//更新SliverGeometrygeometry = SliverGeometry(scrollExtent: childExtent,paintExtent: paintedChildSize,cacheExtent: cacheExtent,maxPaintExtent: childExtent,hitTestExtent: paintedChildSize,hasVisualOverflow: childExtent > constraints.remainingPaintExtent || constraints.scrollOffset > 0.0,);//更新paintOffset，由滑動偏移量constraints.scrollOffset決定setChildParentData(child!, constraints, geometry!);
}

• RenderSliverFloatingPersistentHeader#performLayout

SliverPersistentHeader的performLayout方法中調(diào)用了updateGeometry方法去更新geometry，而吸頂?shù)年P(guān)鍵就在updateGeometry方法中，也就是paintOrigin的值。constraints.overlap的值代表前一個Sliver和當(dāng)前Sliver被覆蓋部分的高度。

@override
double updateGeometry() {final double minExtent = this.minExtent;final double minAllowedExtent = constraints.remainingPaintExtent > minExtent ?minExtent :constraints.remainingPaintExtent;final double maxExtent = this.maxExtent;final double paintExtent = maxExtent - _effectiveScrollOffset!;final double clampedPaintExtent = clampDouble(paintExtent,minAllowedExtent,constraints.remainingPaintExtent,);final double layoutExtent = maxExtent - constraints.scrollOffset;final double stretchOffset = stretchConfiguration != null ?constraints.overlap.abs() :0.0;geometry = SliverGeometry(scrollExtent: maxExtent,paintOrigin: math.min(constraints.overlap, 0.0),paintExtent: clampedPaintExtent,layoutExtent: clampDouble(layoutExtent, 0.0, clampedPaintExtent),maxPaintExtent: maxExtent + stretchOffset,maxScrollObstructionExtent: minExtent,hasVisualOverflow: true, // Conservatively say we do have overflow to avoid complexity.);return 0.0;
}

四.吸頂效果實(shí)現(xiàn)

直接把上面updateGeometry中設(shè)置SliverGeometry的代碼拷貝到_StickyRenderSliverToBoxAdapter#performLayout實(shí)現(xiàn)中，maxExtent和minExtent這兩個值是由SliverPersistentHeader傳入的SliverPersistentHeaderDelegate對象提供的。這里可以自己去看SliverPersistentHeaderDelegate的源碼，就不多廢話了。我們只需要把maxExtent和minExtent這兩個值都改為子控件在主軸方向的尺寸大小即可。

 _buildSection(String title) {return StickySliverToBoxAdapter(child: RepaintBoundary(child: Container(height: 50,color: Colors.brown,alignment: Alignment.center,child: Text(title),),));}class _StickyRenderSliverToBoxAdapter extends RenderSliverSingleBoxAdapter {@overridevoid performLayout() {if (child == null) {geometry = SliverGeometry.zero;return;}final SliverConstraints constraints = this.constraints;//擺放子View，并把constraints傳遞給子Viewchild!.layout(constraints.asBoxConstraints(), parentUsesSize: true);//獲取子View在滑動主軸方向的尺寸final double childExtent;switch (constraints.axis) {case Axis.horizontal:childExtent = child!.size.width;case Axis.vertical:childExtent = child!.size.height;}final double minExtent = childExtent;final double minAllowedExtent = constraints.remainingPaintExtent > minExtent ?minExtent : constraints.remainingPaintExtent;final double maxExtent = childExtent;final double paintExtent = maxExtent;final double clampedPaintExtent = clampDouble(paintExtent,minAllowedExtent,constraints.remainingPaintExtent,);final double layoutExtent = maxExtent - constraints.scrollOffset;geometry = SliverGeometry(scrollExtent: maxExtent,paintOrigin: min(constraints.overlap, 0.0),paintExtent: clampedPaintExtent,layoutExtent: clampDouble(layoutExtent, 0.0, clampedPaintExtent),maxPaintExtent: maxExtent,maxScrollObstructionExtent: minExtent,hasVisualOverflow: true, // Conservatively say we do have overflow to avoid complexity.);}
}

仔細(xì)看上面的效果，貌似只有第一個Sliver吸頂了，我們把分組item的背景改成透明的，再來看看效果，就知道怎么回事了😄。

可以看到，所有的分組section都已經(jīng)吸頂了，只不過吸頂位置都是0，并且前一個section把后一個section覆蓋了，我們下一步實(shí)現(xiàn)上推功能后，這個問題自熱而然的就解決了。

五.實(shí)現(xiàn)上推效果

如圖，當(dāng)前section與前一個section重合了多少，前一個section就往上移動多少，也就是移動constraints.overlap即可，往下滑動也是同樣的道理。

//查找前一個吸頂?shù)膕ection
RenderSliver? _prev() {if(parent is RenderViewportBase) {RenderSliver? current = this;while(current != null) {current = (parent as RenderViewportBase).childBefore(current);if(current is _StickyRenderSliverToBoxAdapter && current.geometry != null) {return current;}}}return null;
}@override
void performLayout() {if (child == null) {geometry = SliverGeometry.zero;return;}final SliverConstraints constraints = this.constraints;//擺放子View，并把constraints傳遞給子Viewchild!.layout(constraints.asBoxConstraints(), parentUsesSize: true);//獲取子View在滑動主軸方向的尺寸final double childExtent;switch (constraints.axis) {case Axis.horizontal:childExtent = child!.size.width;case Axis.vertical:childExtent = child!.size.height;}final double minExtent = childExtent;final double minAllowedExtent = constraints.remainingPaintExtent > minExtent ?minExtent : constraints.remainingPaintExtent;final double maxExtent = childExtent;final double paintExtent = maxExtent;final double clampedPaintExtent = clampDouble(paintExtent,minAllowedExtent,constraints.remainingPaintExtent,);final double layoutExtent = maxExtent - constraints.scrollOffset;geometry = SliverGeometry(scrollExtent: maxExtent,paintOrigin: min(constraints.overlap, 0.0),paintExtent: clampedPaintExtent,layoutExtent: clampDouble(layoutExtent, 0.0, clampedPaintExtent),maxPaintExtent: maxExtent,maxScrollObstructionExtent: minExtent,hasVisualOverflow: true, // Conservatively say we do have overflow to avoid complexity.);//上推關(guān)鍵代碼: 當(dāng)前吸頂?shù)腟liver被覆蓋了多少，前一個吸頂?shù)腟liver就移動多少RenderSliver? prev = _prev();if(prev != null && constraints.overlap > 0) {setChildParentData(_prev()!, constraints.copyWith(scrollOffset: constraints.overlap), _prev()!.geometry!);}
}

搞定，可以洗洗睡了，嘿嘿。

六.Fixed: 吸頂section點(diǎn)擊事件失效

重寫childMainAxisPosition方法返回0即可

class _StickyRenderSliverToBoxAdapter extends RenderSliverSingleBoxAdapter {...// 必須重寫，否則點(diǎn)擊事件失效。@overridedouble childMainAxisPosition(covariant RenderBox child) => 0.0;}