کنترل FlexLayout در زامارین فرم

در نگارش های اخیر زامارین فرم کنترل FlexLayout معرفی شده است که بسیار انعطاف پذیر می باشد. این کنترل همانند سایر کنترل های از css پشتیبانی میکند و بسیار قدرتمند می باشد.

کنترل FlexLayout از جهاتی شبیه StackLayout می باشد که می توانست کنترل های فرزندش را به طور افقی یا عمودی به صورت پشت سر هم بچیند. اما FlexLayout قابلیت های بیشتری دارد. مثلا اگر تعداد کنترل های فرزند خیلی زیاد بود و بیشتر از یک ردیف یا ستون بود می تواند منعطف باشد. کنترل FlexLayout کلی تنظیمات برای Orientation و Alignment دارد. همچنین می تواند به سایز صفحه واکنش نشان دهد و متناسب با آن بهینه شود.

مثال ساده ای از کنترل را در زیر می بینید:

آموزش فارسی FlexLayout
آموزش فارسی FlexLayout

کد تصویر بالا به صورت زیر می باشد:

آموزش زامارین فارسی

خاصیت Direction جهت چیدمان را مشخص می کند. ۴ حالت دارد که عبارتند از Column, ColumnReverse, Row, RowReverse.

Reverse کنترل های فرزند را از آخر به اول چیدمان میکند و بسته به افقی یا عمودی بودن فرق میکند. خاصیت Direction  به صورت پیش فرض روی Row تنظیم شده است.

خاصیت AlignItems کار تراز کردن را انجام می دهد. مزیت این خاصیت در مقابل خاصیت معادل آن در Stacklayout یعنی HorizontalOptions این هست که بر همه فرزندان اعمال می شود. این یعنی کد تمیزتر و کمتر. و مدیریت راحت تر.

با توجه به اینکه خاصیت AlignItems به همه ی فرزندان اعمال می شود اگر بخواهیم کنترل فرزندی را از این امر مستثنا کنیم باید از خاصیت FlexLayout.AlignSelf برای آن کنترل استفاده کنید.

 

کنترل قابلیت های بسیاری دارد. نمونه های از کاربردهای آن را در تصاویر زیر می بینید.

ساخت کاتالوگ با قابلیت اسکرول افقی در زامارین فرم

 

ساخت گالری تصاویر منعطف در زامارین فرم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *