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

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

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

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

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

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

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

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

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

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

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

قيمة مطلقة حجم ثابت من وحدة البكسل ( 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>