Flutter 擴展的聯動Tabs

Flutter裏面使用TabBar和TabBarView的時候。若是是二級TabBar，產品說了一個需求：二級TabBar須要是那種聯動的，就是說下面一層的TabBar滑不動了，就滑動上一層的TabBar，不知道這個效果在安卓/IOS裏面叫什麼，搜了下網上也沒看到。

FlutterCandies QQ羣:181398081

目錄

• 聯動的TabBarView

• TabBar色卡指示器ColorTabIndicator

• 控制緩存頁數CacheExtent

聯動的TabBarView

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

1.首先咱們須要獲取到上一層的TabBarView.

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

2. 不能滑動的時候咱們能拿到OverscrollNotification,看這個以前強烈建議去看一下NotificationListener，這個是個好東西，能監聽各類通知。

咱們來到_handleScrollNotification這個方法添加判斷 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是否能滑動

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改變爲offset+拖動overscroll的。這樣效果就完成了。

_ancestor._pageController.position.moveTo(
            _ancestor._pageController.offset +
                overscrollNotification.overscroll);
複製代碼

4.若是上層能夠滑動，咱們須要去掉overscroll的阻尼效果。 首先在增長對OverscrollIndicatorNotification的監聽

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可否滑動

bool _handleGlowNotification(OverscrollIndicatorNotification notification) {
    debugPrint("${notification.depth}++++ ${_ancestor != null}");
    if (notification.depth == 0 &&
        _canlinkeWithAncestorScroll(notification.leading)) {
      notification.disallowGlow();
      return true;
    }
    return false;
  }
複製代碼

產品要的聯動效果就這樣搞定了。。是否是很簡單。。多看源碼仍是有不少好處的。。

TabBar色卡指示器ColorTabIndicator

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

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);
  }
}
複製代碼

控制緩存頁數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緩存頁面的個數，經過重寫了PageView中的Viewport的cacheExtent值來實現。

在ExtendedPageView的build方法中,增長了對Viewport的cacheExtend的設置。

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，若是你有什麼不明白的地方，請告訴我。