Flutter Sliver一輩子之敵 (ScrollView)

前言

入坑Flutter一年了，接觸到Flutter也只是冰山一角，不少東西可能知道是怎麼用的，可是不是很明白其中的原理，俗話說惟有深刻，方能淺出。本系列將對Sliver相關源碼一一進行分析，但願可以觸類旁通，再也不害怕Sliver。

Flutter Sliver一輩子之敵 將有4章，一章比一章勁爆，你將不會懼怕使用Sliver，Sliver將成爲你的一輩子之愛。歡迎加入Flutter Candies QQ羣: 181398081。

• Flutter Sliver一輩子之敵 (ScrollView)
• Flutter Sliver一輩子之敵 (ExtendedList)
• Flutter Sliver一輩子之敵 (WaterfallFlow)
• Flutter Sliver一輩子之敵 (LoadingMoreList)

下面是所有滾動的組件，以及他們的關係

Widget	Build	Viewport
SingleChildScrollView	Scrollable	_SingleChildViewport
ScrollView	Scrollable	ShrinkWrappingViewport/Viewport

Sliver系列繼承於ScrollView

Widget	Extends
CustomScrollView	ScrollView
NestedScrollView	CustomScrollView
ListView/GridView	BoxScrollView => ScrollView

簡單講滾動組件由Scrollable獲取用戶手勢反饋，將滾動反饋和Slivers傳遞給Viewport計算出Sliver的位置。注意Sliver能夠是單孩子(SliverPadding/SliverPersistentHeader/SliverToBoxAdapter等等)也能夠是多孩子(SliverList/SliverGrid)。下面咱們經過分析源碼，探究其中奧祕。

ScrollView

下面爲build方法中的關鍵代碼，這裏是咱們上面說的Scrollable，主要負責用戶手勢監聽反饋。

final Scrollable scrollable = Scrollable(
      dragStartBehavior: dragStartBehavior,
      axisDirection: axisDirection,
      controller: scrollController,
      physics: physics,
      semanticChildCount: semanticChildCount,
      viewportBuilder: (BuildContext context, ViewportOffset offset) {
        return buildViewport(context, offset, axisDirection, slivers);
      },
    );
複製代碼

咱們再看看buildViewport方法

@protected
  Widget buildViewport(
    BuildContext context,
    ViewportOffset offset,
    AxisDirection axisDirection,
    List<Widget> slivers,
  ) {
    if (shrinkWrap) {
      return ShrinkWrappingViewport(
        axisDirection: axisDirection,
        offset: offset,
        slivers: slivers,
      );
    }
    return Viewport(
      axisDirection: axisDirection,
      offset: offset,
      slivers: slivers,
      cacheExtent: cacheExtent,
      center: center,
      anchor: anchor,
    );
  }
複製代碼

根據shrinkWrap的不一樣，分紅了2種Viewport

Scrollable

用於監聽各類用戶手勢並實現滾動，下面爲build方法中的關鍵代碼。

//InheritedWidget組件，爲了共享position數據
    Widget result = _ScrollableScope(
      scrollable: this,
      position: position,
      // TODO(ianh): Having all these global keys is sad.
      child: Listener(
        onPointerSignal: _receivedPointerSignal,
        child: RawGestureDetector(
          key: _gestureDetectorKey,
          gestures: _gestureRecognizers,
          behavior: HitTestBehavior.opaque,
          excludeFromSemantics: widget.excludeFromSemantics,
          child: Semantics(
            explicitChildNodes: !widget.excludeFromSemantics,
            child: IgnorePointer(
              key: _ignorePointerKey,
              ignoring: _shouldIgnorePointer,
              ignoringSemantics: false,
              //經過Listener監聽手勢，將滾動position經過viewportBuilder回調。
              child: widget.viewportBuilder(context, position),
            ),
          ),
        ),
      ),
    );
    
   //這裏能夠看到爲何安卓和ios上面對於滾動越界(overscrolls)時候的操做不同 
   return _configuration.buildViewportChrome(context, result, widget.axisDirection);
複製代碼

安卓和fuchsia上面使用GlowingOverscrollIndicator來顯示滾動不了以後的水波紋效果。

