前言
入坑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全家桶,真香。