التخطيط الشبكي ( GridLayout )

xlmnxpمنذ 6 سنوات

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

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

التخطيط الشبكي ( GridLayout ) يحدد هذا التخطيط منطقة تخطيط مستطيلة تتكون من أعمدة ( columns ) وصفوف ( rows )

من ثم تقوم بتحديد لكل عنصر صف ( row ) وعمود ( col )

 

يتطلب خاصيتين ليعمل هما 

rows ( يقبل نص للتخطيط ) لتحديد تخطيط الصف
افتراضيًا قيمته "*"
و columns ( يقبل نص للتخطيط ) لتحديد تخطيط الأعمدة
افتراضيًا قيمته "*"

 

ويكتسب عناصرة ( اطفاله ) اربع خصائص هم

row ( يقبل رقم ) لتحديد العمود الخاص بالعنصر يبدا من 0
وcol ( يقبل رقم ) لتحديد الصف الخاص بالعنصر يبدا من 0
وrowSpan ( يقبل رقم ) لتحديد امتداد العنصر في الصفوف ( لصف او صفين او ثلاثة الخ... ) يبدا من 1
وcolSpan ( يقبل رقم ) لتحديد امتداد العنصر في الأعمدة يبدا من 1

 

ماهو نص التخطيط وكيف اكتبة؟

نص التخطيط ( تسمية للتوضيح سوف استخدمها لكامل الدورة ) هو نص تستطيع من خلالة تحديد المساحة المخصصة لكل عمود او صف وعددها

وتفصل بين كل عمود او صف بعلامة فاصلة " 

 

عناصر تحديد المسافة لنص التخطيط

قيمة مطلقة حجم ثابت من وحدة البكسل ( pixel ).

نجمة [*] ياخذ مساحة كبيرة من المتاحة له

ومن خصائصة عند تكون جميع الأعمدة منه ( نجوم [*] ) يقوم بتقسم المساحة بالتساوي على الأعمدة.

auto (تلقائي) يقوم باخذ المساحة التي يحتاجها العنصر.

 

افتراضيًا عند عدم تحديد الصفوف و الأعمدة لتخطيط الشبكة يكون التخطيط عمود واحد نجمة وصف واحد نجمة.

 

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


<GridLayout columns="50, *, auto">

يقوم بإنشاء GridLayout بثلاث اعمدة

العمود الاول مساحتة 50 بيكسل ( Pixel ) ثابت

والعمود الثاني ياخذ المساحة المتبقية 

والعمود الثالث ياخذ المساحة التي تحتاجها عناصر العمود

ونفس الامر على الأعمدة بنفس المنوال

 

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


<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" class="page">
  <GridLayout columns="175,*,auto" rows="*,*">
    <Button row="0" rowSpan="2" col="0" text="عالم البرمجة" />
    <Label row="0" col="2" text="تخطيط الشبكة" textWrap="true" />
    <Label row="0" col="1" text="WhatsApp" />
    <Button row="1" col="1" text="install" />
  </GridLayout>
</Page>

Screenshot_1500959164.thumb.png.bcd17bf36b275586c165ac97faa83513.png

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

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

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