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

xlmnxpمنذ 6 سنوات

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

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

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

 

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

orientation التوجية وتقبل قيمتين هما horizontally أفقيا و vertically رأسيا افتراضيًا هو horizontally
وitemWidth يستخدم لتحديد عرض العنصر في التخطيط
وitemHeight يستخدم لتحديد ارتفاع العنصر في التخطيط


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


<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>

Screenshot_1501025541.thumb.png.457cd4dc3729c2be6a64adbd75592647.png

بإستخدام خاصية 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>

Screenshot_1501025554.thumb.png.6e4688b439beafeb871a98e7a4198e35.png

بإستخدام 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>

Screenshot_1501025604.thumb.png.8290a17f0a0e743a7811f7cc8419061f.png

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !