در این بخش قرار هست که با ویجت column آشنا بشیم خب در بخش قبل دیدید که Row میومد ویجت ها رو به صورتی افقی میچید اما column میاد و ویجت ها رو به صورت عمودی و زیر هم دیگه شروع میکنه به چیدن.
[restrict]
خب ما توی 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 هست مثال زیر و ببیند:
[/restrict]
crossAxisAlignment: CrossAxisAlignment.stretch
ویژگی stretch این بود که میومد و این ویجتی که داشتیم و میکشید توی تصویر بالا میبینید اومده و این 3 تا ویجت که داشتیم و برای ما کشید به اندازه طول اسکرین و به این شکل برای ما قرار داد
نکته : داخل column ما میتونیم از Row هم استفاده کنیم
خب دوستان برای این بخش هم کافیه توی بخش های بعدی آموزش ها میبینمتون هر سوالی هم راجب این آموزش ها داشتید و یا اگه خواستید چیزی که مد نظرتون هست آموزش داده بشه رو توی کامنت ها بگید خیلی سریع براتون آموزشش رو میسازم.
