آموزش ظروف طرح بندی در NativeScript

آموزش ظروف طرح بندی  در NativeScript

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش ظروف طرح بندی در NativeScript خواهیم پرداخت.

NativeScript مجموعه ای از مولفه های ظرف را فقط با هدف تعیین مولفه ویجت UI فراهم می کند.  ظروف طرح بندی  به عنوان جز اصلی عمل می کنند و می توانند یک یا چند جز کودک داشته باشند. کلیه اجزای کودک یک ظرف چیدمان را می توان بر اساس تکنیک ارائه شده توسط ظرف چیدمان والدین آن ترتیب داد.

NativeScript از شش  ظروف طرح بندی پشتیبانی می کند و آنها به شرح زیر است –

• Absolute layout container
• Dock layout container
• Grid layout container
• Stack layout container
• Wrap layout container
• FlexBox layout container

اجازه دهید تمام مفاهیم ظرف طرح را در این فصل با جزئیات بیاموزیم.

طرح بندی مطلق

ظرف AbsoluteLayout ساده ترین ظرف طرح در NativeScript است. AbsoluteLayout هیچ محدودیتی برای فرزندان خود اعمال نمی کند و فرزندان خود را با استفاده از سیستم مختصات ۲ بعدی با گوشه بالا سمت چپ به عنوان مبدا در داخل خود قرار می دهد.

AbsoluteLayout از چهار ویژگی فرزندان خود برای قرار دادن آنها استفاده می کند و آنها به شرح زیر است –

• top – محل قرارگیری کودک را از مبدا به سمت پایین و در جهت y تعریف می کند.
• left – محل قرارگیری کودک از ابتدا را تعریف می کند که در جهت x به پهلو حرکت می کند.
• width – عرض کودک را مشخص می کند.
• height– قد کودک را مشخص می کند.

اجازه دهید ظرف AbsoluteLayout را در صفحه اصلی برنامه خود به شرح زیر اضافه کنیم –

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 

<AbsoluteLayout width="200" height="300" backgroundColor="blue"> 
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label> 
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label> 
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label> 
</AbsoluteLayout>

خروجی

خروجی AbsoluteLayout به شرح زیر است:

طرح بندی DockLayout

مولفه کانتینر Docklayout فرزندانش را قادر می سازد تا درون آن لنگر بیندازند. هر طرف ظرف (بالا ، پایین ، چپ ، راست) می تواند یک مولفه کودک را لنگر اندازد. کانتینر DockLayout از ویژگی بارانداز فرزندان خود برای اتصال درست آنها استفاده می کند.

مقادیر احتمالی ویژگی بارانداز به شرح زیر است –

• top– کانتینر چیدمان اجزای کودک را در گوشه بالا متصل می کند.
• bottom – ظرف چیدمان ، م childلفه کودک را در گوشه پایین متصل می کند.
• left – ظرف چیدمان مayلفه کودک را در گوشه سمت چپ متصل می کند.
• right  – کانتینر چیدمان اجزای کودک را در گوشه سمت راست متصل می کند.

به طور پیش فرض ، کانتینر DockLayout آخرین م childلفه فرزند خود را بارگیری می کند. این می تواند با صفر قرار دادن ویژگی stretchLastChild خود را لغو کند.

اجازه دهید ظرف DockLayout را در صفحه اصلی برنامه خود به شرح زیر اضافه کنیم –

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false"> 
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label> 
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label> 
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label< 
   <Label text="bottom" dock="bottom" height="50" 
   backgroundColor="orange"></Label> 
</DockLayout>

خروجی

در زیر خروجی DockLayout آورده شده است –

طرح بندی شبکه

مولفه کانتینر GridLayout یکی از کانتینرهای طرح پیچیده است و عناصر کودک را در قالب جدول با سطرها و ستونها مرتب می کند. به طور پیش فرض ، یک ردیف و یک ستون دارد. این ویژگی های زیر را دارد –

ستون ها – برای نشان دادن عرض پیش فرض هر ستون جدا شده با ، استفاده می شود. مقادیر ممکن عبارتند از عدد ، * و کلمه کلیدی خودکار.

جایی که،

تعداد ، عرض ستون مطلق را نشان می دهد.

عرض ستون را نسبت به ستون های دیگر نشان می دهد. قبل از آن می توان عدد را نشان داد تا عرض ستون چند برابر نسبت به ستون دیگر باشد. به عنوان مثال ، ۲ * عرض ستون را باید ۲ برابر عرض کوچکترین ستون نشان دهد.

خودکار عرض ستون را به اندازه بزرگترین فرزند آن نشان می دهد.

به عنوان مثال ، * ، ۲ * به معنای دو ستون است و اندازه دوم دو برابر ستون اول است.

• سطرها – برای نشان دادن ارتفاع پیش فرض هر ردیف جدا شده با ، استفاده می شود. نمایش مقدار مشابه ستون ها است.
• GridLayout از ویژگی های مشخص شده زیر برای فرزندان خود برای چیدمان آنها استفاده می کند –
• row – شماره ردیف
• col – شماره ستون
• rowSpan – تعداد کل ردیفی که محتوای کودک در یک طرح قرار دارد.
• colSpan – تعداد کل ستون هایی که محتوای کودک در یک طرح قرار دارد.

اجازه دهید ظرف GridLayout را در صفحه اصلی برنامه خود به صورت زیر اضافه کنیم –

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue"> 
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label> 
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label> 
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label> 
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label> 
</GridLayout>

خروجی

در زیر خروجی GridLayout آورده شده است –

طرح بندی StackLayout

