توی یه مقاله ی خیلی کوتاه میخوایم درخت های مختلف توی فلاتر رو بررسی کنیم. چرا کوتاه؟ چون فصل مقدمه هست و توی فصل های اینده هر کدوم رو به تفصیل باز میکنیم.

توی فریمورک فلاتر 4 تا Tree معروف داریم:

• Widget Tree
• Element Tree
• Render Tree
• Layer Tree

همون طور که توی قسمت معماری فلاتر گفتم, Render Tree و Layer Tree توی لایه ی Rendering قرار میگیرن و اون دو تای دیگه سر و کلشون توی لایه Widgets که یه لایه ی High Level تر هست پیدا میشه.

پ.ن: اینجا منظورم از High Level یعنی نزدیک تر به یوزر نهایی و یوزر نهایی که هم خود ما برنامه نویس ها هستیم.

خب widget Tree که همون ویجت هایی هست که میزنی توی سر و کله ی هم تا یه UI خاص رو درست کنی. انواع ویجت ها به شرح زیر هست:

بعد از اون نوبت میرسه به Element Tree که دقیقن متناظر با Widget Tree هست و به ازای هر ویجت توی Widget Tree یه Element توی Element Tree ایجاد میشه. انواع Element ها هم به قرار زیر هستن:

توی این 2 درخت باید به برگ ها دقت کنی. برای مثال ویجت هایی که ما میسازیم میتونن یکی از انواع زیر باشن:

• Stateless
• Stateful
• ParentData
• Inherited
• LeafRederObject
• SingleChildRenderObject
• MultiChildRenderObject

و هر کدوم از این ویجت ها به المنت متناظر خودشون کوپل میشن.

پ.ن: این ویجت ها و المنت های بیس رو میتونی توی فایل Framework.dart که توی لایه (پوشه) ی Widgets قرار داره پیدا کنی.

بعد از اون میرسیم به Render Tree که دیگه متناظر به ویجت تری نیست و قرار نیست که به ازای هر ویجت توی ویجت تری یه المان توی رندر تری داشته باشیم. بلکه فقط و فقط ویجت هایی که از نوع RenderObjectWidget هستن یه نماینده توی رندر تری دارن. توی RenderTree با مفهومی به اسم RenderObject روبرو هستیم که انواعش به شکل زیر هست:

همچنین یه درخت دیگه به اسم Layer Tree هم داریم که به دلیل ادونس بودنش به اینده موکولش میکنیم.

گفتیم که به ازای هر ویجتی که توی ویجت تری داریم, دقیقن یه المنت متناظر باهاش توی المنت تری هم داریم, ولی رندر تری متناظر با این دو نیست و فقط ویجت هایی که جلوه ی بصری دارن و درواقع یه RenderObject دارن, یه نماینده توی رندر تری خواهند داشت. پس StatelessWidget و StatefulWidget و ProxyWidget ها هیچ نماینده ای توی رندرتری ندارن. بنابراین برای اینکه یه چیزی نشون کاربر بدیم و کاربر بتونه یه تصویر رو ببینه, در نهایت باید یک یا چند RenderObjectWidget رو توی ویجت تری داشته باشیم و اگه یه ویجت تری که هیج RenderObjectWidet ای داخلش نیست و فقط از ویجت های دیگه (stateless, stateful, proxy) تشکیل شده بسازیم, کاربر هیچ تصویری رو نمیبینه.

از این رو اولین ویجتی که توی ویجت تری قرار میگیره (راس ویجت تری) باید یه RenderObjectWidget باشه و همچنین برگ های ویجت تری (leaf ها) هم همشون باید از نوع RenderObjectWidget باشن و به هیچ وجه نمیتونیم یه stateless یا stateful یا proxy رو به عنوان یکی از برگ های ویجت تری قرار بدیم, چون که هیج گونه جلوه ی بصری نداره.

با این مفاهیم در طول دوره آشنا میشیم و یادشون میگیریم…. پس نگران نباش.