/// Wraps the given widget, which scrolls in the given [AxisDirection].
  ///
  /// For example, on Android, this method wraps the given widget with a
  /// [GlowingOverscrollIndicator] to provide visual feedback when the user
  /// overscrolls.
  Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
    // When modifying this function, consider modifying the implementation in
    // _MaterialScrollBehavior as well.
    switch (getPlatform(context)) {
      case TargetPlatform.iOS:
        return child;
      case TargetPlatform.android:
      case TargetPlatform.fuchsia:
        return GlowingOverscrollIndicator(
          child: child,
          axisDirection: axisDirection,
          color: _kDefaultGlowColor,
        );
    }
    return null;
  }
複製代碼

Viewport

經過只顯示(計算繪製)滾動視圖中的一部份內容來實現滾動可視化設計，大大下降內存消耗。好比ListView可視區域爲666像素，但其列表元素的總高度遠遠超過666像素，但實際上咱們只是關心這個666像素中的元素(固然若是設置了CacheExtent，還要算上這個距離)

在Scrollview中將Scrollable滾動反饋以及Slivers傳遞給了Viewport。Viewport 是一個MultiChildRenderObjectWidget，lei了lei了，這是一個自繪多孩子的組件。直接找到createRenderObject方法，看到返回一個RenderViewport

RenderViewport

重頭戲來了，咱們看看構造參數有哪些。

RenderViewport({
    //主軸方向，默認向下
    AxisDirection axisDirection = AxisDirection.down,
    //縱軸方向，跟主軸方向以及有關係
    @required AxisDirection crossAxisDirection,
    //Scrollable中回調的用戶反饋
    @required ViewportOffset offset,
    //當scrollOffset = 0，第一個child在viewport的位置（0 <= anchor <= 1.0），0.0在leading，1.0在trailing，0.5在中間
    double anchor = 0.0,
    //sliver孩子們
    List<RenderSliver> children,
    //The first child in the [GrowthDirection.forward] growth direction.
    //計算時候的基準，默認爲第一個娃，這個參數估計極少有人使用
    RenderSliver center,
    //緩存區域大小
    double cacheExtent,
    //決定cacheExtent是實際大小仍是根據viewport的百分比
    CacheExtentStyle cacheExtentStyle = CacheExtentStyle.pixel,
  })... {
    addAll(children);
    if (center == null && firstChild != null)
      _center = firstChild;
  }
複製代碼

能夠看到構造中把所有孩子都加進入了，並且若是外部不傳遞center，center默認爲第一個孩子。

劃重點代碼分析

sizedByParent

在Viewport中這個值永遠返回true，

@override
  bool get sizedByParent => true;
複製代碼

來看看這個屬性的解釋。即若是這個值爲true，那麼組件的大小隻跟它的parent告訴它的大小constraints有關係，與它的 child 都無關.

就是說RenderViewport的大小約束是由它的parent告訴它的，跟裏面的Slivers沒有關係。說到這個咱們看一個新手常常錯誤的代碼。

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '測試',
            ),
            ListView.builder(itemBuilder: (context,index){})
          ],
        ),
複製代碼

咱們前面知道ListView最終是一個ScrollView,其中的Viewport在Column當中是沒法知道本身的有效大小的，該代碼的會致使Viewport的高度爲無限大，將會報錯(固然你這裏能夠把shrinkWrap設置爲true，可是這樣會致使ListView的所有元素都被計算，列表將失去滾動，這個咱們後面會講)

繼續看代碼中看到，當sizedByParent爲true的時候調用performResize方法，指定Size只根據constraints。

if (sizedByParent) {
      assert(() {
        _debugDoingThisResize = true;
        return true;
      }());
      try {
        performResize();
        assert(() {
          debugAssertDoesMeetConstraints();
          return true;
        }());
      } catch (e, stack) {
        _debugReportException('performResize', e, stack);
      }
      assert(() {
        _debugDoingThisResize = false;
        return true;
      }());
    }
複製代碼

performResize

看看RenderViewport的performResize中作了什麼。有一大堆assert，就一句話，我不能無限大。最後將本身的size設置爲constraints.biggest。 (size是本身的大小，constraints是parent給的限制)

