شرح كيفية حفظ موقع 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 بدون ادنى مشاكل ولن يرجع الى الاعلى مرى اخرى .
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: () {},
);
},
);
}
}
