By using this site, you agree to the Privacy Policy and Terms of Use.
موافق
عرب فلاترعرب فلاتر
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
قراءة: شرح استخدام ويدجت ListView.custom في فلاتر
شارك
تسجيل الدخول
إشعار أظهر المزيد
Aa
عرب فلاترعرب فلاتر
Aa
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
Search

أقسام الموقع

استكشف جميع أقسام الموقع
قسم Dart في موقع عرب فلاتر

Dart

59 مقالات
قسم Widgets في موقع عرب فلاتر

Widgets

104 مقالات
قسم Packages في موقع عرب فلاتر

Packages

19 مقالات
قسم Tutorials في موقع عرب فلاتر

Tutorials

22 مقالات

أخر المواضيع

استكشف أخر المواضيع المنشورة
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

18
لديك حساب موجود؟ تسجيل الدخول
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
عرب فلاتر > Widgets > شرح استخدام ويدجت ListView.custom في فلاتر
Widgets

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

عبدالله يوسف
أخر تحديث 2024/11/15
بواسطة عبدالله يوسف اضف تعليق 5 دقيقة للقراءة 1992 مشاهدات 2
شارك
شرح استخدام ويدجت ListView.custom في فلاتر
شرح استخدام ويدجت ListView.custom في فلاتر
شارك

خدماتنا البرمجية – عرب فلاتر🚀

خدماتنا البرمجية – عرب فلاتر

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

المحتويات
ما هو ListView.custom في فلاتر؟استخدام ListView.custom في فلاترخصائص ويدجت ListView.custom1- الخاصية childrenDelegate2- الخاصية cacheExtent3- الخاصية semanticChildCount4- الخاصية itemExtentمثال على استخدام ListView.custom في Flutter

ما هو ListView.custom في فلاتر؟

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

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


استخدام ListView.custom في فلاتر

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

ListView.custom(
        childrenDelegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return ListTile(
              title: Text(_dataList[index]),
              subtitle: Text('This is a custom list item.'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                // Do something when the item is tapped
              },
            );
          },
          childCount: _dataList.length,
        ),
      ),

خصائص ويدجت ListView.custom

تتوفر لـ ListView.custom العديد من الخصائص التي يمكن استخدامها لتخصيص قائمة المستخدم بشكل كامل. فيما يلي شرح لكل من الخصائص التي تتوفر في ListView.custom بالتفصيل:

1- الخاصية childrenDelegate

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

ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return ListTile(
        title: Text(_dataList[index]['title']),
        subtitle: Text(_dataList[index]['subtitle']),
        trailing: Icon(Icons.arrow_forward),
        onTap: () {
          // يمكن إضافة أي عملية تريد تنفيذها عند الضغط على العنصر هنا
        },
      );
    },
    childCount: _dataList.length,
  ),
)

2- الخاصية cacheExtent

cacheExtent هو عدد العناصر التي يجب تخزينها في الذاكرة المؤقتة. jساعد هذه الخاصية على تحسين الأداء عند التمرير في القائمة، حيث يتم تخزين العناصر في الذاكرة المؤقتة بدلاً من إعادة إنشائها في كل مرة.

ListView.custom(
  cacheExtent: 100,
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return ListTile(
        title: Text(_dataList[index]['title']),
        subtitle: Text(_dataList[index]['subtitle']),
        trailing: Icon(Icons.arrow_forward),
        onTap: () {
          // يمكن إضافة أي عملية تريد تنفيذها عند الضغط على العنصر هنا
        },
      );
    },
    childCount: _dataList.length,
  ),
)

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

3- الخاصية semanticChildCount

semanticChildCount هو عدد العناصر في القائمة التي تحتوي على بنية شجرية.

ListView.custom(
  semanticChildCount: _dataList.length,
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return ListTile(
        title: Text(_dataList[index]['title']),
        subtitle: Text(_dataList[index]['subtitle']),
        trailing: Icon(Icons.arrow_forward),
        onTap: () {
          // يمكن إضافة أي عملية تريد تنفيذها عند الضغط على العنصر هنا
        },
      );
    },
    childCount: _dataList.length,
  ),
)

4- الخاصية itemExtent

itemExtent هو ارتفاع عنصر واحد في القائمة. يستخدم هذا الخيار لتحسين الأداء والتخفيف من احتياجات الذاكرة للقائمة.

ListView.custom(
  itemExtent: 50,
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return ListTile(
        title: Text(_dataList[index]['title']),
        subtitle: Text(_dataList[index]['subtitle']),
        trailing: Icon(Icons.arrow_forward),
        onTap: () {
          // يمكن إضافة أي عملية تريد تنفيذها عند الضغط على العنصر هنا
        },
      );
    },
    childCount: _dataList.length,
  ),
)

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

