Flutter框架分析- Parent Data

zuoluohust 發表於 2021-05-22

1. 前言

有時候,RenderObject需要在其子節點中儲存一些資料,比如用於佈局的一些引數,或者和其他子節點之間的關係。為此,Flutter提供了ParentData,用於儲存父節點的一些資訊。每個RenderObject都有這個成員變數,該成員在setupParentData方法中初始化。子類如果需要ParentData的某個子類,需要重寫該方法,並在該方法中對ParentData進行初始化。

2. ParentData分類

image.png ParentData可以分為三大類:BoxParentDataSliverLogicalParentData,以及SliverPhysicalParentData。其中SliverLogicalParentDataSliverPhysicalParentData用於sliver,對應滑動檢視場景,此文不進行展開。BoxParentData則用於RenderBox,對應普通檢視場景,是本文講解的重點。

BoxParentData中主要屬性是offset,用於描述子節點在父節點中的座標偏移,主要用於子節點的佈局,其原始碼如下:

class BoxParentData extends ParentData {
  /// The offset at which to paint the child in the parent's coordinate system.
  Offset offset = Offset.zero;

  @override
  String toString() => 'offset=$offset';
}
複製程式碼

BoxParentData的子類TableCellParentData主要用於表格佈局,_ToolbarParentData主要用於iOS風格的工具欄佈局,ContainerBoxParentData主要用於需要ContainerRenderObjectMixin的節點佈局。

其中,ContainerBoxParentData使用頻率很高,基本上所有父節點ParentData都混入了該類,該類需要與ContainerRenderObjectMixin共同使用,主要解決了對child的管理,它用雙連結串列儲存了所有子節點並提供了方便的介面去獲取他們。對於開發者,一般來說只用到ContainerRenderObjectMixin中的firstChildlastChildchildCount,用來獲取首末childchild的個數,配合使用ContainerParentDataMixin中的previousSiblingnextSibling就可以對child進行遍歷了。

這些ParentData的基類解決了child的佈局位置資訊的儲存和child的管理以及引用的獲取,再往下的子類就是與各佈局的功能相關的類了,如 FlexParentData,儲存了flexfit的值,分別表示該childflex比重和佈局的fit策略。

3. 關鍵流程

對於BoxParentData的常用屬性offset,通常情況下,其在子RenderObject節點的setupParentData函式中對BoxParentData進行初始化;在performLayout中,對offset進行賦值;在paint函式中,使用offset確認子節點的繪製位置,在hitTestChildren中,使用offset輔助判斷是否在點選區域內。

接下來,將使用一個示例,來分析BoxParentData中的各個流程。示例程式碼如下:

class StackTestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints.expand(),
      child: Stack(
        alignment:Alignment.center , //指定未定位或部分定位widget的對齊方式
        children: <Widget>[
          // Positioned(
          //   top: 80.0,
          //   child: RichText(text: TextSpan(text: "first text"),
          //     textDirection: TextDirection.ltr,),
          // ),
          Container(
            child: RichText(
                text: TextSpan(text: "first text"),
                textDirection: TextDirection.ltr),
            color: Colors.red,
          ),
          Positioned(
            top: 180.0,
            left: 100,
            child: RichText(text: TextSpan(text: "second"),
              textDirection: TextDirection.ltr,),
          )
        ],
      ),
    );
  }
}
複製程式碼
  • 初始化

其中,Stack對應的ParentDataStackParentData,其被儲存在StackChild RenderObject中。StackParentData初始化的時序圖如下圖:

image.png

由該時序圖可以看出,StackParentData的初始化函式的呼叫時機是Element被載入時,即mount函式中,其對應的setupParentData程式碼如下。

@override
void setupParentData(RenderBox child) {
  if (child.parentData is! StackParentData)
    child.parentData = StackParentData();
}
複製程式碼
  • 賦值

StackParentData被初始化後,其賦值是在performLayout中,其流程圖如下所示。

image.png

如流程圖所示,在performLayout中,對子節點是否是isPositioned,會分別進行處理,但最終都會對offset進行賦值。

  • 使用

offset的使用場景主要有兩處,第一個是在繪製子RenderObject節點的時候用於確認子RenderObject節點的位置,對應的函式是paint;第二個是在判斷點選事件的時候,用於判斷是否會觸發子RenderObject節點的點選事件,對應的函式是hitTestChildren。 其在paint函式中使用的流程圖如下:

image.png

最後會呼叫到RenderBoxContainerDefaultsMixindefaultPaint函式,其程式碼如下:

void defaultPaint(PaintingContext context, Offset offset) {
  ChildType child = firstChild;
  while (child != null) {
    final ParentDataType childParentData = child.parentData as ParentDataType;
    context.paintChild(child, childParentData.offset + offset);
    child = childParentData.nextSibling;
  }
}
複製程式碼

offsethitTestChildren函式中使用的流程圖如下:

image.png

最後會呼叫到RenderBoxContainerDefaultsMixindefaultHitTestChildren函式,其程式碼如下:

bool defaultHitTestChildren(BoxHitTestResult result, { Offset position }) {
  // The x, y parameters have the top left of the node's box as the origin.
  ChildType child = lastChild;
  while (child != null) {
    final ParentDataType childParentData = child.parentData as ParentDataType;
    final bool isHit = result.addWithPaintOffset(
      offset: childParentData.offset,
      position: position,
      hitTest: (BoxHitTestResult result, Offset transformed) {
        assert(transformed == position - childParentData.offset);
        return child.hitTest(result, position: transformed);
      },
    );
    if (isHit)
      return true;
    child = childParentData.previousSibling;
  }
  return false;
}
複製程式碼

除了offsetStackParentData還有自己特有的屬性top等,這些屬性儲存了子RenderObjectRenderStack中的位置資訊,其賦值是在applyParentData中,這個函式也是Flutter Framework開放出來對ParentData進行賦值的介面。其流程圖如下:

image.png

此處,PositionedStack的子WidgetRenderObjectElementPositioned的子Widget對應的Element。 值得注意的是applyParentData只在父ElementParentDataElement,且其有更新的時候才會被呼叫,包括但不限於本Element attachRenderObject和父ParentDataElement對應的Widget被重建。

4. 常用使用場景

ParentData的常用使用場景是在自定義RenderObject中,自定義一種ParentData,例如CustomParentData,儲存其特有的佈局資訊。然後在setupParentData中對其進行初始化,在applyParentData中對其進行賦值,然後在painthitTestChildren中對其進行使用。具體使用示例會在自定義RenderObject章節中進行詳述。

5. 小結

本文主要介紹了ParentData的作用、分類和關鍵流程,並通過一個示例分析了ParentData的關鍵流程。其重點如下:

  • RenderObject通常使用ParentData在其子節點中儲存一些資料,比如用於佈局的一些引數。
  • ParentData一般在setupParentData中進行初始化,在performLayout中進行賦值,在painthitTestChildren中進行使用。
  • 如果是自定義的ParentData,通常需要在applyParentData中對其進行賦值。

6. 相關文章

Flutter框架分析(一)--架構總覽

Flutter框架分析(二)-- Widget

Flutter框架分析(三)-- Element