شرح استخدام ويدجت Wrap في فلاتر

في Flutter، يتم استخدام العديد من العناصر لتنظيم العناصر في واجهات المستخدم، مثل Column و Row. ومن بين هذه العناصر، يأتي عنصر Wrap الذي يسمح بتنظيم العناصر في شكل مرن وقابل للتغيير حسب حجم الشاشة وحجم العناصر. وفي هذا المقال، سنتعرف على استخدام عنصر Wrap في Flutter، بالإضافة إلى شرح جميع خصائصه بالتفصيل.

ما هو عنصر Wrap في Flutter؟

عنصر Wrap هو عنصر في Flutter يتيح تنظيم العناصر في شكل مرن. يسمح هذا العنصر بوضع العناصر في صفوف وأعمدة، ويمكن أيضًا للعناصر الانتقال إلى الصف الجديد عندما لا يتسع العنصر في الصف الحالي. ويمكن استخدام العديد من الخصائص لتخصيص عنصر Wrap وتغيير شكله.

“اقرأ أيضاً: شرح استخدام ويدجت StreamBuilder في فلاتر“

خصائص عنصر Wrap في Flutter

فيما يلي شرح لجميع خصائص عنصر Wrap في Flutter، مع توضيح كل خاصية بالاكواد:

1- خاصية crossAxisAlignment:

تستخدم هذه الخاصية لتحديد كيفية تنظيم العناصر داخل عنصر Wrap في محور العرض. يمكن تعيين هذه الخاصية إلى القيمة CrossAxisAlignment.start وهذا يعني أن العناصر سيتم تنظيمها بدءًا من الجهة اليسرى، أو CrossAxisAlignment.center وهذا يعني أن العناصر سيتم تنظيمها بوسط العنصر، أو CrossAxisAlignment.end وهذا يعني أن العناصر سيتم تنظيمها بدءًا من الجهة اليمنى.

Wrap(
  crossAxisAlignment: WrapCrossAlignment.start,
  children: <Widget>[
    // العناصر هنا
  ],
)

2- الخاصية spacing:

تستخدم هذه الخاصية لتحديد المسافة بين العناصر في عنصر Wrap.

Wrap(
  spacing: 8.0,
  children: <Widget>[
    // العناصر هنا
  ],
)

3- الخاصية runSpacing:

تستخدم هذه الخاصية لتحديد المسافة بين الصفوف في عنصر Wrap.

Wrap(
  runSpacing: 8.0,
  children: <Widget>[
    // العناصر هنا
  ],
)

“اقرأ أيضاً: شرح استخدام ويدجت ClipOval في فلاتر“

4- الخاصية runAlignment:

تستخدم هذه الخاصية لتحديد كيفية تنظيم الصفوف داخل عنصر Wrap في محور العرض. يمكن تعيين هذه الخاصية إلى القيمة WrapAlignment.start وهذا يعني أن الصفوف سيتم تنظيمها بدءًا من الجهة العلوية، أو WrapAlignment.center وهذا يعني أن الصفوف سيتم تنظيمها بوسط العنصر، أو WrapAlignment.end وهذا يعني أن الصفوف سيتم تنظيمها بدءًا من الجهة السفلية.

Wrap(
  runAlignment: WrapAlignment.start,
  children: <Widget>[
    // العناصر هنا
  ],
)

5- الخاصية textDirection:

تستخدم هذه الخاصية لتحديد اتجاه النص في عنصر Wrap. يمكن تعيين هذه الخاصية إلى القيمة TextDirection.ltr وهذا يعني أن النص سيتم عرضه من اليسار إلى اليمين، أو TextDirection.rtl وهذا يعني أن النص سيتم عرضه من اليمين إلى اليسار.

Wrap(
  textDirection: TextDirection.ltr,
  children: <Widget>[
    // العناصر هنا
  ],
)

6- الخاصية verticalDirection:

تستخدم هذه الخاصية لتحديد اتجاه الصفوف في عنصر Wrap. يمكن تعيين هذه الخاصية إلى القيمة VerticalDirection.up وهذا يعني أن الصفوف سيتم عرضها من الأسفل إلى الأعلى، أو VerticalDirection.down وهذا يعني أن الصفوف سيتم عرضها من الأعلى إلى الأسفل.

Wrap(
  verticalDirection: VerticalDirection.up,
  children: <Widget>[
    // العناصر هنا
  ],
)

مثال على استخدام Wrap في Flutter:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wrap Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Wrap Example'),
        ),
        body: Center(
          child: Wrap(
            spacing: 8.0,
            runSpacing: 4.0,
            children: <Widget>[
              Chip(
                avatar: CircleAvatar(
                  backgroundColor: Colors.blue.shade900,
                  child: const Text('AH'),
                ),
                label: const Text('Ahmed'),
              ),
              Chip(
                avatar: CircleAvatar(
                  backgroundColor: Colors.blue.shade900,
                  child: const Text('SM'),
                ),
                label: const Text('Sami'),
              ),
              Chip(
                avatar: CircleAvatar(
                  backgroundColor: Colors.blue.shade900,
                  child: const Text('MA'),
                ),
                label: const Text('Mohammed'),
              ),
              Chip(
                avatar: CircleAvatar(
                  backgroundColor: Colors.blue.shade900,
                  child: const Text('AA'),
                ),
                label: const Text('Ali'),
              ),
              Chip(
                avatar: CircleAvatar(
                  backgroundColor: Colors.blue.shade900,
                  child: const Text('MA'),
                ),
                label: const Text('Mona'),
              ),
              Chip(
                avatar: CircleAvatar(
                  backgroundColor: Colors.blue.shade900,
                  child: const Text('FA'),
                ),
                label: const Text('Fatima'),
              ),
              Chip(
                avatar: CircleAvatar(
                  backgroundColor: Colors.blue.shade900,
                  child: const Text('AA'),
                ),
                label: const Text('Aisha'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

في هذا المثال، استخدمنا عنصر Wrap لتنظيم عناصر Chip في شكل مرن وقابل للتغيير. استخدمنا الخصائص spacing و runSpacing لتحديد المسافة بين العناصر والصفوف، على التوالي. ويتم عرض النتيجة في الصورة التالية:

يمكنك ملاحظة كيف تم تنظيم العناصر بشكل أفقي ورأسي في عنصر Wrap، مما يسمح بعرض العناصر بشكل جميل ومرن.

“اقرأ أيضاً: شرح استخدام ويدجت RadioListTile في فلاتر“

عنصر Wrap هو عنصر في Flutter يتيح للمطورين تنظيم العناصر بشكل مرن وقابل للتغيير حسب حجم الشاشة وحجم العناصر. يمكن استخدام العديد من الخصائص لتخصيص عنصر Wrap وتغيير شكله وتنظيم العناصر بشكل مرن. يتضمن هذه الخصائص: crossAxisAlignment، spacing، runSpacing، runAlignment، textDirection، و verticalDirection. يمكن استخدام عنصر Wrap في تصميم واجهات المستخدم بشكل فعال وسهل.