التخطيط المرن ( FlexboxLayout )

xlmnxpمنذ 6 سنوات

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

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

التخطيط المرن ( flex layout ) كما يوحي اسمه فهو تخطيط يعطيك مرونة اكثر في تخطيط الواجهه

فهو يستخدم نظام شبيه جدًا لمرونة استخدام flex في CSS

 

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

flexDirection  لتحديد اتجاه المرونة للتخطيط يقبل القيم التالية

row ( افتراضيًا ) تخطيط صفوف
row-reverse تخطيط صفوف معكوس ( من اخر عنصر الى اول عنصر )
column تخطيط اعمدة
column-reverse تخطيط اعمدة معكوس ( من اخر عنصر الى اول عنصر )

flexWrap  التفاف العناصر على السطور

nowrap (افتراضيًا) جميع العناصر تكون في سطر واحد
wrap التفاف العناصر على عدة اسطر ( مماثل لتخطيط WrapLayout ) عندما يمتلى السطر ولا توجد مساحة للعنصر التالي فاينزل العنصر تلقائيًا من الاعلى الى الاسفل
wrap-reverse مماثل لـ Wrap , الاختلاف : عندما يمتلئ السطر ولاتجود مساحة للعنصر التالي فايرتفع العنصر تلقائيًا للأعلى من الاسفل الى الأعلى

justifyContent  للتحكم بمحاذات العناصر داخل التخطيط

flex-start (افتراضيًا) في بداية التخطيط
flex-end في نهاية التخطيط
center في منتصف التخطيط
space-between اول عنصر يكون في بداية التخطيط واخر عنصر يكون في نهاية التخطيط وباقي العناصر يتم تقسم المساحة عليها بالتساوي
space-around يتم توزيع المساحة بالتساوي على جميع العناصر مع مساحة على الأطراف ( المسافة التي بينهم غير متساوية )
space-evenly يتم توزيع المساحة بحيث يتباعد كل عنصرين (مع المساحة على الأطراف) بالتساوي ( المسافة الفاصلة بينهم متساوية )

alignItems  محاذات العناصر على المحور

flex-start ببداية المحور
flex-end بنهاية المحور
center بمنتصف المحور
baseline محاذات العناصر بالنصوص ( للأسف لا تستطيع إستخدامها في nativescript )
stretch ( افتراضيًا ) كامل ارتفاع التخطيط

alignContent  لمحاذات الاسطر داخل التخطيط

flex-start جميع الاسطر تكون في بداية التخطيط
flex-end جميع الأسطر تكون في نهاية التخطيط
center جميع الأسطر تكون في منتصف التخطيط
space-between اول سطر يكون في بداية التخطيط واخر سطر يكون في منتصف التخطيط وباقي المسافات الفارغة في التخطيط بين الأسطر يتم تقسيمها بالتساوي
space-around يتم تقسيم المسافة الفارغة في التخطيط بالتساوي على جميع الاسطر والحواف
stretch ( افتراضيًا ) الأسطر تمتد لتاخذ كامل المساحة الفارغة

 

خصائص عناصر التخطيط

order اولوية ترتيب العنصر في التخطيط  ( افتراضيًا يتم توزيع العناصر بترتيبها في التخطيط )

flexGrow  ( افتراضيًا هو 1 يعرف التخطيط بان العنصر ينموا

flexShrink  ( افتراضيًا هو 1 يعرف التخطيط بان العنصر يتقلص

alignSelf ( افتراضيًا هي تتبع align-items المعرف في التخطيط تقوم بإضافة محاذاه للعنصر نفسه في التخطيط ( للتنويه استخدامها محدود مع نظام iOS )

flexWrapBefore تقبل true و false ( افتراضيًا هي false ) تقوم بالسماح للعنصر بالألتفاف داخل التخطيط

 

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


<Page xmlns="http://schemas.nativescript.org/tns.xsd">
    <FlexboxLayout flexDirection="column">
        <!-- Reverse the natural flow of items -->
        <FlexboxLayout height="22" flexDirection="row-reverse">
            <!-- Use even flexGrow to achieve uniform grid -->
            <Label text="1" backgroundColor="#EEEEEE" flexGrow="1" />
            <Label text="2" backgroundColor="#DDDDDD" flexGrow="1" />
            <Label text="3" backgroundColor="#CCCCCC" flexGrow="1" />
            <Label text="4" backgroundColor="#BBBBBB" flexGrow="1" />
            <Label text="5" backgroundColor="#AAAAAA" flexGrow="1" />
            <Label text="6" backgroundColor="#999999" flexGrow="1" />
        </FlexboxLayout>

        <!-- Set flexGrow to accomodate into any extra space -->
        <ScrollView flexGrow="1">

            <!-- Wrap excessive items on new lines -->
            <FlexboxLayout flexWrap="wrap" alignContent="flex-start">

                <Label textWrap="true" text="أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ." />

                <!-- Use flexWrapBefore to control explicit line wrapping -->
                <Label text="Gihub issue labels:" flexWrapBefore="true" fontSize="11" />

                <Label text="S: High" flexWrapBefore="true" borderRadius="5" backgroundColor="red" margin="2" />
                <Label text="T: Feature" borderRadius="5" backgroundColor="green" margin="2"/>
                <Label text="3 - In Progress" borderRadius="5" backgroundColor="gray" margin="2"/>
                <Label text="S: Ullamcorper" borderRadius="5" backgroundColor="red" margin="2" />
                <Label text="T: Vulputate" borderRadius="5" backgroundColor="green" margin="2"/>
                <Label text="2 - Egestas magna" borderRadius="5" backgroundColor="gray" margin="2"/>
                <Label text="S: High" borderRadius="5" backgroundColor="red" margin="2" />
                <Label text="T: Phasellus" borderRadius="5" backgroundColor="green" margin="2"/>
                <Label text="عالم البرمجة" borderRadius="5" backgroundColor="gray" margin="2" order="2"/>

                <Label flexWrapBefore="true" textWrap="true" text="أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ." id="description" />
            </FlexboxLayout>
        </ScrollView>
        <FlexboxLayout>
            <Button text="&lt;" width="50" backgroundColor="gray" />
            <!-- Set flexGrow to 1 accomodate into any extra space -->
            <Button text="إعادة النشاط" flexGrow="1" backgroundColor="darkgray" />
            <Button text="&gt;" width="50" backgroundColor="gray" />
        </FlexboxLayout>
    </FlexboxLayout>
</Page>

Screenshot_1501392469.thumb.png.fab96b4021cf4f0796f8f7aa2c6c8d00.png

مصدر A Complete Guide to Flexbox

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

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

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