الطريقة الصحيحه لعمل scroll للعناصر في حالة وجود ListView في flutter باستخدام CustomScrollView

الطريقة الصحيحه لعمل scroll للعناصر في حالة وجود ListView في flutter باستخدام CustomScrollView

في هذا المقال سوف نشرح معكم كيف تقوم ببناء ScrollView في حالة اذا كان لديك احد العناصر موجوده بالاعلى وتريد ان تقوم بعمل ScrollView كامل للشاشه وهذا اذا كان لديك جزء في الاعلى يحتوي على عنصر وبالاسفل مباشرة لديك listView وعند عمل scroll سوف يتم تحريك الشاشه بالكامل مع المحافظه على اداء تطبيقك وعدم فقط الاداء وهذا لاننا سوف نستعمل CustomScrollView وليس SingleChildScrollView كما سوف نشاهد في الكود التالي .

android sdk manager تحميل flutter developers applications create app android android studio mac

How to scroll list in Flutter and save performance

في المثال الموجود بالاعلى لدينا الكود الخطا والذي يستخدمه الكثير منكم واسفله الكود  الصحيح والذي يفضل استخدامه بالنسبة للكود الاول فهو باستخدام SingleChildScrollView وايضا تم استخدام shrinkWrap وهذا خطأ كبير لانك باستعمالك لهذا الامر فانك تخبر البرنامج بان يظهر جميع العمليات التي توجد داخل ال list وهذا يؤثر على الاداء طبعا ولحل هذه المشكلة عليك بان تقوم بوضع الـ list بدون shrinkWrap ويفضل استخدام ايضا CustomScrollView اذا كنت سوف تقوم بعمل scroll لمجموعه من العناصر تريد ان تظهر .

scroll.dart

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Container(
              height: 200,
              color: Colors.red,
            ),
          ),

          SliverToBoxAdapter(
            child: Container(
              height: 50,
              color: Colors.black54,
              child: Center(child: Text('List View'),),
            ),
          ),

          SliverList(delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              print('index: $index');
              return ListTile(title: Text('index $index'));
            },
            childCount: 100,
          )),
        ],
      )
    );
  }