@override
  void performResize() {
    assert(() {
      if (!constraints.hasBoundedHeight || !constraints.hasBoundedWidth) {
        switch (axis) {
          case Axis.vertical:
            if (!constraints.hasBoundedHeight) {
              throw FlutterError.fromParts(<DiagnosticsNode>[
                ErrorSummary('Vertical viewport was given unbounded height.'),
                ErrorDescription(
                  'Viewports expand in the scrolling direction to fill their container. '
                  'In this case, a vertical viewport was given an unlimited amount of '
                  'vertical space in which to expand. This situation typically happens '
                  'when a scrollable widget is nested inside another scrollable widget.'
                ),
                ErrorHint(
                  'If this widget is always nested in a scrollable widget there '
                  'is no need to use a viewport because there will always be enough '
                  'vertical space for the children. In this case, consider using a '
                  'Column instead. Otherwise, consider using the "shrinkWrap" property '
                  '(or a ShrinkWrappingViewport) to size the height of the viewport '
                  'to the sum of the heights of its children.'
                )
              ]);
            }
            if (!constraints.hasBoundedWidth) {
              throw FlutterError(
                'Vertical viewport was given unbounded width.\n'
                'Viewports expand in the cross axis to fill their container and '
                'constrain their children to match their extent in the cross axis. '
                'In this case, a vertical viewport was given an unlimited amount of '
                'horizontal space in which to expand.'
              );
            }
            break;
          case Axis.horizontal:
            if (!constraints.hasBoundedWidth) {
              throw FlutterError.fromParts(<DiagnosticsNode>[
                ErrorSummary('Horizontal viewport was given unbounded width.'),
                ErrorDescription(
                  'Viewports expand in the scrolling direction to fill their container.'
                  'In this case, a horizontal viewport was given an unlimited amount of '
                  'horizontal space in which to expand. This situation typically happens '
                  'when a scrollable widget is nested inside another scrollable widget.'
                ),
                ErrorHint(
                  'If this widget is always nested in a scrollable widget there '
                  'is no need to use a viewport because there will always be enough '
                  'horizontal space for the children. In this case, consider using a '
                  'Row instead. Otherwise, consider using the "shrinkWrap" property '
                  '(or a ShrinkWrappingViewport) to size the width of the viewport '
                  'to the sum of the widths of its children.'
                )
              ]);
            }
            if (!constraints.hasBoundedHeight) {
              throw FlutterError(
                'Horizontal viewport was given unbounded height.\n'
                'Viewports expand in the cross axis to fill their container and '
                'constrain their children to match their extent in the cross axis. '
                'In this case, a horizontal viewport was given an unlimited amount of '
                'vertical space in which to expand.'
              );
            }
            break;
        }
      }
      return true;
    }());
    size = constraints.biggest;
    // We ignore the return value of applyViewportDimension below because we are
    // going to go through performLayout next regardless.
    switch (axis) {
      case Axis.vertical:
        offset.applyViewportDimension(size.height);
        break;
      case Axis.horizontal:
        offset.applyViewportDimension(size.width);
        break;
    }
  }
複製代碼

performLayout

負責佈局RenderViewport的Children

//從size中獲得主軸和縱軸的大小
    double mainAxisExtent;
    double crossAxisExtent;
    switch (axis) {
      case Axis.vertical:
        mainAxisExtent = size.height;
        crossAxisExtent = size.width;
        break;
      case Axis.horizontal:
        mainAxisExtent = size.width;
        crossAxisExtent = size.height;
        break;
    }

    //若是單Sliver孩子的viewport高度爲100，anchor爲0.5，centerOffsetAdjustment設置爲50.0的話，當scroll offset is 0.0的時候，center會恰好在viewport中間。
    final double centerOffsetAdjustment = center.centerOffsetAdjustment;

    double correction;
    int count = 0;
    do {
      assert(offset.pixels != null);
      correction = _attemptLayout(mainAxisExtent, crossAxisExtent, offset.pixels + centerOffsetAdjustment);
      ///若是不爲0.0的話，是由於child中有須要修正(這個咱們將在後面系列中講到，這裏咱們就簡單認爲在layout child過程當中出現了問題)，咱們須要改變scroll offset以後從新layout chilren。
      if (correction != 0.0) {
        offset.correctBy(correction);
      } else {
        ///告訴Scrollable 最小滾動距離和最大滾動距離
        if (offset.applyContentDimensions(
              math.min(0.0, _minScrollExtent + mainAxisExtent * anchor),
              math.max(0.0, _maxScrollExtent - mainAxisExtent * (1.0 - anchor)),
           ))
          break;
      }
      count += 1;
    } while (count < _maxLayoutCycles);
