توی یه مقاله ی خیلی کوتاه میخوایم درخت های مختلف توی فلاتر رو بررسی کنیم. چرا کوتاه؟ چون فصل مقدمه هست و توی فصل های اینده هر کدوم رو به تفصیل باز میکنیم.
توی فریمورک فلاتر 4 تا Tree معروف داریم:
- Widget Tree
- Element Tree
- Render Tree
- Layer Tree
همون طور که توی قسمت معماری فلاتر گفتم, Render Tree و Layer Tree توی لایه ی Rendering قرار میگیرن و اون دو تای دیگه سر و کلشون از لایه Widgets که یه لایه ی High Level تر هست پیدا میشه.
پ.ن: اینجا منظورم از High Level یعنی نزدیک تر به یوزر نهایی و یوزر نهایی که هم خود ما برنامه نویس ها هستیم.
خب widget Tree که همون ویجت هایی هست که میزنی توی سر و کله ی هم تا یه UI خاص رو درست کنی. انواع ویجت ها به شرح زیر هست:
![](https://purecoder.ir/wp-content/uploads/2024/06/Widgets.jpg)
بعد از اون نوبت میرسه به Element Tree که دقیقن متناظر با Widget Tree هست و به ازای هر ویجت توی Widget Tree یه Element توی Element Tree ایجاد میشه. انواع Element ها هم به قرار زیر هستن:
![](https://purecoder.ir/wp-content/uploads/2024/06/Elements.jpg)
توی این 2 درخت باید به برگ ها دقت کنی. برای مثال ویجت هایی که ما میسازیم میتونن یکی از انواع زیر باشن:
- Stateless
- Stateful
- ParentData
- Inherited
- LeafRederObject
- SingleChildRenderObject
- MultiChildRenderObject
و هر کدوم از این ویجت ها به المنت متناظر خودشون کوپل میشن.
پ.ن: این ویجت ها و المنت های بیس رو میتونی توی فایل Framework.dart که توی لایه ی Widgets قرار داره پیدا کنی.
بعد از اون میرسیم به Render Tree که دیگه متناظر به ویجت تری نیست و قرار نیست که به ازای هر ویجت توی ویجت تری یه المان توی رندر تری داشته باشیم. بلکه فقط و فقط ویجت هایی که از نوع RenderObjectWidget هستن یه نماینده توی رندر تری دارن. توی RenderTree با مفهومی به اسم RenderObject روبرو هستیم که انواعش به شکل زیر هست:
![](https://purecoder.ir/wp-content/uploads/2024/06/RnderObjects.jpg)
همچنین یه درخت دیگه به اسم Layer Tree هم داریم که به دلیل ادونس بودنش به اینده موکولش میکنیم.
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.