Flutter里面使用TabBar和TabBarView的時(shí)候。如果是二級(jí)TabBar，產(chǎn)品說了一個(gè)需求：二級(jí)TabBar需要是那種聯(lián)動(dòng)的，就是說下面一層的TabBar滑不動(dòng)了，就滑動(dòng)上一層的TabBar，不知道這個(gè)效果在安卓/IOS里面叫什么，搜了下網(wǎng)上也沒看到。

FlutterCandies QQ群:181398081

image

目錄

• 聯(lián)動(dòng)的TabBarView

• TabBar色卡指示器ColorTabIndicator

• 控制緩存頁數(shù)CacheExtent

image

聯(lián)動(dòng)的TabBarView

那么我們打開flutter\packages\flutter\lib\src\material\tabs.dart,開始魔改。

1.首先我們需要獲取到上一層的TabBarView.

 Widget build(BuildContext context) {
    if (widget.linkWithAncestor) {
      _ancestor =
          context.ancestorStateOfType(TypeMatcher<_ExtendedTabBarViewState>());
    }

2. 不能滑動(dòng)的時(shí)候我們能拿到OverscrollNotification,看這個(gè)之前強(qiáng)烈建議去看一下NotificationListener，這個(gè)是個(gè)好東西，能監(jiān)聽各種通知。

我們來到_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);
      }
    }

并且通過_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的阻尼效果。
首先在增加對OverscrollIndicatorNotification的監(jiān)聽

 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)效果就這樣搞定了。。是不是很簡單。。多看源碼還是有很多好處的。。

TabBar色卡指示器ColorTabIndicator

這個(gè)是隨手送的功能。。( ╯□╰ )就是TabBar指示器為一個(gè)色塊，代碼沒啥好說的

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);
  }
}

控制緩存頁數(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緩存頁面的個(gè)數(shù)，通過重寫了PageView中的Viewport的cacheExtent值來實(shí)現(xiàn)。

在ExtendedPageView的build方法中,增加了對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，如果你有什么不明白的地方，請告訴我。

image