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

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

کار با ویجت column در فلاتر ( بخش 8 ) ❤️

 

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

خب ما توی Body مینویسیم column دقیقا استفاده و ویژگی هایی که داره شبیه به Row هست که حالا ما میاییم داخلش یه Container قرار میدیم و یه Padding و یه Color  و یه Text میدم بهش و از Container که ساختیم دو تا کپی میگیرم  مثال زیر

main.dart

Column(

children: <Widget> [

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

Container(
padding: EdgeInsets.all(30.0),
color: Colors.pinkAccent,
child: Text('one'),
),

Container(
padding: EdgeInsets.all(40.0),
color: Colors.amber,
child: Text('one'),
),

],

       )

در ادامه میاییم و از ویژگی mainAxisAlignment استفاده میکنیم

mainAxisAlignment: MainAxisAlignment.center

توی تصویر بالا میبینید که کل ویجت هامون اومدن و وسط قرار گرفتن دقیقا همون ویژگی هایی که برای Row داشتیم اینجا هم داریم برای مثال من از متد spaceBetween هم استفاده میکنم

mainAxisAlignment: MainAxisAlignment.spaceBetween

با استفاده از این متد spaceBetween توی تصویر بالا میبینید که اومد و ویجت ها ما رو با فاصله از هم دیگه قرار داد همین مورد رو هم توی بخش قبلی که مربوط به Row بود هم داشتیم.

حالا من متد End رو هم تست میکنم ببینید.

mainAxisAlignment: MainAxisAlignment.end

توی تصویر بالا هم میبینید که با استفاده از متد end کل ویجت ها مون میان و پایین صفحه قرار میگیرن.

مورد بعدی که میخوایم بررسی کنیم crossAxisAlignment هست مثال زیر و ببیند:

crossAxisAlignment: CrossAxisAlignment.stretch

ویژگی stretch این بود که میومد و این ویجتی که داشتیم و میکشید توی تصویر بالا میبینید اومده و این 3 تا ویجت که داشتیم و برای ما کشید به اندازه طول اسکرین و به این شکل برای ما قرار داد

نکته : داخل column   ما میتونیم از Row هم استفاده کنیم

خب دوستان برای این بخش هم کافیه توی بخش های بعدی آموزش ها میبینمتون هر سوالی هم راجب این آموزش ها داشتید و یا اگه خواستید چیزی که مد نظرتون هست آموزش داده بشه رو توی کامنت ها بگید خیلی سریع براتون آموزشش رو میسازم.

کاربرد ویجت Row در فلاتر (بخش 7 ) ❤️
نحوه کار با ویجت expanded ( بخش 9 )
, , , , ,

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

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

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

فهرست