هذا هو مثال تطبيق بسيط على استخدام ListView.custom في Flutter لعرض قائمة بسيطة من النصوص:

import 'package:flutter/material.dart';

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

class CustomListViewApp extends StatelessWidget {
  final List<String> _itemList = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
    'Item 6',
    'Item 7',
    'Item 8',
    'Item 9',
    'Item 10',
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Custom ListView Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Custom ListView Example'),
        ),
        body: ListView.custom(
          childrenDelegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return ListTile(
                title: Text(_itemList[index]),
              );
            },
            childCount: _itemList.length,
          ),
        ),
      ),
    );
  }
}
مثال على استخدام ListView.custom في Flutter
شرح استخدام ويدجت ListView.custom في فلاتر 9

في هذا المثال، يتم استخدام _itemList لإنشاء قائمة من النصوص. يتم استخدام ListView.custom لإنشاء ListView مخصص. يتم استخدام SliverChildBuilderDelegate لتحديد كيفية بناء القائمة. تم تحديد childCount بناءً على طول المصفوفة _itemList. تم إنشاء ListTile لكل عنصر في _itemList. تم تعيين title لعرض النص في كل ListTile.

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


ListView.custom هو عنصر واجهة المستخدم في Flutter يستخدم لإنشاء قائمة مخصصة بشكل كامل. يتيح ListView.custom للمطورين تحديد تفاصيل العرض والمظهر بشكل كامل، بدءًا من عدد العناصر وحتى تخصيص واجهة كل عنصر من القائمة. تتوفر لـ ListView.custom العديد من الخصائص التي يمكن استخدامها لتخصيص قائمة المستخدم بشكل كامل، بما في ذلك childrenDelegate و cacheExtent و semanticChildCount و itemExtent. باستخدام ListView.custom، يمكن للمطورين إنشاء قوائم مخصصة بشكل كامل وتحسين الأداء والتخفيف من احتياجات الذاكرة للقائمة.

Arab Flutter Community 🚀

انضم إلى مجتمع Arab Flutter
شارك هذا المقال
فيسبوك تويتر Whatsapp Whatsapp لينكد ان تلغرام نسخ الرابط
Avatar of عبدالله يوسف
بواسطة عبدالله يوسف Founder and CEO at ArabFlutter
تابع:
أنا عبدالله يوسف، مهندس مصري ومؤسس موقع عرب فلاتر، ملهم بشغف التكنولوجيا والإبداع. كمصمم مواقع ومبرمج تطبيقات موبايل باستخدام Flutter، أستمتع بخلق عوالم رقمية فريدة ومبتكرة. تتجلى مواهبي في تصميم وتطوير واجهات مستخدم تفاعلية، حيث يمزج الجانب الجمالي بالدقة الهندسية. ما يميزني هو إلمامي الواسع بتقنيات البرمجة والتصميم، ومقدرتي على تطوير تطبيقات متنوعة عبر منصات مختلفة. أعتبر نفسي مبدعًا وملتزمًا، حيث أسعى دائمًا لتحقيق تحسين مستمر في مهاراتي وتقنياتي. أستمتع بتحديات العمل الجماعي وأؤمن بأهمية الابتكار والتطور. بفضل إبداعي والتزامي، أسعى لتقديم حلول فعّالة تلبي توقعات العملاء وتفوق عن المألوف.
اترك تعليقا اترك تعليقا

اترك تعليقاً إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials
طريقة انشاء المجلدات باستخدام Dart
طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا
Tutorials

مقالات ذات الصلة

اطلع على المزيد من المقالات المتعلقة بهذا الموضوع!
شرح استخدام ThemeData في فلاتر
Widgets

شرح استخدام ThemeData في فلاتر

37 2
شرح استخدام ويدجت SingleChildScrollView في فلاتر
Widgets

شرح استخدام SingleChildScrollView في فلاتر

26 1
شرح استخدام ويدجت WillPopScope في فلاتر
Widgets

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

19 1
شرح استخدام ويدجت RichText في فلاتر 
Widgets

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

20
شرح استخدام ويدجت TextButton في فلاتر
Widgets

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

20
شرح استخدام ويدجت OutlinedButton في فلاتر
Widgets

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

28 1
أظهر المزيد
شعار موقع عرب فلاتر شعار موقع عرب فلاتر

About US

Quick Links

  • خدماتنا
  • من نحن
  • اتصل بنا
  • اتفاقية استخدام
  • سياسة الخصوصية
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
adbanner
تم اكتشاف مانع إعلانات
مرحبًا، يرجى إيقاف مانع الإعلانات. الإعلانات تُساهم في دعم موقعنا وتغطية جزء من تكاليف الاستضافة وتطوير المحتوى. شكرًا لتفهمك ودعمك.
Okay, I'll Whitelist
Welcome Back!

Sign in to your account

هل نسيت كلمة المرور؟