حفظ مكان الscroll الخاص بالمستخدم في تطبيقك دون الرجوع للاعلى

في هذا المقال سوف نتعرف على كيفية حفظ المكان الذي قام المستخدم بالتصفح فيه وذلك يكون عن طريق استخدام SingleChildScrollView حيث في درس سابق شرحنا كيف تنتقل الى اخر عنصر قمت بتصفحه باستخدام listView ولكن عند استخدامك لل SingleChildScrollView يكون الامر ابسط وهيا بنفس الطريقة عن طريق ال key وعند فتح التطبيق يتم التعرف على ال key وايضا يحفظ اخر نقطة تم البحث فيها ويمكنك من المفتاح الرجوع الى اخر كنت فيه بكل سهوله .

يمكنك إنشاء تطبيقات عبر الأنظمة الأساسية باستخدام Flutter التي تعمل على iOS و Android وسطح المكتب ومتصفحات الويب والمزيد من الأنظمة الأساسية. باستخدام Flutter ، ما عليك سوى الاحتفاظ بقاعدة شفرة عامة واحدة بدلاً من الحاجة إلى إنشاء تطبيقات أصلية منفصلة لكل نظام أساسي. تم إنشاء Flutter وصيانته بواسطة Google وهو مفتوح المصدر.

How to save position user in Scrolling with Flutter project

في هذا الجزء لدينا DefaultTabController وهو نفس فكرة عمل SingleChildScrollView تماما فيمكنك اعطاء key مخصص له ويعمل عليه حتى يحفظ اخر مكان قمت بالانتقال اليه في هذه الصفحة وبمجرد رجوعك لهذه الصفحة يتم ارجاع المكان الذي قمت بالانتقال اليه , وبهذا تكون قد فعلت امكانية حفظ التصفح في تطبيقك بكل سهوله وبدون اي مشاكل .

ui.dart


Scaffold(
      body: DefaultTabController(
        initialIndex: 1,
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('TabBar Widget'),
            bottom: const TabBar(
              tabs: <Widget>[
                Tab(
                  icon: Icon(Icons.cloud_outlined),
                ),
                Tab(
                  icon: Icon(Icons.beach_access_sharp),
                ),
                Tab(
                  icon: Icon(Icons.brightness_5_sharp),
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              ListView.builder(
                key: PageStorageKey<String>('listView'),
                itemCount: 50,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                    onTap: () {},
                  );
                },
              ),
              ListView.builder(
                key: PageStorageKey<String>('listView2'),
                itemCount: 50,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item $index'),
                    onTap: () {},
                  );
                },
              ),
              SingleChildScrollView(
                key: PageStorageKey<String>('listView3'),
                child: Column(
                  children: [
                    for (var i = 0; i < 50; i++)
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          height: 100,
                          width: double.infinity,
                          decoration: BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.circular(10),
                          ),
                          child: Center(child: Text('Item $i')),
                        ),
                      ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    )

شارك المقالة

حفظ مكان الscroll الخاص بالمستخدم في تطبيقك دون الرجوع للاعلى