اگر به دنبال یادگیری فلاتر هستید یا در دوره فلاتر شرکت کردهاید، یکی از اصول پایهای که باید به آن مسلط شوید، استفاده از ویجتهای مختلف برای ساخت رابط کاربری است. یکی از ویجتهای اساسی و پراستفاده در فلاتر، ویجت Row است. در این مقاله به بررسی ویجت Row در فلاتر خواهیم پرداخت و نحوه استفاده از آن را به طور جامع توضیح خواهیم داد.
ویجت Row یکی از ویجتهای اصلی در فلاتر است که برای چیدمان افقی عناصر استفاده میشود. با استفاده از این ویجت میتوانید چندین ویجت را به صورت افقی در کنار هم قرار دهید. ویجت Row بسیار منعطف است و میتواند در ترکیب با سایر ویجتها برای ایجاد چیدمانهای پیچیدهتر استفاده شود.
استفاده از ویجت Row بسیار ساده است. در ادامه به یک مثال ساده برای ایجاد یک Row با سه دکمه میپردازیم:
در این مثال، یک ویجت Row ایجاد شده است که شامل سه دکمه است. هر دکمه با استفاده از ویجت ElevatedButton ساخته شده و درون Row قرار گرفته است.
خصوصیت children مهمترین خصوصیت ویجت Row است که لیستی از ویجتها را به عنوان فرزندان Row میپذیرد. این ویجتها به ترتیب در کنار یکدیگر قرار میگیرند.
خصوصیت mainAxisAlignment نحوه چیدمان ویجتها را در محور اصلی (افقی) تعیین میکند. مقادیر مختلفی مانند MainAxisAlignment.start, MainAxisAlignment.center, MainAxisAlignment.end, MainAxisAlignment.spaceBetween, MainAxisAlignment.spaceAround, و MainAxisAlignment.spaceEvenly را میپذیرد.
خصوصیت crossAxisAlignment نحوه چیدمان ویجتها را در محور متقاطع (عمودی) تعیین میکند. مقادیر مختلفی مانند CrossAxisAlignment.start, CrossAxisAlignment.center, CrossAxisAlignment.end, و CrossAxisAlignment.stretch را میپذیرد.
خصوصیت mainAxisSize اندازه Row را در محور اصلی تعیین میکند. این خصوصیت دو مقدار MainAxisSize.max و MainAxisSize.min را میپذیرد. مقدار MainAxisSize.max به Row اجازه میدهد که فضای موجود را به طور کامل اشغال کند، در حالی که مقدار MainAxisSize.min فقط فضای مورد نیاز برای محتوای Row را استفاده میکند.
خصوصیت textDirection جهت چیدمان متن را تعیین میکند. مقادیر TextDirection.ltr (چپ به راست) و TextDirection.rtl (راست به چپ) را میپذیرد.
خصوصیت verticalDirection جهت عمودی چیدمان ویجتها را تعیین میکند. مقادیر VerticalDirection.up و VerticalDirection.down را میپذیرد.
خصوصیت textBaseline برای تنظیم خط پایه متن درون ویجتهای Row استفاده میشود. مقادیر TextBaseline.alphabetic و TextBaseline.ideographic را میپذیرد.
در این مثال، دکمهها به صورت افقی و با فاصله مساوی از هم قرار گرفتهاند.
در این مثال، آیکونها در ابتدا و انتهای Row و متن در وسط قرار گرفتهاند.
در این مثال، سه کانتینر با ارتفاعهای مختلف درون Row قرار گرفتهاند و با استفاده از CrossAxisAlignment.start، همگی از بالای Row چیده شدهاند.
نتیجهگیری
ویجت Row یکی از ویجتهای پایهای و بسیار کاربردی در فلاتر است که به شما امکان میدهد ویجتها را به صورت افقی در کنار هم قرار دهید. با استفاده از خصوصیات مختلف این ویجت، میتوانید چیدمانهای متنوع و پیچیدهای را ایجاد کنید و رابط کاربری مورد نظر خود را بسازید. یادگیری نحوه استفاده از ویجت Row و ترکیب آن با سایر ویجتها میتواند به شما در دوره فلاتر کمک کند تا برنامههای حرفهای و کاربرپسند بسازید.
امیدواریم این مقاله به شما در یادگیری و استفاده بهتر از ویجت Row در فلاتر کمک کرده باشد. برای اطلاعات بیشتر و آموزشهای جامعتر، میتوانید به دورههای فلاتر programming show مراجعه کنید و مهارتهای خود را در این فریمورک محبوب افزایش دهید.
