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

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

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

ویجت Row در فلاتر یک ویجت محاذب‌کننده‌ست که اجازه می‌دهد ابزارها و ویجت‌ها را در یک خط افقی قرار دهید. با استفاده از Row می‌توانید چندین ویجت را در یک ردیف قرار داده و آن‌ها را به صورت زنده یا به صورت تساوی عرضی یا با در نظر گرفتن فضاهای مشخصی نمایش دهید.

به طور کلی، ویژگی‌های اصلی و کاربردهای Row عبارتند از:

1. محاذبه‌کننده افقی: Row برای قرار دادن ویجت‌ها در یک خط افقی مفید است. این امکان را به شما می‌دهد که ابزارها و المان‌ها را به صورت موازی در یک خط قرار دهید و نظم به طراحی بدهید.
   
2. مدیریت فضاها: Row اجازه می‌دهد با استفاده از ویژگی‌های مختلفی نظیر mainAxisAlignment و crossAxisAlignment به تنظیم فضاها بین المان‌ها ویجت‌ها پرداخته و آن‌ها را بر اساس محور اصلی (افقی) و محور متقابل (عمودی) مرتب کنید.
   
3. راست به چپ: در زبان‌هایی که از چپ به راست هستند (مانند فارسی)، ویجت Row بسیار کارآمد است، زیرا می‌توانید المان‌ها را از چپ به راست نمایش دهید.
   
4. کاربردهای گوناگون: Row به عنوان جزءی از ترکیبات کاربردی تر با ویجت‌های دیگر مانند Expanded، Flexible و Spacer به کار می‌رود. با استفاده از این ترکیبات، می‌توانید طرح‌های پیچیده‌تری ایجاد کنید و ویژگی‌های طراحی خود را بهبود بخشید.
   
5. جمع‌آوری ویجت‌ها: Row به عنوان یک وسیله‌ای برای گروه‌بندی چند ویجت در یک خط استفاده می‌شود. این امکان را به شما می‌دهد که المان‌های مشابه یا ذاتی را در یک ردیف نمایش دهید.

پیاده سازی ویجت 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 همانند حالت قبل است اما در این مورد عناصر اول و آخر فاصله از دو طرف صفحه ندارند و به انتهای راست و چپ صفحه نمایش متصل میشوند.

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

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