پرش به محتوا

نحوه کار با StatefulWidget در فلاتر (بخش 12 ) ❤️

نحوه کار با ویجت های Statefull

در بخش های قبلی با Stateless widget آشنا شدیم و فهمیدم وقتی از این ویجت استفاده میکنیم که قرار نیست تغییری اتفاق بیوفته و همه چیز ثابت هست اما اگه بخوایم یه چیزی رو روی صفحه تغییر بدیم حتما باید از statefull Widget استفاده کنیم خب برای این مفهوم من میام شروع میکنم به نوشتن کلاس مربوطه طبق کد های زیر:

class Test extends StatefulWidget{
@override
_TestState createState() => _TestState();


class _TestState extends State<Test>{

@override
Widget bui1d(BuildContext context) {

return null;
 

در حال حاضر قصد دارم پروژه قبلی روکه توی بخش قبلی ایجاد کردیم که Stateless هم بود و ثابت بود رو تغییر بدیم به Statefull و میخوام که روی صفحه یک تغییراتی اعمال بشه به عنوان مثال میخوام این Lable که روی صفحه دارم هر بار یک رقم یک رقم بهش اضافه بشه و همینطوری اضافه بشه برای این کار کلاس مربوطه رو تغییر میدم به Statefull با استفاده از کد های زیر :

class Ninjacard extends Statefu1Widget{
@override
_NinjaCardState createState() => _NinjaCardState();

class _NinjaCardState extends State<NinjaCard>{

گفتیم که میخوایم این مقدار عدد 8 هی تغییر کنه و هر بار عدد بهش اضافه بشه اول میاییم یه متغییر تعریف میکنیم برای اینکه مقدار level رو توی خودش نگه داره و هی تغییر کنه به شکل زیر:

int ninjaLevel = 0;

حالا میریم سر وقت اون Text که Level و نشون میده که عدد 8 روتوی خودش نگه داشته و میگم که به جای اینکه عدد ثابت 8 رو نگه داری و نمایش بدی به جاش بیا این متغییر Ninja Level رو نمایش بده:

Text(
'$ninjaLevel',
style: TextStyle(
color: Colors.amberAccent[200],
letterspacing: 2.0,
fontsize: 28.0,
fontweight: FontWeight.bold
), 
), 

و دوباره اجرا میکنم نتیجه رو ببینیم

مشاهده میکنید که داره عدد صفر و به من نمایش میده حالا برای اینکه این عدد رو تغییر بدم احتیاج به یه دکمه دارم میتونم اینجا یه FloatingActionbutton بزارم و هر دعفه که روش کلیک کنم یک عدد به این level اضافه بشه خب واسه این کار من میام مثلا بعد از این body تعریف میکنم که یه floatingactionbutton دارم مطابق کد های زیر :

f1oatingActionButton: F1oatingActionButton(
onPressed:(){

setState(() {
ninjaLevel+=1;
));

},
backgroundcolor: Colors.grey[800],
child: Icon(Icons.add),

),

خب الان اگه اجرا کنم و روی دکمه کلیک کنم میبینید که عدد 0 رو برای من 1 و 2 و 3 و 4 و الی آخر اضافه میکنه مثل تصویر زیر :

نکته این متغییر ما حتما باید توی Setstate قرار بگیره تا مقدارش تغییر کنه

setState(() {
ninjaLeve1+=1;
));

خب دوستان عزیز این از کلاس Statefull من بود ودیدید وقتی که تغییری روی صفحه داریم باید حتما از این ویجت استفاده کنیم و اینجا هم ما برای Level استفاده کردیم و یه متغییر نوشتیم که وقتی که روی floatingactionbutton کلیک میشه مقدارش 1 واحد افزایش پیدا میکنه.

5/5 - ( 1 امتیاز )

2 دیدگاه دربارهٔ «نحوه کار با StatefulWidget در فلاتر (بخش 12 ) ❤️»

دیدگاه شما نگاه ما رو عوض میکنه !

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پشتیبانی آنلاین