複製代碼

若是超過最大次數，children仍是layout仍是有問題的話，將警告提示。

下面咱們看看_attemptLayout方法中作了什麼。

double _attemptLayout(double mainAxisExtent, double crossAxisExtent, double correctedOffset) {
    assert(!mainAxisExtent.isNaN);
    assert(mainAxisExtent >= 0.0);
    assert(crossAxisExtent.isFinite);
    assert(crossAxisExtent >= 0.0);
    assert(correctedOffset.isFinite);
    _minScrollExtent = 0.0;
    _maxScrollExtent = 0.0;
    _hasVisualOverflow = false;

    //centerOffset的數值將使用anchor和offset.pixels + centerOffsetAdjustment進行修正。前面有講
    final double centerOffset = mainAxisExtent * anchor - correctedOffset;
    //反向RemainingPaintExtent，就是center以前還有多少距離能夠拿來繪製
    final double reverseDirectionRemainingPaintExtent = centerOffset.clamp(0.0, mainAxisExtent);
    //正向RemainingPaintExtent，就是center以後還有多少距離能夠拿來繪製
    final double forwardDirectionRemainingPaintExtent = (mainAxisExtent - centerOffset).clamp(0.0, mainAxisExtent);

    switch (cacheExtentStyle) {
      case CacheExtentStyle.pixel:
        _calculatedCacheExtent = cacheExtent;
        break;
      case CacheExtentStyle.viewport:
        _calculatedCacheExtent = mainAxisExtent * cacheExtent;
        break;
    }
    ///總的計算區域包含先後2個cacheExtent
    final double fullCacheExtent = mainAxisExtent + 2 * _calculatedCacheExtent;
    ///加上cacheExtent的center位置，跟前面的比就是多了cache
    final double centerCacheOffset = centerOffset + _calculatedCacheExtent;
     //反向RemainingPaintExtent，就是center以前還有多少距離能夠拿來繪製，跟前面的比就是多了cache
    final double reverseDirectionRemainingCacheExtent = centerCacheOffset.clamp(0.0, fullCacheExtent);
     //正向RemainingPaintExtent，就是center以後還有多少距離能夠拿來繪製，跟前面的比就是多了cache
    final double forwardDirectionRemainingCacheExtent = (fullCacheExtent - centerCacheOffset).clamp(0.0, fullCacheExtent);

    final RenderSliver leadingNegativeChild = childBefore(center);
    ///若是在center以前還有child，將向前layout child，計算前面佈局前面的child
    if (leadingNegativeChild != null) {
      // negative scroll offsets
      final double result = layoutChildSequence(
        child: leadingNegativeChild,
        scrollOffset: math.max(mainAxisExtent, centerOffset) - mainAxisExtent,
        overlap: 0.0,
        layoutOffset: forwardDirectionRemainingPaintExtent,
        remainingPaintExtent: reverseDirectionRemainingPaintExtent,
        mainAxisExtent: mainAxisExtent,
        crossAxisExtent: crossAxisExtent,
        growthDirection: GrowthDirection.reverse,
        advance: childBefore,
        remainingCacheExtent: reverseDirectionRemainingCacheExtent,
        cacheOrigin: (mainAxisExtent - centerOffset).clamp(-_calculatedCacheExtent, 0.0),
      );
      if (result != 0.0)
        return -result;
    }

    ///佈局center後面的child
    // positive scroll offsets
    return layoutChildSequence(
      child: center,
      scrollOffset: math.max(0.0, -centerOffset),
      overlap: leadingNegativeChild == null ? math.min(0.0, -centerOffset) : 0.0,
      layoutOffset: centerOffset >= mainAxisExtent ? centerOffset: reverseDirectionRemainingPaintExtent,
      remainingPaintExtent: forwardDirectionRemainingPaintExtent,
      mainAxisExtent: mainAxisExtent,
      crossAxisExtent: crossAxisExtent,
      growthDirection: GrowthDirection.forward,
      advance: childAfter,
      remainingCacheExtent: forwardDirectionRemainingCacheExtent,
      cacheOrigin: centerOffset.clamp(-_calculatedCacheExtent, 0.0),
    );
  }
