整個(gè)RenderObject 的測(cè)量過(guò)程其實(shí)并不是非常復(fù)雜,這里我們以 RenderPadding 為例來(lái)講解一下,
在flutter 中整個(gè)測(cè)量過(guò)程是伴隨著layout的過(guò)程同時(shí)進(jìn)行的,其實(shí)可以認(rèn)為是你要是不知道控件大小,如何進(jìn)行接下來(lái)的布局,所以他們是相輔相成的,在上一篇的文章中我們介紹過(guò)layout 的過(guò)程,整個(gè)計(jì)算的過(guò)程都是在子widget 的performLayout()的方法中,
這里我們說(shuō)一下RenderPadding
@override
void performLayout() {
final BoxConstraints constraints = this.constraints;///獲取該widget 的約束大小
_resolve();//根據(jù)方向重置 padding
if (child == null) {//沒(méi)有child
size = constraints.constrain(Size(///如果沒(méi)有child size 的大小就是 計(jì)算后的padding
_resolvedPadding.left + _resolvedPadding.right,
_resolvedPadding.top + _resolvedPadding.bottom,
));
return;
}
///deflate方法計(jì)算除去padding后剩余的約束大小,將這個(gè)大小作為子widget的約束,
final BoxConstraints innerConstraints = constraints.deflate(_resolvedPadding);
////計(jì)算子widget 的size , 如果不是sizebyparent 則需要根據(jù)子widget 的performLayout繼續(xù)去計(jì)算
////這樣循環(huán)下去,知道到最后的widget ,計(jì)算出size ,向上返回
child.layout(innerConstraints, parentUsesSize: true);
final BoxParentData childParentData = child.parentData as BoxParentData;
childParentData.offset = Offset(_resolvedPadding.left, _resolvedPadding.top);
size = constraints.constrain(Size(
_resolvedPadding.left + child.size.width + _resolvedPadding.right,
_resolvedPadding.top + child.size.height + _resolvedPadding.bottom,
));
}
///如果有child 則根據(jù)自身的約束 和padding 計(jì)算除去padding 的約束大小,
BoxConstraints deflate(EdgeInsets edges) {
final double horizontal = edges.horizontal;
final double vertical = edges.vertical;
final double deflatedMinWidth = math.max(0.0, minWidth - horizontal);
final double deflatedMinHeight = math.max(0.0, minHeight - vertical);
return BoxConstraints(
minWidth: deflatedMinWidth,
maxWidth: math.max(deflatedMinWidth, maxWidth - horizontal),
minHeight: deflatedMinHeight,
maxHeight: math.max(deflatedMinHeight, maxHeight - vertical),
);
}
整個(gè)過(guò)程可以理解為,在一次遍歷中，父節(jié)點(diǎn)調(diào)用每個(gè)子節(jié)點(diǎn)的布局方法，將約束向下傳遞，子節(jié)點(diǎn)根據(jù)約束，計(jì)算自己的布局，并將結(jié)果傳回給父節(jié)點(diǎn)
如果這樣弄得話就會(huì)存在一些問(wèn)題,如果一個(gè)widget 的大小或者內(nèi)容改變了,需要重新創(chuàng)建,而如果他的大小又影響了父控件的大小,這樣就導(dǎo)致了在layout 的過(guò)程中先要調(diào)用markNeedsLayout 向上查找parent ,直到找到relayoutBoundary后,再通過(guò)parent 的performLayout ()方法重新計(jì)算并布局整個(gè)widget,這個(gè)過(guò)程可以說(shuō)執(zhí)行了非常多的layout 和計(jì)算的過(guò)程,就導(dǎo)致了改控件改變后需要付出的代價(jià)的太大了,那么如何將這個(gè)過(guò)程變得簡(jiǎn)單呢,如果一個(gè)控件大小改變了,他的內(nèi)部變化是不可避免的,我們可以通過(guò)改變r(jià)elayoutBoundary 即布局邊界來(lái)阻止他向上查找parent,讓變化只影響當(dāng)前widget和他的子widget就可以了,如果子widget也沒(méi)有改變,在element updatechild 的方法中是可以重用widget 的,則在整個(gè)過(guò)程中其實(shí)我們需要改變的,只有當(dāng)前這個(gè)widget,這樣就可以最大限度的提高flutter性能了,
那么如何去改變r(jià)elayoutBoundary這個(gè)布局邊界呢
整個(gè)layout和計(jì)算的過(guò)程中存在一個(gè)relayoutBoundary,如果這該widget 為布局邊界,則不會(huì)影響
在RenderObject 的 layout 的方法中,relayoutBoundary 是由很多個(gè)參數(shù)同時(shí)決定的
if (!parentUsesSize || sizedByParent || constraints.isTight || parent is! RenderObject) {
relayoutBoundary = this;
}
parentUsesSize = false：父節(jié)點(diǎn)的布局不依賴當(dāng)前節(jié)點(diǎn)的大小
sizedByParent = true：當(dāng)前節(jié)點(diǎn)大小由父節(jié)點(diǎn)決定
constraints.isTight：大小為確定的值，即寬高的最大值等于最小值
parent is not RenderObject：如果父節(jié)點(diǎn)不是RenderObject，子節(jié)點(diǎn)layout變化不需要通知父節(jié)點(diǎn)更新
通過(guò)改變這些數(shù)據(jù)來(lái)就可以控制布局邊界來(lái)了,但是這樣使用起來(lái)就會(huì)要求我們?nèi)ブ貙懣丶?能力有限就不多寫了,因?yàn)榻酉聛?lái)的東西我還沒(méi)有接觸過(guò),大家可以看一下http://www.lxweimin.com/p/31e3b9008d6a 閑魚的技術(shù)博客,寫的非常好,在我的理解如果頂部widget 變化的話,所有子widget 都會(huì)重新layout和計(jì)算一次,但是閑魚那邊則是O(N2),不知道哪里沒(méi)有理解,希望大家能留言共同探討一下,思考問(wèn)題解決問(wèn)題才是自己繼續(xù)學(xué)習(xí)下的動(dòng)力
我學(xué)習(xí)flutter的整個(gè)過(guò)程都記錄在里面了
http://www.lxweimin.com/c/36554cb4c804
最后附上demo 地址
