🎥

RenderObjectとは何か？

2024/07/27に公開

Flutter

Dart

idea

👤対象者

RenderObjectについて知りたい
いつ使うのか?

RenderObject class

RenderObjectは親を持ち、parentDataと呼ばれるスロットを持ち、そこに親RenderObjectは子特有のデータ、例えば子の位置を格納することができます。RenderObjectクラスはまた、基本的なレイアウトとペイントのプロトコルを実装しています。

しかし、RenderObjectクラスは、子モデルを定義しません（例えば、ノードが0個、1個、またはそれ以上の子を持つかどうか）。また、座標系（例えば、子がデカルト座標で配置されるのか、極座標で配置されるのかなど）や特定のレイアウト・プロトコル（例えば、レイアウトがwidth-in-height-outなのか、constraint-in-size-outなのか、子がレイアウトする前に親が子のサイズと位置を設定するのか、子がレイアウトした後に親が子のサイズと位置を設定するのかなど）も定義していません。

RenderBoxサブクラスは、レイアウトシステムがデカルト座標を使用するという意見を導入しています。

ライフサイクル

RenderObjectは不要になったらdisposeしなければなりません。オブジェクトの作成者は、それを破棄する責任があります。一般的に、作成者はRenderObjectElementであり、その要素は、それがアンマウントされたときに作成したオブジェクトを破棄します。

RenderObjectは、PictureオブジェクトやImageオブジェクトなど、disposeが呼び出されたときに保持する高価なリソースをクリーンアップする責任があります。これには、レンダーオブジェクトが直接作成したレイヤーも含まれます。disposeの基本実装は、レイヤープロパティを無効にします。サブクラスは、それが直接作成した他のレイヤーも無効にしなければなりません。

公式の動画を見た方がいいかも

解説が長いと読むの疲れるよね💦
できるだけ記事は短くしたい💦
動画でも見ようか👁️

ElementツリーがRenderObjectでできた別ツリーを作るらしい　

Widgetレイヤの下に、Renderレイヤーがあるとのこと

RenderObjectと関連クラスを処理する。

WidgetレイヤではRenderingレイヤーが使用されてるため　RenderObjectは通常コード内で見えなくても存在しています。

ではRenderObjectの機能は？
実はかなりの機能があります。レイアウト、描写、ヒットテスト、アクセシビリティの処理です。

ご存知のようにFlutterではすべてがWidgetですが、画面に表示されているすべてはRenderObjectでもあるのです。

「何と画面に映っていた。ここで使われてましたね。」

確かめるには、Flutter Inspectorを開き　Render Treeタブを選択すると動画では言っております。UI変わったが....

Android Studioの場合

大半のWidgetは、二次元座標を使うRenderBoxという特定の種類のRenderObjectが使われています。RenderObjectツリーをWidetツリーと同期し続けどのフレームでも存在し続けるようにします。

たいていこのRenderObjectは再利用できパフォーマンス向上に役立ちます。例えば、Widgetの色が変わる場合同じRenderObjectを再利用して再描画できます。

Widgetが削除されると、対応するElementもRenderObjectも切り離されます。この分離が起こるのはRenderObjectが、　Widgetツリー内の新しい場所に移動しているためか、同一レベルのオブジェクトと入れ替わったためです。　キーの使用が重要なのはそのためです。

Flutterではkeyを使いWidgetが新しい場所に移動しElementとRenderObjectを再利用できるときに判別します。　例えば一意のkeyを持つ２つの主要Widgetが、ビルド段階で入れ替わった場合、Elementも入れ替わる必要があります。

Widgetに一致するkeyがある場合、親Elemntでは、子Elementを再利用し事実上Element同士と関連Stateオブジェクト同士を交換します。

ツリーの完全に別の場所にWidgetを移動する場合は、グローバルキーが必要です。

長い説明がさらに続く💦

まとめ

RenderObjectの機能は？
レイアウト、描写、ヒットテスト、アクセシビリティの処理です。

Flutterは画面に描画をするときは、Widgetではなくて、RenderObjectを使っていた。変更されるので、可変だから、mutableなオブジェクトということになりますね。

一言で表現するなら...

UIの描画と、レイアウトの変更をおこなう、mutable(可変。変わる)なオブジェクト

RenderObjectWidgetについて

RenderObjectWidgetは、アプリケーションの実際のレンダリングを行うRenderObjectをラップするRenderObjectElementsの設定を提供します。

通常、RenderObjectWidgetを直接サブクラス化するのではなく、レンダーオブジェクトウィジェットは以下のいずれかをサブクラス化します：

StatelessWidgetクラス、StatefulWidgetクラスには、レンダリングする機能がありません。「できないのか....」
実際にレンダリングしているのは、RenderObjectクラスです。

レンダリング（rendering）とは、データを処理や演算することで画像や映像、テキストなどを表示させることです。