StackLayout کودکان خود را به صورت افقی یا عمودی در یک خط یک بعدی سازمان می دهد. با استفاده از گزینه های طرح بندی می توان اندازه آن را بر اساس فضای طرح قرار داد. دارای ویژگی جهت گیری است که می تواند برای تعیین جهت ، افقی یا عمودی استفاده شود.

اجازه دهید ظرف StackLayout را در صفحه اصلی برنامه خود به شرح زیر اضافه کنیم –

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue"> 
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label> 
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label> 
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label> 
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label> 
</StackLayout>

خروجی

خروجی StackLayout مطابق شکل زیر است –

طرح بندی WrapLayout

WrapLayout برای بسته بندی مطالب روی سطرها یا ستون های جدید استفاده می شود.

این سه ویژگی زیر را دارد –

• جهت گیری – به صورت افقی یا عمودی نمایش داده می شود.
• itemWidth – عرض طرح برای هر کودک.
• itemHight – قد طرح برای هر کودک.

اجازه دهید ظرف WrapLayout را در صفحه اصلی برنامه خود به شرح زیر اضافه کنیم –

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label> 
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label 
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label> 
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label> 
</WrapLayout>

خروجی

طرح بندی Flexbox

مولفه کانتینر FlexboxLayout یکی از ظرف های چیدمان پیشرفته است. این گزینه برای ارائه طرح بندی ساده به طرح بندی بسیار پیچیده و پیچیده فراهم می کند. این برنامه براساس CSS Flexbox ساخته شده است.

مولفه FlexboxLayout دارای خواص زیادی است و آنها به شرح زیر است –

flexDirection

این نشان دهنده جهتی است که اجزای کودک در آن چیده شده اند. مقادیر احتمالی flexDirection به شرح زیر است –

• row – اجزای کودک در کنار هم قرار گرفته اند.
• row-reverse – اجزای کودک در کنار هم اما در جهت معکوس قرار گرفته اند.
• column – اجزای کودک در زیر یکدیگر قرار گرفته اند.
• column-reverse – اجزای کودک در زیر یکدیگر قرار گرفته اند اما در جهت معکوس قرار دارند.

اجازه دهید ظرف FlexLayout را در صفحه اصلی برنامه خود به شرح زیر اضافه کنیم –

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="row"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

خروجی

در زیر خروجی FlexLayout – Row –

حال ، اجازه دهید مقدار flexDirection را از سطر به سطر معکوس تغییر دهیم و بررسی کنیم که چگونه بر طرح تأثیر می گذارد.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <FlexboxLayout flexDirection="row-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

خروجی

در زیر خروجی Flex Layout – Row Reverse – آورده شده است

بگذارید مقدار flexDirection را از row-reverse به column تغییر دهیم و بررسی کنیم که چگونه بر طرح تأثیر می گذارد.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

خروجی

خروجی برای FlexLayout – ستون در زیر آورده شده است –

بگذارید مقدار flexDirection را از ستون به ستون معکوس تغییر دهیم و بررسی کنیم که چگونه بر طرح تأثیر می گذارد.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

خروجی

در زیر خروجی FlexLayout – ستون معکوس –

flexWrap

این نشان می دهد که آیا اجزای کودک در یک ردیف / ستون واحد رندر می شوند یا با قرار دادن در جهت تعیین شده توسط flexDirection به چندین ردیف جریان می یابند.

مقادیر ممکن به شرح زیر است –

• wrap – اگر فضایی در جهت داده شده در دسترس نباشد ، اجزای کودکان را می پیچد.
• wrap-reverse – همان بسته بندی است به جز جریان جز component در جهت مخالف.

اجازه دهید ویژگی flexWrap را اضافه کنیم و سپس مقدار آن را به صورت wrap تنظیم کنیم. همچنین سه کودک دیگر به شرح زیر اضافه کنید –

<ActionBar> 
   <Label text="Home"></Label> 
&tl;/ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label>
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

خروجی

در زیر خروجی flexWrap آورده شده است –

justifyContent

این نحوه چیدمان اجزای کودک با توجه به یکدیگر و ساختار کلی را نشان می دهد. این سه ویژگی دارد که در زیر مشخص شده است –

• flex-end – کامپوننت کودک را به سمت خط انتهایی بسته می کند.
• space-between – با توزیع یکنواخت در صف ، جز the کودک را بسته بندی می کند.
• space-around – مشابه فضای بینابین با این تفاوت که با توزیع یکنواخت در خط و همچنین فضای برابر در اطراف آنها ، جز component کودک را بسته بندی می کند.

اجازه دهید ما justifyContent را نیز اضافه کنیم و نحوه رفتار آن را بررسی کنیم –

<ActionBar> 
   <Label text="Home"></Label>
</ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap" justifyContent="space-around"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

خروجی

در زیر خروجی Flex Layout آورده شده است – JustifyContent –

ظرف FlexLayout دو ویژگی دیگر برای تعیین ترتیب و توانایی کوچک شدن در اختیار فرزند ها خود قرار می دهد. آنها به شرح زیر هستند –

order – این ترتیب را تعیین می کند که در آن فرزند ها ظرف FlexLayout ارائه می شوند.

flexShrink – توانایی کوچک شدن فرزند ها در سطح ۰ را تعیین می کند.

منبع.

لیست جلسات قبل آموزش NativeScript

1. آموزش NativeScript
2. معرفی NativeScript
3. آموزش نصب NativeScript
4. آموزش معماری NativeScript
5. آموزش برنامه Angular در NativeScript
6. آموزش تمپلیت ها در NativeScript
7. آموزش ویجت ها در NativeScript