استفاده از این محتوا رایگان میباشد

چارا برای خلق ارزش و توسعه مهارت های درونی و رشد استعدادها و جایی برای انجام پروژهای برنامه نویسی هست، هدف ما پیاده سازی ایده شما و توسعه مهارت های فردی کاربران برای ارتقا و اجرای هدفمندانه کسب و کارها میباشد بیشتر آموزش های سایت به صورت رایگان در اختیار شما هستند اما برای دسترسی به همه آموزش ها نیازمند تهیه عضویت ویژه سایت ما میباشید.

نحوه کار با ویجت expanded ( بخش 9 )

در این بخش با یه ویجت دیگه آشنا میشیم. به اسم Expanded برای این منظور من میام و از یه Row استفاده میکنم.اگه نمیدونید Row چی هست به این بخش برید یه Row دارم داخل body و 3 تا Container که داخل این قرار گرفته و اگر هم من الان اجرا کنم.

ویجت Row در فلاتر

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

Container(
color: Colors.blue,

padding: EdgeInsets.all(20.0),

child: Text('one'),

color: Colors.pinkAccent,
),
Container(

child: Text('one'),

padding: EdgeInsets.all(20.0),

),

Container(

child: Text('one'),

color: Colors.amber,

padding: EdgeInsets.all(20.0),

)

توی تصویر بالا میبینید که این 3 تا ویجت به ترتیب کنار هم قرار گرفتن. الان من میخوام به هر سه تا ویجت یه مقدار مساوی بدم. مثلا عدد 30 تا یه اندازه بشن و با این ویجت Expanded که میخوایم. کار کنیم بیشتر آشنا بشیم و ببینید که به چه شکلی کار میکنه.

الان میخوام ویجت Expanded و به یکی از container هام بدم اجرا میکنم و نتیجه رو میبینیم توی تصویر زیر :

Expanded(
child: Container(
color: Colors.blue,
padding: EdgeInsets.all(20.0),
child: Text('one'),
),
),

دیدید که توی تصویر بالا اومد و اون دوتا ویجت سمت راست قرار داد. و ویجت اول اندازش و با فضا باقی مونده پر کرد خب من میام برای اون دوتا container هم این کار و انجام میدم. توی تصویر زیر تغییر و مشاهده کنید

ویژگی Flex

خب توی دعفه قبلی این 3 تا هر کدوم یه مقدار خاصی داشتن. اما الان که توی هر 3 تا ویجت از Expanded استفاده کردیم. میبینید که توی اندازه هر سه تا Container یکسان شده. و با فضای عرض اسکرین کاملا پر شدن تا اینجا چون به هیچکدومشون وزن و اندازه خاصی ندادیم. هر 3 تاشون اندازشون یکی هست.

حالا اگه مثلا ما بخوایم یکیشون یه مقدار بیشتری بگیره. و یا مقدار کوچکتری بگیره که کلا نیاز هست توی برنامه نویسی این کار برای این منظور ویجت Expanded من ویژگی داره. به اسم Flex که این یه عدد میگیره که با توجه به اون عددی که ما وارد میکنیم. میاد و همون وزن از پدرش و اشغال میکنه. من الان مثلا وزن 3 رو بهش میدم و دوباره اجرا میکنم.

توی تصویر بالا میبیند که به چه صورتی شد الان من به دوتا container بعدی هم میخوام یه وزن2 رو بدم


میبنید که دوتا ویجت سمت راست که وزن 2 داشتن. اندازه یکسانی دارن ولی ویجت اول که وزن 3 رو داره یه مقداری بزرگتر شده تا همینجا برای Expanded کافی هست موفق باشید.

کار با ویجت column در فلاتر ( بخش 8 ) ❤️
نحوه کار با pictures و ویجت image (بخش 10 ) ❤️
, , , , ,

دیدگاهتان را بنویسید

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

این قسمت نباید خالی باشد
این قسمت نباید خالی باشد
لطفاً یک نشانی ایمیل معتبر بنویسید.
شما برای ادامه باید با شرایط موافقت کنید

فهرست