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

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

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

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

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

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

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

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

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

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

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

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

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>

مصدر A Complete Guide to Flexbox