Flutter里面使用TabBar和TabBarView的時(shí)候基茵。如果是二級(jí)TabBar崖堤，產(chǎn)品說(shuō)了一個(gè)需求：二級(jí)TabBar需要是那種聯(lián)動(dòng)的，就是說(shuō)下面一層的TabBar滑不動(dòng)了，就滑動(dòng)上一層的TabBar乌昔，不知道這個(gè)效果在安卓/IOS里面叫什么，搜了下網(wǎng)上也沒(méi)看到壤追。
FlutterCandies QQ群:181398081
目錄
聯(lián)動(dòng)的TabBarView
那么我們打開(kāi)flutter\packages\flutter\lib\src\material\tabs.dart,開(kāi)始魔改磕道。
1.首先我們需要獲取到上一層的TabBarView.
Widget build(BuildContext context) {
if (widget.linkWithAncestor) {
_ancestor =
context.ancestorStateOfType(TypeMatcher<_ExtendedTabBarViewState>());
}
- 不能滑動(dòng)的時(shí)候我們能拿到OverscrollNotification,看這個(gè)之前強(qiáng)烈建議去看一下NotificationListener，這個(gè)是個(gè)好東西行冰，能監(jiān)聽(tīng)各種通知溺蕉。
我們來(lái)到_handleScrollNotification這個(gè)方法添加判斷
notification is OverscrollNotification
if (notification is OverscrollNotification && _ancestor != null) {
var overscrollNotification = notification as OverscrollNotification;
if (_canlinkeWithAncestorScroll(overscrollNotification.overscroll < 0)) {
_ancestor._pageController.position.moveTo(
_ancestor._pageController.offset +
overscrollNotification.overscroll);
}
}
并且通過(guò)_canlinkeWithAncestorScroll方法判斷上一層TabBarView是否能滑動(dòng)
bool _canlinkeWithAncestorScroll(bool onLeftEdge) {
//return false;
if (_ancestor == null) return false;
return (onLeftEdge &&
_ancestor._pageController.offset !=
_ancestor._pageController.position.minScrollExtent) ||
((!onLeftEdge &&
_ancestor._pageController.offset !=
_ancestor._pageController.position.maxScrollExtent));
}
3.將上層TabBarView的_pageController改變?yōu)閛ffset+拖動(dòng)overscroll的。這樣效果就完成了悼做。
_ancestor._pageController.position.moveTo(
_ancestor._pageController.offset +
overscrollNotification.overscroll);
4.如果上層可以滑動(dòng)疯特，我們需要去掉overscroll的阻尼效果。
首先在增加對(duì)OverscrollIndicatorNotification的監(jiān)聽(tīng)
return NotificationListener<ScrollNotification>(
onNotification: _handleScrollNotification,
child: NotificationListener<OverscrollIndicatorNotification>(
onNotification: _handleGlowNotification,
child: ExtendedPageView(
controller: _pageController,
physics: widget.physics == null
? _kTabBarViewPhysics
: _kTabBarViewPhysics.applyTo(widget.physics),
children: _children,
),
),
);
判斷是否上層TabBarView能否滑動(dòng)
bool _handleGlowNotification(OverscrollIndicatorNotification notification) {
debugPrint("${notification.depth}++++ ${_ancestor != null}");
if (notification.depth == 0 &&
_canlinkeWithAncestorScroll(notification.leading)) {
notification.disallowGlow();
return true;
}
return false;
}
產(chǎn)品要的聯(lián)動(dòng)效果就這樣搞定了肛走。漓雅。是不是很簡(jiǎn)單。朽色。多看源碼還是有很多好處的邻吞。。
TabBar色卡指示器ColorTabIndicator
這個(gè)是隨手送的功能葫男。抱冷。( ╯□╰ )就是TabBar指示器為一個(gè)色塊，代碼沒(méi)啥好說(shuō)的
class ColorTabIndicator extends Decoration {
ColorTabIndicator(this.color);
/// The color and weight of the horizontal line drawn below the selected tab.
final Color color;
@override
Decoration lerpFrom(Decoration a, double t) {
return super.lerpFrom(a, t);
}
@override
Decoration lerpTo(Decoration b, double t) {
return super.lerpTo(b, t);
}
@override
_ColorPainter createBoxPainter([VoidCallback onChanged]) {
return _ColorPainter(this, onChanged);
}
}
class _ColorPainter extends BoxPainter {
_ColorPainter(this.decoration, VoidCallback onChanged)
: assert(decoration != null),
super(onChanged);
final ColorTabIndicator decoration;
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
assert(configuration != null);
assert(configuration.size != null);
final Rect rect = offset & configuration.size;
final Paint paint = Paint();
paint.color = decoration.color;
canvas.drawRect(rect, paint);
}
}
控制緩存頁(yè)數(shù)CacheExtent
/// cache page count
/// default is 0.
/// if cacheExtent is 1, it has two pages in cache
/// null is infinity, it will cache all pages
final int cacheExtent;
控制TabBarView緩存頁(yè)面的個(gè)數(shù)梢褐，通過(guò)重寫(xiě)了PageView中的Viewport的cacheExtent值來(lái)實(shí)現(xiàn)旺遮。
在ExtendedPageView的build方法中,增加了對(duì)Viewport的cacheExtend的設(shè)置。
child: Scrollable(
axisDirection: axisDirection,
controller: widget.controller,
physics: physics,
viewportBuilder: (BuildContext context, ViewportOffset position) {
if (widget.cacheExtent > 0) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Viewport(
cacheExtent: widget.cacheExtent * constraints.maxWidth,
axisDirection: axisDirection,
offset: position,
slivers: <Widget>[
SliverFillViewport(
viewportFraction: widget.controller.viewportFraction,
delegate: widget.childrenDelegate),
],
);
});
} else {
return Viewport(
cacheExtent: widget.cacheExtent == null ? double.infinity : 0.0,
axisDirection: axisDirection,
offset: position,
slivers: <Widget>[
SliverFillViewport(
viewportFraction: widget.controller.viewportFraction,
delegate: widget.childrenDelegate),
],
);
}
},
),
最后放上 Github extended_tabs盈咳，如果你有什么不明白的地方趣效，請(qǐng)告訴我。
