اول یه توضیحی در مورد Row بدم وقتی خواسته باشیم از سطر و ویجت هامون هر چی روکه خواستیم به صورت افقی چیده بشه از Row استفاده میکنیم خب واسه اینکه بهتر متوجه بشیم من میام داخلش چندتا ویجت قرار میدم واسه اینکه از چندتا ویجت توی Row استفاده کنیم عبارت Childeren و تایپ میکنیم توش و چیز هایی که میخوایم و توش یکی یکی قرار میدم یه دونه ویجت Text قرار میدم و یه Flatbutton و یه Container که توی بخش های قبل با این ویجت ها آشنا شدیم مثال زیر :
[restrict]
Main.dart
import 'package:flutter/material.dart';
void main() {
MaterialApp(
home: Home(),
);
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('my first app'),
centerTitle: true,
backgroundColor: Colors.red[600],
),
body: Row(
children: <Widget>[
Text('Hello Word'),
FlatButton(
onPressed: () {},
color: Colors.amber,
child: Text('click'),
),
Container(
color: Colors.cyan,
padding: EdgeInsets.all(30),
child: Text('inside container'),
)
],
),
);
}
}
بعد از اجرا کد های بالا نتیجه رو توی تصویر زیر میبینیم
حالا خود ویجت Row چندتا ویژگی داره برای اینکه بتونیم این المنت ها رو چیدمانشون و تغییر بدیم فقط کافیه بریم به خط دستورات که childeren و نوشتیم
اولین ویژگی که میخوایم باهاش کار کنیم اسمش هست mainAxisAlignment مشخص میکنه که چیدمان و ساختار این ویجت ها به چه شکلی باشه به صورت زیر میتونیم متد های mainAxisAligment و ببنیم.
خب من میام از اولی که Center هست استفاده میکنم
mainAxisAlignment:MainAxisAlignment.center
اجرا میکنم تا خروجی رو ببینیم توی تصویر زیر:
[/restrict]
[restrict]
خب میبینیم که اومد و کل اون ویجت هایی که توی Row قرار داده بودیم و وسط چین کرد ودر وسط صفحه قرار گرفتن ویژگی دیگه ای که داره اسمش هست SpaceAround کد زیر
mainAxisAlignment:MainAxisAlignment.spaceAround
[/restrict]
دوباره کدم رو اجرا میکنم تصویر زیر و میبینیم
[restrict]
[/restrict]
میبینیم که اومد و چقدر زیبا بین ویجت هامون به یه مقدار مشخصی فاصله ایجاد کرد.
ویژگی spacebetween رو حالا بررسی میکنیم
mainAxisAlignment:MainAxisAlignment.spaceBetween
[restrict]
این ویژگی اومد و بین المنت ها یه فاصله انداخت ولی دیگه به کنارها کاری نداره فرقش با متد SpaceAround توی همین هست !
من ویژگی End وهمانتخاب کنم و ببینید
[/restrict]
mainAxisAlignment:MainAxisAlignment.end
میبینید که همه ویجت های ما با متد End اومدن و سمت راست قرار گرفتن.
[restrict]
خب ویژگی بعدی که این Row ما داره crossAxisAlignment هست مثلا من الان از متد Start استفاده میکنم
crossAxisAlignment: CrossAxisAlignment.start
[/restrict]
این قسمت میاد و خود ویجت رو تغییر میده وقتی از Start استفاده کردیم توی تصویر بالا میبینیم که اومد و ویجت ها رو از بالا شروع کرد به چیدن حالا اگه از متد End استفاده کنم برعکس start میاد و ویجت ها رو از پایین مرتب میکنه تصویر زیر رو ببینید
crossAxisAlignment: CrossAxisAlignment.end
متد بعدی اسمش هست stretch
crossAxisAlignment: CrossAxisAlignment.stretch
[restrict]
[/restrict]
وقتی از Stretch استفاده کردیم توی تصویر بالا میبینید که میاد و ویجت هامون و میکشه خب دوستان عزیز توی این بخش با ویجت Row آشنا شدیم که دیدم Row میاد ویجت های ما رو به صورت افقی قرار میده کنار هم دیگه که حالا بستگی به ui که میخواییم طراحی کنیم کاربرد داره مثلا اگه اپ فیلیمو رو دیده باشید با این رو میشه آیتم های ویدیو که داره رو پیاده کرد منتظر بخش های بعدی باشید خدا به همراهتون.
