شارك المقالة

شرح كيفية حفظ scroll المستخدم داخل ال list في فلاتر | How to save the user scroll inside the list in Flutter


شرح كيفية حفظ scroll المستخدم داخل ال list في فلاتر | How to save the user scroll inside the list in Flutter

في هذا المقال سوف نشرح معكم كيف تقوم بعمل save للموقع الذي تقف عنده في ال list حتى تكون قادر على الانتقال اليه مره اخرى في Flutter وهذا يكون عن طريق حفظ موقع ال list اثناء عمل سكرول وهذا يكون من خلال key الخاص بال widget حتى نستطيع القيام بذلك وفي هذا الكود الذي نقدمه لكم في هذا المقال سوف تكون قادر بعدها على تنفيذ الامر بكل سهوله وبابسط شرح وذلك عن طريق عمل تتبع للسلوك وبعدها تحفظ الموقع .


يعد محرك التقديم لمكونات واجهة المستخدم أحد عوامل البيع الرئيسية في Flutter. يمكّن هذا المحرك ، وهو ميزة غير شائعة جدًا في أطر التطبيقات ، Flutter من رسم وعرض مكونات واجهة المستخدم الخاصة به بشكل مستقل عن النظام المستهدف. القليل من الأطر يمكن أن يساوي مستوى التعقيد والتحكم وأداء وقت التشغيل الذي يحققه Flutter نتيجة للقيام بذلك. تتمثل الطريقة التقليدية لتقديم عناصر واجهة المستخدم مع إطار عمل تطبيق في بناء طبقة تجريد أو جسر يستدعي مكتبات واجهة المستخدم الأصلية للنظام ويترجم البيانات بين الاثنين. مع عيب زيادة الحمل في جسر التطبيق الذي يؤثر على الأداء ، فإن هذا يشجع النظام المستهدف على التعامل مع “الرفع الثقيل” لعرض الرسوم المتحركة والمكونات.


How to save scroll user behavior in Flutter

في الكود التالي لدينا list بداخل widget باسم PageStorage وهنا نستدعي ال widget وايضا نقوم بعمل حفظ للموقع بحيث اذا اغلق المستخدم الصفحه ورجع اليها مره اخرى فسيكون في نفس المكان الذي حفظه في ال PageStorage بدون ادنى مشاكل ولن يرجع الى الاعلى مرى اخرى .


How to save scroll user behavior in Flutter

scroll.dart


final bucket = PageStorageBucket();

class TestWidget extends StatefulWidget {
  const TestWidget({Key? key}) : super(key: key);

  @override
  State<TestWidget> createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Scroll List'),
        backgroundColor:Colors.black,
      ),
      body: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Center(
          child: PageStorage(
            bucket: bucket,
            child: buildListView(),
          ),


        ),
      )
    );
  }

  ListView buildListView() {
    return ListView.builder(
          key: PageStorageKey<String>('listView'),
          itemCount: 50,
          itemBuilder: (context, index) {
          return ListTile(
            title: Text('Item $index'),
            onTap: () {},
          );
        },
        );
  }
}


شاهد أيضًا
مقالات ذات صلة
شرح عمل Retrofit Singleton في برنامج اندرويد ستوديو

إنشاء class خارجي لل Apis في Android Studioتعد فكرة الSingleton واحده من الافكار التي لا…

شرح DropdownButton في فلاتر بابسط طريقة

شرح DropdownButton في فلاتر بابسط طريقةتعتبر DropdownButton واحده من اشهر الwidget الموجوده بداخل تقنية flutter…

كود برنامج بلغة الجافا يقوم بحساب تقدير الطالب – student grades java code

كود برنامج بلغة الجافا يقوم بحساب تقدير الطالب متابعي جي كودرس geecoders مرحبا بكم في…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع