mohammad boustani
mohammad boustani
خواندن ۳ دقیقه·۱ سال پیش

تفاوت بین ویجت های stateless و statefull


در فلاتر، ویجت ها بلاک های سازنده رابط کاربری هستند. اونها رفتار ها ، ظاهر و ساختار یک المان رابط کاربری رو تشکیل میدن. دو مدل ویجت توی فلاتر وجود داره:stateful widgets و stateless widgets، تفاوت اصلیشون هم برمیگرده به این که اونا چطوری وضعیتشون رو مدیریت میکنند(???WTF)!!

بذارید راحتتر بهتون بگم، توی فلاتر هر چیزی که توی صفحه میبینید رو میگن ویجت، کلا همه چی اینجا ویجت هستش، متن ها، سطر و ستون ها، دکمه ها، اسلایدر ها و خلاصه همه چی اینجا بر اساس ویجت ها پیدا شده، حتی میتونید یه ویجت جدید با ترکیب چندتا ویجت آماده بسازید.

همونطوری که بالا گفتم، دو مدل ویجت داریم، ویجت stateless و ویجت stateful، بیاین اول در مورد ویجت stateless حرف بزنیم.

ویجت های Stateless ، در واقع immutable هستند، یعنی این که زمانی که ساخته شدن، هیچ خاصیتی از اونا نمیتونه تغییر بکنه، یعنی ظاهر اون ویجت ها ثابت هستش و تغییر نمیکنه، حالا این یعنی چی؟ یعنی اینکه مثلا شما یه ویجت متن رو میسازی که میخوای ازش به عنوان یک لیبیل استفاده کنی، بهش کلی استایل باحال میدی و قشنگش میکنی، وقتی برنامه اجرا میشه، اون ظاهر و اون ویجت فقط چیزی که داخلش نوشته شده رو نمایش میده و چیزی توی اون ویجت تغییر نمیکنه(چه متن چه ظاهر)، صرفا هم براساس اون اون پارامتر ها و مقادیر اولیه ای که بهشون میدیم نشون داده میشن.

مثلا این Text یک ویجت هستش که یک متن رو شما میتونی توش بنویسی که بهت نمایش بده.

خب حالا بریم سراغ ویجت های stateful،

ویجت های stateful برخلاف ویجت های stateless، که گفتیم immutable هستند و نمیتونند تغییر ظاهری داشته باشن، اینا اتفاقا mutable هستند و میتونند ظاهرشون رو تغییر بدن، ازشون استفاده میشه وقتی که نیازه توی المان های UI در برنامه تغییری ایجاد بشه ، بذار یه مثال بزنم براتون راحت متوجه بشید، فک کنید شما یه پالت رنگی دارید و میخواید وقتی روی یکی از این رنگ ها کلیک میکنید، متن موجود در صفحتون به اون رنگ در بیادش، یا اینکه وقتی روی یک دکمه کلیک میکنید عدد داخل متن یکی یکی اضافه بشه، اینکه شما دارید میبینید که اون ویجت داره ظاهرش تغییر میکنه، یعنی دارید از ویجت stateful استفاده میکنید.
آها اینو هم یادتون نره که ما برنامه فلاتریمون رو با ترکیب کردن ویجت های مختلف با هم میسازیم.

به مثال زیر دقت کنید، فک کنید یک ویجت دکمه دارید و یک ویجت متن، و میخواید هر بار که روی اون دکمه کیلیک میشه بتونید مقدار داخل اون ویجت متن رو یکی(+1) اضافه کنید، طبق عکس زیر میتونی عمل کنی:

توی مثال بالا ما یک متغییر counter داریم و یک فانکشن incrementCounter که عدد counter رو یکی اضافه میکنه، و از طریق setState ظاهر برنامه رو آپدیت میکنه و به عدد جدید تبدیل میکنه و از طریق ویجت Text عدد آپدیت شده، نمایش داده میشه.

خلاصه، فلاتر کلی ویجت داره که همه ی اون ویجت ها به دوتا دسته ی statefull و stateless تقسیم میشن. که همونجوری هم که متوجه شدید ویجت های stateless بدون تغییر ظاهری (در زمان اجرای برنامه) هستند. و ویجت های statefull قابلیت تغییر ظاهر رو دارند و از طریق متد Setstate برنامه رو یکبار rebuild میکنند و ظاهر ویجت رو تغییر میدن.

امیدوارم این مقاله بدردتون خورده باشه، از اونجایی که من خودم توی ابتدای راه خیلی سخت متوجه شدم مفهوم این دوتا رو، خواستم یجوری اون رو توضیح بدم که خیلی راحت درک کنید مفهومشون رو.
اگه این مقاله مفید بود براتون، ممنون میشم اون رو لایک کنید و نظر خودتون رو بنویسید.

ویجت‌های statelessاموزش ویجت هافلاترflutterprogramming
شاید از این پست‌ها خوشتان بیاید