複製代碼

注意scrollOffset ，在向前和向後layout的時候不同， 一個是 math.max(mainAxisExtent, centerOffset) - mainAxisExtent 一個是 math.max(0.0, -centerOffset) 咱們有說過center實際上是scrolloffset爲0的基準，viewport裏面若是有多個slivers，咱們能夠指定其中一個爲center(默認第一個爲center)，那麼想前滾centerOffset會變大，想後滾centerOffset會變成負數。感受仍是有點抽象，下面給一個栗子，我給第2個sliver增長了key，而且把CustomScrollView的center賦值爲這個key。小聲逼逼，Center這個參數我估計百分之99的人沒有用過，用過的請留言，我看看有多少人知道這個。

CustomScrollView(
        center: key,
        slivers: <Widget>[
        SliverList(),
        SliverGrid(key:key),
複製代碼

運行起來初始centerOffset爲0的時候SliverGrid在初始位置。

向前滾動，能夠看到咱們獲得了逆向的SliverList，從咱們的參數中也能夠驗證到。而offset.pixels（ScollView的滾動位置）固然也爲0.(而不是大家想的SliverList的高度)

再看下layoutChildSequence方法，注意到advance方法，向前其實調用的是childBefore，向後是調用的childAfter

double layoutChildSequence({
    @required RenderSliver child,
    @required double scrollOffset,
    @required double overlap,
    @required double layoutOffset,
    @required double remainingPaintExtent,
    @required double mainAxisExtent,
    @required double crossAxisExtent,
    @required GrowthDirection growthDirection,
    @required RenderSliver advance(RenderSliver child),
    @required double remainingCacheExtent,
    @required double cacheOrigin,
  }) {
    assert(scrollOffset.isFinite);
    assert(scrollOffset >= 0.0);
    final double initialLayoutOffset = layoutOffset;
    final ScrollDirection adjustedUserScrollDirection =
        applyGrowthDirectionToScrollDirection(offset.userScrollDirection, growthDirection);
    assert(adjustedUserScrollDirection != null);
    double maxPaintOffset = layoutOffset + overlap;
    double precedingScrollExtent = 0.0;

    while (child != null) {
      final double sliverScrollOffset = scrollOffset <= 0.0 ? 0.0 : scrollOffset;
      // If the scrollOffset is too small we adjust the paddedOrigin because it
      // doesn't make sense to ask a sliver for content before its scroll
      // offset.
      final double correctedCacheOrigin = math.max(cacheOrigin, -sliverScrollOffset);
      final double cacheExtentCorrection = cacheOrigin - correctedCacheOrigin;

      assert(sliverScrollOffset >= correctedCacheOrigin.abs());
      assert(correctedCacheOrigin <= 0.0);
      assert(sliverScrollOffset >= 0.0);
      assert(cacheExtentCorrection <= 0.0);
      
      //輸入
      child.layout(SliverConstraints(
        axisDirection: axisDirection,
        growthDirection: growthDirection,
        userScrollDirection: adjustedUserScrollDirection,
        scrollOffset: sliverScrollOffset,
        precedingScrollExtent: precedingScrollExtent,
        overlap: maxPaintOffset - layoutOffset,
        remainingPaintExtent: math.max(0.0, remainingPaintExtent - layoutOffset + initialLayoutOffset),
        crossAxisExtent: crossAxisExtent,
        crossAxisDirection: crossAxisDirection,
        viewportMainAxisExtent: mainAxisExtent,
        remainingCacheExtent: math.max(0.0, remainingCacheExtent + cacheExtentCorrection),
        cacheOrigin: correctedCacheOrigin,
      ), parentUsesSize: true);
      //輸出
      final SliverGeometry childLayoutGeometry = child.geometry;
      assert(childLayoutGeometry.debugAssertIsValid());

      // If there is a correction to apply, we'll have to start over.
      if (childLayoutGeometry.scrollOffsetCorrection != null)
        return childLayoutGeometry.scrollOffsetCorrection;

      // We use the child's paint origin in our coordinate system as the
      // layoutOffset we store in the child's parent data.
      final double effectiveLayoutOffset = layoutOffset + childLayoutGeometry.paintOrigin;

      // `effectiveLayoutOffset` becomes meaningless once we moved past the trailing edge
      // because `childLayoutGeometry.layoutExtent` is zero. Using the still increasing
      // 'scrollOffset` to roughly position these invisible slivers in the right order.
      if (childLayoutGeometry.visible || scrollOffset > 0) {
        updateChildLayoutOffset(child, effectiveLayoutOffset, growthDirection);
      } else {
        updateChildLayoutOffset(child, -scrollOffset + initialLayoutOffset, growthDirection);
      }

      //更新最大繪製位置
      maxPaintOffset = math.max(effectiveLayoutOffset + childLayoutGeometry.paintExtent, maxPaintOffset);
      scrollOffset -= childLayoutGeometry.scrollExtent;
      //前一個child的滾動距離
      precedingScrollExtent += childLayoutGeometry.scrollExtent;
      layoutOffset += childLayoutGeometry.layoutExtent;
      if (childLayoutGeometry.cacheExtent != 0.0) {
        remainingCacheExtent -= childLayoutGeometry.cacheExtent - cacheExtentCorrection;
        cacheOrigin = math.min(correctedCacheOrigin + childLayoutGeometry.cacheExtent, 0.0);
      }
      
      // 更新_maxScrollExtent和_minScrollExtent
      // https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/rendering/viewport.dart#L1449
      updateOutOfBandData(growthDirection, childLayoutGeometry);

      // move on to the next child
      // layout下一個child
      child = advance(child);
    }

    // we made it without a correction, whee!
    //完美，所有的children都沒有錯誤
    return 0.0;
  }
複製代碼

SliverConstraints爲layout child的輸入，SliverGeometry爲layout child以後的輸出，layout以後viewport將更新_maxScrollExtent和_minScrollExtent，而後layout下一個sliver。至於child.layout方法裏面內容，咱們將會在下一個章當中講到。

RenderShrinkWrappingViewport

當咱們把shrinkWrap設置爲true的時候，最終的Viewport使用的是RenderShrinkWrappingViewport。那麼咱們看看其中的區別是什麼。 先看看官方對shrinkWrap參數的解釋。設置shrinkWrap爲true，viewport的大小將不是由它的父親而決定，而是由它本身決定。咱們常常碰到由人使用ListView嵌套ListView的狀況， 外面的ListView在layout child的時候須要知道里面ListView的大小，而咱們前面知道ListView中的Viewport的大小是由它parent告訴它的。

parent：hi, child,你有多大，我給你一個無限縱軸大小的限制。

child: hi, parent，我也不知道啊，你不告訴我，個人viewport有多大。那麼我只能將個人所有child都layout出來才知道我總的大小了。那我得換一個viewport了，RenderShrinkWrappingViewport才能知道計算出個人總高度。

因爲ListView的parent沒法告訴它的child ListView的可丈量大小，因此咱們必須設置shrinkWrap爲true，內部使用RenderShrinkWrappingViewport計算。

因爲RenderShrinkWrappingViewport的大小再也不只由parent決定，因此再也不調用performResize方法。那麼咱們來關注下performLayout方法。

performLayout

@override
 void performLayout() {
   if (firstChild == null) {
     switch (axis) {
       case Axis.vertical:
         //若是是豎直，你起碼要告訴我水平最大限制吧？
         assert(constraints.hasBoundedWidth);
         size = Size(constraints.maxWidth, constraints.minHeight);
         break;
          //若是是水平，你起碼要告訴我垂直最大限制吧？
       case Axis.horizontal:
         assert(constraints.hasBoundedHeight);
         size = Size(constraints.minWidth, constraints.maxHeight);
         break;
     }
     offset.applyViewportDimension(0.0);
     _maxScrollExtent = 0.0;
     _shrinkWrapExtent = 0.0;
     _hasVisualOverflow = false;
     offset.applyContentDimensions(0.0, 0.0);
     return;
   }

   double mainAxisExtent;
   double crossAxisExtent;
   switch (axis) {
     case Axis.vertical:
      //若是是豎直，你起碼要告訴我水平最大限制吧？說到這個我想起來了Flutter中爲啥沒有支持水平和垂直都能滾動的容器了。
       assert(constraints.hasBoundedWidth);
       mainAxisExtent = constraints.maxHeight;
       crossAxisExtent = constraints.maxWidth;
       break;
     case Axis.horizontal:
       assert(constraints.hasBoundedHeight);
       //若是是水平，你起碼要告訴我垂直最大限制吧？
       mainAxisExtent = constraints.maxWidth;
       crossAxisExtent = constraints.maxHeight;
       break;
   }

   double correction;
   double effectiveExtent;
   do {
     assert(offset.pixels != null);
     correction = _attemptLayout(mainAxisExtent, crossAxisExtent, offset.pixels);
     if (correction != 0.0) {
       offset.correctBy(correction);
     } else {
       switch (axis) {
         case Axis.vertical:
           effectiveExtent = constraints.constrainHeight(_shrinkWrapExtent);
           break;
         case Axis.horizontal:
           effectiveExtent = constraints.constrainWidth(_shrinkWrapExtent);
           break;
       }
       final bool didAcceptViewportDimension = offset.applyViewportDimension(effectiveExtent);
       final bool didAcceptContentDimension = offset.applyContentDimensions(0.0, math.max(0.0, _maxScrollExtent - effectiveExtent));
       if (didAcceptViewportDimension && didAcceptContentDimension)
         break;
     }
   } while (true);
   switch (axis) {
     case Axis.vertical:
       size = constraints.constrainDimensions(crossAxisExtent, effectiveExtent);
       break;
     case Axis.horizontal:
       size = constraints.constrainDimensions(effectiveExtent, crossAxisExtent);
       break;
   }
 }
複製代碼

_maxScrollExtent和 _shrinkWrapExtent都是關鍵先生。當mainAxisExtent不爲double.Infinity(無限大)的時候，其實效果跟Viewport裏面計算(除掉Center相關)是同樣; 當mainAxisExtent爲double.Infinity(無限大)，咱們將會將所有的child都layout出來得到總的大小

關鍵代碼

@override
 void updateOutOfBandData(GrowthDirection growthDirection, SliverGeometry childLayoutGeometry) {
   assert(growthDirection == GrowthDirection.forward);
   _maxScrollExtent += childLayoutGeometry.scrollExtent;
   if (childLayoutGeometry.hasVisualOverflow)
     _hasVisualOverflow = true;
   _shrinkWrapExtent += childLayoutGeometry.maxPaintExtent;
 }
複製代碼

這裏也就是爲啥咱們以前說Column裏面或者ListView放ListView(子)，ListView(子)會所有元素都build，而且失去滾動的緣由。

劇透

這一章看起來有些枯燥，都是源碼分析。下一章(Flutter Sliver一輩子之敵 (ExtendedList))，咱們將順着ListView/GridView=> SliverList/SliverGrid => RenderSliverList/RenderSliverGrid的感情線，瞭解最終Sliver是怎麼將children繪製出來的。下一章將不僅是枯燥的源碼分析，咱們將舉一反N，告訴你如何**處理圖片列表內存爆炸閃退**，將告訴你列表元素特殊的layout方式等等。

結語

ExtendedList WaterfallFlow 和 LoadingMoreList 都是能夠食用的狀態。等不及的小夥伴能夠提早食用，特別是圖片列表內存過大而致使閃退的小夥伴能夠先看demo,先解決掉一直折磨你們的問題

歡迎加入Flutter Candies，一塊兒生產可愛的Flutter小糖果( QQ羣:181398081)

最最後放上Flutter Candies全家桶，真香。