شارك المقالة

شرح كيفية حفظ 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: () {},
          );
        },
        );
  }
}


شاهد أيضًا
مقالات ذات صلة
اضافة الصورة فوق النص او فوق صورة اخرى في Flutter

اضافة الصورة فوق النص او فوق صورة اخرى في Flutter في هذا المقال نقدم لكم…

كيفية اضافة بيانات داخل Sqlflite في Flutter والتعامل مع الData

  كيفية اضافة بيانات داخل Sqlflite في Flutter والتعامل مع الDataفي هذا الكود سوف نتعرف…

شرح كيفية عمل thered في الاندرويد ستوديو بأكثر من طريقة وتاخير ظهور بعض العناصر | delay item android studio

شرح كيفية عمل thered في الاندرويد ستوديو بأكثر من طريقة وتاخير ظهور بعض العناصر |…

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

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