開始

在Android中我們要實(shí)現(xiàn)一個(gè)布局需要繼承ViewGroup, 重寫其中的onLayout和onMeasure方法. 其中onLayout負(fù)責(zé)給子控件設(shè)置布局區(qū)域, onMeaseure度量子控件大小和自身大小. 今天我們就研究下Flutter是如何實(shí)現(xiàn)布局的.

Flutter布局

首先我們挑選一個(gè)Flutter控件去看源碼, 我們就選Stack, 因?yàn)樗銐蚝?jiǎn)單. 從表象上講它只要重疊擺放一組子控件即可. 先看下Stack的源碼:

class Stack extends MultiChildRenderObjectWidget { Stack({ Key key, this.alignment: AlignmentDirectional.topStart, this.textDirection, this.fit: StackFit.loose, this.overflow: Overflow.clip, List<Widget> children: const <Widget>[], }) : super(key: key, children: children);final AlignmentGeometry alignment; final StackFit fit; final Overflow overflow;@override RenderStack createRenderObject(BuildContext context) { return new RenderStack( alignment: alignment, textDirection: textDirection ?? Directionality.of(context), fit: fit, overflow: overflow, ); }@override void updateRenderObject(BuildContext context, RenderStack renderObject) { renderObject ..alignment = alignment ..textDirection = textDirection ?? Directionality.of(context) ..fit = fit ..overflow = overflow; }@override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties.add(new DiagnosticsProperty<AlignmentGeometry>('alignment', alignment)); properties.add(new EnumProperty<TextDirection>('textDirection', textDirection, defaultValue: null)); properties.add(new EnumProperty<StackFit>('fit', fit)); properties.add(new EnumProperty<Overflow>('overflow', overflow)); } } 

Stack繼承自MultiChildRenderObjectWidget, 重寫了createRenderObject其返回了一個(gè)RenderStack對(duì)象, 實(shí)際的工作者. 而updateRenderObject則只是修改RenderStack對(duì)象的屬性. debugFillProperties方法則是填充該類屬性的參數(shù)值到DiagnosticPropertiesBuilder中.

我們看看Flex, 也是如此, 重寫了createRenderObject其返回了一個(gè)RenderFlex對(duì)象, 實(shí)際的工作者. 而updateRenderObject則只是修改RenderFlex對(duì)象的屬性.

所以我們接下來(lái)看看RenderStack, 精簡(jiǎn)代碼如下:

class RenderStack extends RenderBox with ContainerRenderObjectMixin<RenderBox, StackParentData>,RenderBoxContainerDefaultsMixin<RenderBox, StackParentData> { RenderStack({ List<RenderBox> children, AlignmentGeometry alignment: AlignmentDirectional.topStart, TextDirection textDirection, StackFit fit: StackFit.loose, Overflow overflow: Overflow.clip, }) : assert(alignment != null),assert(fit != null),assert(overflow != null),_alignment = alignment,_textDirection = textDirection,_fit = fit,_overflow = overflow { addAll(children); }bool _hasVisualOverflow = false;@override void performLayout() { _resolve(); assert(_resolvedAlignment != null); _hasVisualOverflow = false; bool hasNonPositionedChildren = false; if (childCount == 0) { size = constraints.biggest; assert(size.isFinite); return; }double width = constraints.minWidth; double height = constraints.minHeight;BoxConstraints nonPositionedConstraints; assert(fit != null); switch (fit) { case StackFit.loose: nonPositionedConstraints = constraints.loosen(); break; case StackFit.expand: nonPositionedConstraints = new BoxConstraints.tight(constraints.biggest); break; case StackFit.passthrough: nonPositionedConstraints = constraints; break; } assert(nonPositionedConstraints != null);RenderBox child = firstChild; while (child != null) { final StackParentData childParentData = child.parentData;if (!childParentData.isPositioned) { hasNonPositionedChildren = true;child.layout(nonPositionedConstraints, parentUsesSize: true);final Size childSize = child.size; width = math.max(width, childSize.width); height = math.max(height, childSize.height); }child = childParentData.nextSibling; }if (hasNonPositionedChildren) { size = new Size(width, height); assert(size.width == constraints.constrainWidth(width)); assert(size.height == constraints.constrainHeight(height)); } else { size = constraints.biggest; }assert(size.isFinite);child = firstChild; while (child != null) { final StackParentData childParentData = child.parentData;if (!childParentData.isPositioned) { childParentData.offset = _resolvedAlignment.alongOffset(size - child.size); } else { BoxConstraints childConstraints = const BoxConstraints();if (childParentData.left != null && childParentData.right != null) childConstraints = childConstraints.tighten(width: size.width - childParentData.right - childParentData.left); else if (childParentData.width != null) childConstraints = childConstraints.tighten(width: childParentData.width);if (childParentData.top != null && childParentData.bottom != null) childConstraints = childConstraints.tighten(height: size.height - childParentData.bottom - childParentData.top); else if (childParentData.height != null) childConstraints = childConstraints.tighten(height: childParentData.height);child.layout(childConstraints, parentUsesSize: true);double x; if (childParentData.left != null) { x = childParentData.left; } else if (childParentData.right != null) { x = size.width - childParentData.right - child.size.width; } else { x = _resolvedAlignment.alongOffset(size - child.size).dx; }if (x < 0.0 || x + child.size.width > size.width) _hasVisualOverflow = true;double y; if (childParentData.top != null) { y = childParentData.top; } else if (childParentData.bottom != null) { y = size.height - childParentData.bottom - child.size.height; } else { y = _resolvedAlignment.alongOffset(size - child.size).dy; }if (y < 0.0 || y + child.size.height > size.height) _hasVisualOverflow = true;childParentData.offset = new Offset(x, y); }assert(child.parentData == childParentData); child = childParentData.nextSibling; } }@protected void paintStack(PaintingContext context, Offset offset) { defaultPaint(context, offset); }@override void paint(PaintingContext context, Offset offset) { if (_overflow == Overflow.clip && _hasVisualOverflow) { context.pushClipRect(needsCompositing, offset, Offset.zero & size, paintStack); } else { paintStack(context, offset); } } } 

