شارك المقالة

شرح كيفية حفظ موقع scroll المستخدم داخل ال list في فلاتر | how to save the user scroll inside the list


شرح كيفية حفظ موقع scroll المستخدم داخل ال list في فلاتر | how to save the user scroll inside the list

في هذا المقال سوف نشرح معكم كيف تقوم بعمل 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: () {},
          );
        },
        );
  }
}


شاهد أيضًا
مقالات ذات صلة
تغيير عناصر bottomNavigationBar عند الضغط عليها في Flutter

تغيير عناصر bottomNavigationBar عند الضغط عليها في Flutter في هذا المقال سوف نكمل معكم في…

اكواد اندرويد ستوديو تقوم بعمل broadcast receiver لعرض نسبة شحن الهاتف | android studio code

  اكواد اندرويد ستوديو تقوم بعمل broadcast receiver لعرض نسبة شحن الهاتف | android studio…

شرح كيفية استخدام MVC داخل تطبيقات الاندرويد

بسم الله الرحمن الرحيم السلام عليكم ورحمه الله وبركاته مرحبا بكم في أول مقاله من…

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

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