مدخل الى التخطيطات ( Layouts ) في NativeScript

xlmnxpمنذ 6 سنوات

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

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

التخطيطات ( Layouts ) في NativeScript تنقسم الى 6 انظمة تخطيط مشابه لـ display في CSS

مهمتها تخطيط واجهة التطبيق مثل وضع النص على اليمين والزر على اليسار ويكون باسفلة صورة مثلًا الخ...

 

انواع التخطيطات ( Layouts )

AbsoluteLayout

انتقل للشرح

في هذا التخطيط تحتاج لتحديد لكل عنصر قيمة top وقيمة left absoluteLayoutPage.png.e08915adde8e76fcfd811295e2b77231.png

DockLayout

انتقل للشرح

هذا التخطيط يرتب عناصرة على حوافه الخارجية ويسمح للعنصر الأخير بتولي المساحة المتبقية في المنتصف dockLayoutPage.png.92f2315e48ab3085d7012c87ac02ead2.png

GridLayout

انتقل للشرح

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

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

gridLayoutPage.png.a6b8a4593cdf5091a1c5a257236bbd83.png

StackLayout

انتقل للشرح


هذا التخطيط يرتب عناصرة أفقيا ( horizontally ) أو رأسيا ( vertically ) . يتم تعيين الاتجاه مع خاصية التوجه ( orientation ) .
stackLayoutPage.png.6171bb75248c63b1c143d80cd74b0b2f.png

WrapLayout

انتقل للشرح

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

 

wrapLayoutPage.png.ec7ba58ee922bbceeeb786108add601b.png

FlexboxLayout

انتقل للشرح

هذا التخطيط هو تنفيذ غير مطابقة لتخطيط Flexible Box Layout في CSS

flexboxLayoutPage.png.824eee24f775d0a3524978af3537e23d.png

 

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

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

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