可以看出RenderStack接收了所有傳遞給Stack的參數(shù), 畢竟RenderStack才是實(shí)際干活的^^. performLayout負(fù)責(zé)了所有布局相關(guān)的工作. performLayout首先分析StackFit參數(shù), 該參數(shù)有3個(gè)值:

• StackFit.loose 按最小的來(lái).
• StackFit.expand 按最大的來(lái).
• StackFit.passthrough Stack上層為->Expanded->Row, 橫向盡量大, 縱向盡量小.

得出BoxConstraints. 然后遍歷所有子控件, 如果不是Positioned類型子控件, 則將BoxConstraints傳給子控件讓它根據(jù)父控件大小自己內(nèi)部布局. 并且記錄下所有子控件結(jié)合RenderStack自生大小得出的最大高度和寬度. 將其設(shè)置為當(dāng)前控件大小.

接著再繼續(xù)從頭遍歷子控件, 如果不是Positioned類型子控件, 根據(jù)alignment參數(shù), 設(shè)置子控件在父控件中的偏移量, 比如Stack設(shè)置了居中, 上面計(jì)算出寬100, 高200, 而子控件寬30, 高30, 那么子控件需要偏移x=35, y=85. 如果是Positioned類型的子控件, 先將RenderStack的size大小, 減去Positioned屬性里的大小. 再來(lái)計(jì)算便宜量.

這個(gè)里面有_hasVisualOverflow變量, 如果內(nèi)容超出RenderStack大小, 其值為true. 也就是我們寫布局時(shí), 內(nèi)容超過(guò)范圍了, 報(bào)出來(lái)一個(gè)色塊提示, 就是如此得出的.
_overflow屬性則指定了子控件的繪制區(qū)域是否能超過(guò)父控件, 跟Android中的clipChildren屬性很像.

另外我們?cè)俜治鱿?code>IndexedStack, 該控件一次只能顯示一個(gè)子控件. 其實(shí)際差異在RenderIndexedStack

class RenderIndexedStack extends RenderStack { ... @override bool hitTestChildren(HitTestResult result, { @required Offset position }) { if (firstChild == null || index == null) return false; assert(position != null); final RenderBox child = _childAtIndex(); final StackParentData childParentData = child.parentData; return child.hitTest(result, position: position - childParentData.offset); }@override void paintStack(PaintingContext context, Offset offset) { if (firstChild == null || index == null) return; final RenderBox child = _childAtIndex(); final StackParentData childParentData = child.parentData; context.paintChild(child, childParentData.offset + offset); } ... } 

重寫了RenderStack的paintStack和hitTestChildren方法, 只繪制選中的子控件, 和接收事件.

總結(jié)

實(shí)現(xiàn)一個(gè)自定義布局, 我們需要先繼承MultiChildRenderObjectWidget, 然后重寫createRenderObject和updateRenderObject方法, 前者返回我們自定義的RenderBox的對(duì)象. 后者更新想要傳遞的屬性. 然后需要我們繼承RenderBox, 來(lái)擴(kuò)展我們想要的功能特性.

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/17531.html