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

ويدجت ListView في Flutter هو عنصر واجهة مستخدم يستخدم لعرض قائمة من البيانات بشكل متمركز وقابل للتمرير في جميع الاتجاهات. في هذا المقال سنتعرف على جميع خصائص ويدجت ListView في Flutter وكيفية استخدامه في تطبيقات Flutter. سنتعلم أيضًا بعض النصائح والحيل لتحسين أداء تمرير القوائم وتجنب المشاكل المتعلقة بالأداء. فلنبدأ!

ما هو ويدجت ListView في Flutter؟

يستخدم ListView لإنشاء قوائم من العناصر التي يمكن للمستخدم التمرير من خلالها بسلاسة. يمكن استخدام ListView لإنشاء قوائم بسيطة أو متعددة الأعمدة، ويمكن استخدام أنواع مختلفة من ListView لتلبية احتياجات تطبيقك المحددة.

تتيح Flutter للمطورين إنشاء تطبيقات متعددة المنصات باستخدام لغة برمجة واحدة، مما يتيح لهم تطوير تطبيقات عالية الأداء والجودة في وقت قصير. تعتبر ListView من العناصر الأساسية والأكثر استخدامًا في Flutter، وتضمن تجربة مستخدم مريحة وسلسة.

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

شرح خصائص ويدجت ListView في فلاتر

قبل الشروع في إنشاء ويدجت ListView في تطبيق Flutter، يجب معرفة بعض الخصائص لتحديد مظهر وسلوك القائمة. فيما يلي وصف تفصيلي لكل خاصية.

الخاصية الأولى: children

تستخدم الخاصية “children” لتحديد العناصر التي سيتم عرضها داخل القائمة. يمكن استخدام أي عنصر واجهة مستخدم كـ child، بما في ذلك النص والصور والأزرار وغيرها.

ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

في هذا المثال، تم استخدام عناصر نصية كـ children لعرض العناصر “Item 1” و “Item 2” و “Item 3”.

الخاصية الثانية: padding

تستخدم الخاصية “padding” لتحديد الحشوة داخل القائمة. يمكن استخدام أرقام صحيحة لتعيين مسافات مختلفة.

