التخطيط الدوراني ( WrapLayout )

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

هذا التخطيط يقوم بترتيب العناصر حسب المساحة المتوفرة ويبدًا صف جديد عندما تكون المساحة غير كافية للعنصر

خصائص التخطيط

مثال على التخطيط

<Page xmlns="http://schemas.nativescript.org/tns.xsd">
  <WrapLayout orientation="horizontal" width="210" height="210" style.backgroundColor="lightgray">
    <Button text="تخطيط" width="70" height="70" backgroundColor="red"/>
    <Button text="الدوران" width="70" height="70" backgroundColor="green"/>
    <Button text="عالم" width="70" height="70" backgroundColor="blue"/>
    <Button text="البرمجة" width="70" height="70" backgroundColor="yellow"/>
  </WrapLayout>
</Page>

بإستخدام خاصية orientation راسي vertical

<Page xmlns="http://schemas.nativescript.org/tns.xsd">
  <WrapLayout orientation="vertical" width="210" height="210" style.backgroundColor="lightgray">
    <Button text="تخطيط" width="70" height="70" backgroundColor="red"/>
    <Button text="الدوران" width="70" height="70" backgroundColor="green"/>
    <Button text="عالم" width="70" height="70" backgroundColor="blue"/>
    <Button text="البرمجة" width="70" height="70" backgroundColor="yellow"/>
  </WrapLayout>
</Page>

بإستخدام itemWidth و itemHeight

<Page xmlns="http://schemas.nativescript.org/tns.xsd">
  <WrapLayout orientation="vertical" itemWidth="50" itemHeight="50" width="210" height="210" style.backgroundColor="lightgray">
    <Button text="تخطيط" width="70" height="70" backgroundColor="red"/>
    <Button text="الدوران" width="70" height="70" backgroundColor="green"/>
    <Button text="عالم" width="70" height="70" backgroundColor="blue"/>
    <Button text="البرمجة" width="70" height="70" backgroundColor="yellow"/>
  </WrapLayout>
</Page>