کار با ویجت row در فریموورک فلاتر Flutter

در مطالب قبلی با نحوه کار کردن column در فلاتر آشنا شدیم و در ادامه قصد داریم امروز با ویجت row  آشنا بشیم که برای طراحی رابط کاربری اپلیکیشن کاربرد بسیار زیادی دارد و جزو ویجت های لایه ای در فلاتر است.

لایه row عناصر ما را به شکل ردیفی کنار هم قرار میدهد. یعنی هر چند تا عنصر یا ویجت داشته باشیم به ترتیب کد نویسی در کنار هم بروی محور افقی تشکیل یک ردیف را می دهند.

این لایه محدودیتی برای دریافت فرزند ندارد و لیستی از ویجت های مختلف را به عنوان فرزند قبول میکند.

Row(
  children: [
    Container(
      color: Colors.orange,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
    Container(
      color: Colors.blue,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
    Container(
      color: Colors.purple,
      child: FlutterLogo(
        size: 60.0,
      ),
    ),
  ],
)

کد بالا سه آیکون با پس زمینه رنگ های مختلف و ایجاد میکنه که داخل لایه row قرار میگیرند به همین دلیل مثل تصویر زیر این آیکون ها کنار هم نمایش داده می شوند.

مثل لایه column در row هم ویژگی مهمی به نام CrossAxis  وجود داره. کار این CrossAxis  تعیین محل قرارگیری ویجت ها می باشد که برای مثال وسط صفحه, پایین یا بالا باشند. قرارگیری در این ویژگی روی محور فرعی میباشد که در این مثال محور عمودی محور فرعی است.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      color: Colors.blue,
      height: 50.0,
      width: 50.0,
    ),
    Icon(Icons.adjust, size: 50.0, color: Colors.pink),
    Icon(Icons.adjust, size: 50.0, color: Colors.purple,),
    Icon(Icons.adjust, size: 50.0, color: Colors.greenAccent,),
    Container(
      color: Colors.orange,
      height: 50.0,
      width: 50.0,
    ),
    Icon(Icons.adjust, size: 50.0, color: Colors.cyan,),
  ],
);

عبارت crossAxisAlignment: CrossAxisAlignment.start تعیین می کند که ویجت های ما در بالای صفحه که شروع لایه هست قرار بگیرند.

• crossAxisAlignment: CrossAxisAlignment.end قرار گیری در انتهای صفحه
• crossAxisAlignment: CrossAxisAlignment.center قرار گیری در وسط صفحه

ویژگی MainAxisAlignment نحوه قرارگیری عناصر در محور اصلی را مشخص میکند.

برای مثال محور اصلی در ویجت row محور افقی میباشد و اگر از ویژگی MainAxisAlignment.center استفاده کنیم عناصر مورد نظر در مرکز محور قرارمیگیرند. همانند تصویر زیر:

ویژگی MainAxisAlignment.spaceAround باعث میشود عناصر با یک فاصله ثابت از یکدیگر قرار گیرند که ترتیب خاصی به نحوه قرارگیری آنها میدهد.

ویژگی MainAxisAlignment.spaceBetween همانند حالت قبل است اما در این مورد عناصر اول و آخر فاصله از دو طرف صفحه ندارند و به انتهای راست و چپ صفحه نمایش متصل میشوند.

با استفاده از ویجت های لایه ای امکان ساخت رابط کاربری های پیچیده را پیدا میکنید و با ترکیب کردن آنها میتوانید هر طراحی که مد نظرتان است را انجام دهید.