ListView(
  padding: EdgeInsets.all(16.0),
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

في هذا المثال، تم عمل padding بمقدار 16.0 بكسل لجميع الجوانب.

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

الخاصية الثالثة: scrollDirection

تستخدم الخاصية “scrollDirection” لتحديد اتجاه التمرير داخل القائمة. يمكن استخدام “Axis.vertical” أو “Axis.horizontal” لتحديد اتجاه التمرير.

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

في هذا المثال، تم استخدام اتجاه التمرير الأفقي.

الخاصية الرابعة: physics

تستخدم الخاصية “physics” لتحديد نوع نموذج الفيزياء للتمرير داخل القائمة. يمكن استخدام “BouncingScrollPhysics” أو “ClampingScrollPhysics” أو “AlwaysScrollableScrollPhysics” أو “NeverScrollableScrollPhysics”.

ListView(
  physics: BouncingScrollPhysics(),
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

في هذا المثال، تم استخدام نموذج الفيزياء “BouncingScrollPhysics” الذي يتيح للمستخدم التمرير بشكل طبيعي ويضيف فرامل طفيفة عند الوصول إلى الحدود العلوية والسفلية.

الخاصية الخامسة: shrinkWrap

تستخدم الخاصية “shrinkWrap” لتحديد ما إذا كانت القائمة تتقلص لتناسب عناصرها أم لا. إذا كانت القائمة لا تحتوي على عناصر كثيرة، يمكن استخدام هذه الخاصية لتقليص القائمة وتوفير المزيد من المساحة على الشاشة.

ListView(
  shrinkWrap: true,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

في هذا المثال، تم تحديد خاصية “shrinkWrap” لتقليص القائمة لتناسب عناصرها.

الخاصية السادسة: itemExtent

تستخدم الخاصية “itemExtent” لتحديد الارتفاع الثابت لكل عنصر في القائمة. يمكن استخدام هذه الخاصية إذا كانت جميع العناصر في القائمة لها نفس الارتفاع.

ListView(
  itemExtent: 50.0,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

في هذا المثال، تم استخدام ارتفاع 50.0 بكسل لكل عنصر في القائمة.

الخاصية السابعة: addAutomaticKeepAlives

تستخدم الخاصية “addAutomaticKeepAlives” لتحديد ما إذا كانت العناصر في القائمة تحتفظ بحالتها أثناء التمرير. يمكن استخدام هذه الخاصية لتجنب إعادة تحميل العناصر عند التمرير.

ListView(
  addAutomaticKeepAlives: true,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

في هذا المثال، تم استخدام خاصية “addAutomaticKeepAlives” للسماح للعناصر في القائمة بالحفاظ على حالتها أثناء التمرير.

الخاصية الثامنة: addRepaintBoundaries

تستخدم الخاصية “addRepaintBoundaries” لتحديد ما إذا كانت يجب إنشاء حدود إعادة الرسم لكل عنصر في القائمة. يمكن استخدام هذه الخاصية لتحسين أداء التمرير.

ListView(
  addRepaintBoundaries: true,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

في هذا المثال، تم استخدام خاصية “addRepaintBoundaries” لإنشاء حدود إعادة الرسم لكل عنصر في القائمة لتحسين أداء التمرير.

أنواع مختلفة من ListView

في Flutter، هناك أربعة أنواع مختلفة من ويدجت ListVie وهما:

• ListView.
• ListView.builder.
• ListView.separated.
• ListView.custom.

سنتعرف على كل منها بشكل مفصل فيما يلي.

ListView

تمتلك ListView الخاصية “children” لتحديد العناصر التي سيتم عرضها داخل القائمة. يمكن استخدام أي عنصر واجهة مستخدم كـ child، بما في ذلك النص والصور والأزرار وغيرها.

ListView(
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

ListView.builder

تستخدم ListView.builder لإنشاء قائمة متزايدة أو متغيرة الطول باستخدام مصفوفة من البيانات. يتم استخدام الخاصية “itemBuilder” لإنشاء كل عنصر في القائمة.

ListView.builder(
  itemCount: 3,
  itemBuilder: (BuildContext context, int index) {
    return Text('Item $index');
  },
)

ListView.separated

تستخدم ListView.separated لإنشاء قائمة متزايدة أو متغيرة الطول باستخدام مصفوفة من البيانات، ولكنها تضيف فواصل بين العناصر. يتم استخدام الخاصية “itemBuilder” لإنشاء كل عنصر في القائمة، والخاصية “separatorBuilder” لإنشاء كل فاصل.

ListView.separated(
  itemCount: 3,
  itemBuilder: (BuildContext context, int index) {
    return Text('Item $index');
  },
  separatorBuilder: (BuildContext context, int index) {
    return Divider();
  },
)

ListView.custom

تستخدم ListView.custom لإنشاء قائمة مخصصة بدلاً من استخدام الخيارات الأخرى. يتم استخدام الخاصية “childrenDelegate” لتحديد كيفية إنشاء العناصر في القائمة.

ListView.custom(
  childrenDelegate: SliverChildListDelegate([
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ]),
)

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

في هذا المثال، سننشئ تطبيقًا بسيطًا يستخدم ListView لإنشاء قائمة بسيطة من الأسماء. سنستخدم ListTile كـ child لكل عنصر في القائمة. سنستخدم خاصية shrinkWrap لتحديد حجم ListView بناء على عدد العناصر، وسنستخدم خاصية scrollDirection لتحديد اتجاه التمرير، وخاصية physics لتحديد نوع الانتقال بين العناصر.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List<String> names = ['John', 'Jane', 'Bob', 'Sue', 'Mike'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'ListView Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ListView Example'),
        ),
        body: ListView(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          physics: const BouncingScrollPhysics(),
          padding: const EdgeInsets.all(16.0),
          children: [
            for (String name in names)
              ListTile(
                title: Text(name),
                subtitle: Text('Subtitle for $name'),
                leading: CircleAvatar(
                  child: Text(name[0]),
                ),
              ),
          ],
        ),
      ),
    );
  }
}

في هذا المثال، قمنا بإنشاء تطبيق بسيط يستخدم ListView لإنشاء قائمة بخمسة عناصر، وكل عنصر يتضمن اسمًا وتفاصيل صغيرة وصورة دائرية صغيرة. كما استخدمنا shrinkWrap لتحديد حجم ListView بناء على عدد العناصر، واستخدمنا scrollDirection لتحديد اتجاه التمرير، واستخدمنا physics لتحديد نوع الانتقال بين العناصر.

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

في هذا المقال، تعرفنا على ويدجت ListView في Flutter وجميع خصائصها. يمكن استخدام ListView لإنشاء قوائم في تطبيقات Flutter بسهولة وسرعة. كما تعرفنا على أنواع مختلفة من ListView وكيفية استخدامها. يتميز Flutter بمكتبة قوية وواسعة النطاق من مكونات الواجهة الأمامية، ويمكن استخدام الخيارات المختلفة لتلبية احتياجات تطبيقك.