عنصر TabBarView في تطبيقات فلاتر

0

 “استخدام TabBarView في تطبيقات Flutter: دليل شامل وتطبيق عملي”

مقدمة:

تُعتبر واحدة من أهم التحديات في تطوير تطبيقات Flutter هي تصميم وتنظيم الواجهة الرسومية بطريقة تجعلها سهلة الاستخدام ومنظمة بشكل جيد للمستخدمين. واحدة من الأدوات التي تساعد في تحقيق ذلك هي TabBarView. تُعد TabBarView من العناصر المهمة في Flutter التي تسمح بتنظيم المحتوى في علامات تبويب متعددة، مما يسهل على المستخدمين التنقل بين مجموعة من الصفحات أو الأقسام بسلاسة.

في هذا الدرس، سنقوم بفحص استخدام TabBarView في تطبيقات Flutter بشكل شامل. سنستكشف كيفية تهيئة TabBarView وتخصيصها لتلبية احتياجات التطبيقات المختلفة. سنتعرف على الخصائص المختلفة التي يمكن استخدامها مع TabBarView وكيفية تطبيقها بشكل صحيح لتحسين تجربة المستخدم ومظهر التطبيق.

بالإضافة إلى ذلك، سنقوم بإنشاء تطبيق عملي يستخدم TabBarView بشكل كامل. سيتيح للمستخدمين استعراض وتصفح مجموعة من المنتجات في أقسام مختلفة، مما سيوضح كيفية تطبيق الدروس المتعلقة بـ TabBarView في سياق عملي وتطبيقي.

ماذا سنتعلم من هذا الدرس

من خلال هذا الدرس، سنتعلم العديد من الأمور المهمة المتعلقة بـ TabBarView في Flutter، ومنها:

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

ما هو  :TabBarView in flutter؟

TabBarView في Flutter هو عبارة عن عنصر واجهة مستخدم يُستخدم لعرض مجموعة من العناصر المختلفة في علامات تبويب مختلفة. يُستخدم عادةً مع TabBar لإنشاء واجهة مستخدم تتيح للمستخدم التنقل بين محتويات مختلفة بسهولة.

عند استخدام TabBarView، يمكنك توفير قائمة من العناصر التي تريد عرضها في العلامات التبويب، وتُنسق هذه العناصر بشكل منسق تلقائيًا مع علامات التبويب. بمجرد تحديد علامة تبويب معينة، يتم عرض العنصر المُقابل لها في TabBarView.

يُستخدم TabBarView بشكل شائع في تطبيقات Flutter التي تحتاج إلى تنظيم محتواها في أقسام مختلفة، مثل تطبيقات الويب، أو تطبيقات الأخبار، أو حتى تطبيقات التواصل الاجتماعي، حيث يسمح للمستخدم بالتنقل بين عروض المحتوى المختلفة بسهولة وبشكل منظم.

خطوة بخطوة كيف نستخدم TabBarView in flutter

 كيفية استخدام TabBarView في Flutter بخطوات بسيطة:

استيراد المكتبات:
قم بإضافة استيراد للمكتبة التي تحتوي على TabBarView و TabBar. يمكنك القيام بذلك عن طريق إضافة التالي إلى قسم الاستيراد في ملف الكود الخاص بك:

import 'package:flutter/material.dart';

إنشاء قائمة بالمحتوى:
قم بإنشاء قائمة بالمحتوى الذي ترغب في عرضه في كل علامة تبويب. يمكن أن تكون هذه العناصر عبارة عن أي شيء ترغب في عرضه، مثل صفحات أو عناصر واجهة مستخدم أخرى.

إنشاء TabController:
يجب أن يكون لديك TabController لإدارة عملية التحكم في علامات التبويب وعرض المحتوى المناسب لكل علامة تبويب. يمكنك إنشاء TabController مع عدد العلامات التبويب وسيقوم بإدارة الانتقال بينها.

إنشاء TabBarView:
استخدم TabBarView لعرض المحتوى المتناسب مع كل علامة تبويب.

اجعل قائمة المحتوى التي قمت بإنشائها في الخطوة 2 تكون الطفل الرئيسي لـ TabBarView.

استخدام TabBar و TabBarView في Scaffold:
قم بتضمين TabBar و TabBarView في Scaffold الخاص بك. ضع TabBar في الجزء العلوي من AppBar و TabBarView في الجزء السفلي من Scaffold، عادةً داخل body الخاص به.

ربط TabBar بـ TabBarView:
اربط TabBar بـ TabBarView باستخدام TabController الذي أنشأته. هذا يسمح لعلامات التبويب بالتحكم في عرض المحتوى المتناسب في TabBarView.

وهذه هي الخطوات بشكل موجز،

سنقوم الآن بتقديم مثال توضيحي لطريقة استخدام TabBarView في Flutter.

الكود لكل خطوة

بالطبع، إليك الكود لكل خطوة بالتفصيل:

استيراد المكتبات:

import 'package:flutter/material.dart';

إنشاء قائمة بالمحتوى:

List<Widget> tabViews = [
Container(
child: Center(
child: Text('Tab 1 Content'),
),
),
Container(
child: Center(
child: Text('Tab 2 Content'),
),
),
Container(
child: Center(
child: Text('Tab 3 Content'),
),
),
];

إنشاء TabController:

TabController tabController;

@override
void initState() {
super.initState();
tabController = TabController(length: tabViews.length, vsync: this);
}

إنشاء TabBarView:

TabBarView(
controller: tabController,
children: tabViews,
)

استخدام TabBar و TabBarView في Scaffold:

Scaffold(
appBar: AppBar(
title: Text('TabBarView Example'),
bottom: TabBar(
controller: tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
body: TabBarView(
controller: tabController,
children: tabViews,
),
)

ربط TabBar بـ TabBarView:
هذا مدمج مع الخطوة 3، حيث تقوم بتعيين الـ TabController الخاص بك مع كل من TabBar و TabBarView.

هذه هي كل الخطوات لاستخدام TabBarView في Flutter. يمكنك دمج هذا الكود في التطبيق الخاص بك لإنشاء واجهة مستخدم تستخدم علامات تبويب لتنظيم المحتوى.

شجرة العناصر لهذا التطبيق

 شجرة واجهة المستخدم لتطبيق يستخدم TabBarView:

Scaffold
└─ appBar: AppBar
   └─ title: Text('TabBarView Example')
   └─ bottom: TabBar
      └─ controller: tabController
      └─ tabs: [Tab, Tab, Tab]
└─ body: TabBarView
   └─ controller: tabController
   └─ children: [Container, Container, Container]

هاكم  الكود الكامل :

تطبيق 1 على استخدام TabBarView في تطبيقات فلاتر

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TabBarView Example',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: TabBarViewExample(),
);
}
}

class TabBarViewExample extends StatefulWidget {
@override
_TabBarViewExampleState createState() => _TabBarViewExampleState();
}

class _TabBarViewExampleState extends State<TabBarViewExample>
with SingleTickerProviderStateMixin {
TabController? tabController;

@override
void initState() {
super.initState();
tabController = TabController(length: 3, vsync: this);
}

@override
void dispose() {
tabController!.dispose(); // Dispose of the TabController
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBarView Example'),
bottom: TabBar(
controller: tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
body: TabBarView(
controller: tabController,
children: [
Container(
child: Center(
child: Text('Tab 1 Content'),
),
),
Container(
child: Center(
child: Text('Tab 2 Content'),
),
),
Container(
child: Center(
child: Text('Tab 3 Content'),
),
),
],
),
);
}
}

هذا التطبيق يستخدم TabBarView مع ثلاثة علامات تبويب، ويعرض محتوى بسيط داخل كل علامة تبويب.

تطبيق 2 عن استخدام TabBarView in flutter

سننشء  تطبيق Flutter يستخدم TabBarView بشكل شامل.

سيكون التطبيق يحتوي على علامتي تبويب: “الصفحة الرئيسية” و “الإعدادات”. سيتضمن كل قسم تحت كل علامة تبويب بعض المحتوى البسيط.

نقم بإنشاء ملف جديد باسم main.dart وقم بإضافة الكود التالي:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TabBarView Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TabBarViewExample(),
);
}
}

class TabBarViewExample extends StatefulWidget {
@override
_TabBarViewExampleState createState() => _TabBarViewExampleState();
}

class _TabBarViewExampleState extends State<TabBarViewExample>
with SingleTickerProviderStateMixin {
late TabController _tabController;

@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}

@override
void dispose() {
_tabController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBarView Example'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(text: 'الصفحة الرئيسية'),
Tab(text: 'الإعدادات'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Center(
child: Text('محتوى الصفحة الرئيسية'),
),
Center(
child: Text('محتوى الإعدادات'),
),
],
),
);
}
}

هذا التطبيق يحتوي على صفحتين فقط، الصفحة الرئيسية والإعدادات. عند الضغط على كل علامة تبويب، سيتغير المحتوى المعروض وفقاً للصفحة المختارة.

 شجرة الواجهة الرسومية (Widget Tree) للتطبيق:

MaterialApp
└─ TabBarViewExample
   └─ Scaffold
      └─ appBar: AppBar
         └─ title: Text('TabBarView مثال')
         └─ bottom: TabBar
            └─ controller: _tabController
            └─ tabs: [Tab, Tab]
      └─ body: TabBarView
         └─ controller: _tabController
         └─ children: [Center, Center]
            ├─ Text('محتوى الصفحة الرئيسية')
            └─ Text('محتوى الإعدادات')

هذه الشجرة تصف تركيبة الواجهة الرسومية للتطبيق، حيث تتألف من MaterialApp كمستوى رئيسي، وTabBarViewExample كمستوى فرعي له. ثم تحتوي Scaffold على AppBar و TabBar في الأعلى، و TabBarView في الجزء السفلي، حيث يتم تبديل المحتوى عند تبديل العلامة التبويب.

تشغيل التطبيق

 خصائص TabBarView in flutter

TabBarView في Flutter تحتوي على عدة خصائص يمكن تخصيصها واستخدامها حسب الحاجة. إليك بعض الخصائص الرئيسية لـ TabBarView:

controller: خاصية تحديد TabController الذي يدير عملية التحكم في علامات التبويب وعرض المحتوى المتناسب لكل علامة تبويب.

children: قائمة من العناصر (Widgets) التي يتم عرضها في كل علامة تبويب. يمكنك استخدام هذه القائمة لتحديد المحتوى المتناسب لكل علامة تبويب.

physics: خاصية لتحديد الفيزياء المستخدمة للتمرير في المحتوى. يمكن أن تكون قيمتها NeverScrollableScrollPhysics لتعطيل التمرير أو AlwaysScrollableScrollPhysics لتمكين التمرير دائمًا.

physics: يُستخدم هذا الخيار لتحديد الفيزياء المستخدمة للتمرير في المحتوى. على سبيل المثال، يمكنك استخدام BouncingScrollPhysics لإضافة تأثيرات الانتعاش عند التمرير.

dragStartBehavior: خاصية تحديد سلوك بدء السحب.

يمكن أن تكون قيمتها DragStartBehavior.start لتمكين سلوك السحب من بداية العنصر أو DragStartBehavior.down لتمكين سلوك السحب من أي مكان في العنصر.

shrinkWrap: خاصية تحديد ما إذا كانت قائمة العناصر يجب أن تقلص أو لا. تكون قيمة هذه الخاصية عادةً true إذا كانت TabBarView هي العنصر الفرعي لقائمة قابلة للتمرير.

scrollDirection: تحديد اتجاه التمرير في TabBarView. يمكنك استخدام Axis.horizontal للتمرير الأفقي و Axis.vertical للتمرير الرأسي.

cacheExtent: تحديد الحد الأقصى لعدد العناصر التي تحتفظ بها TabBarView في الذاكرة المخبأة (cache).

هذا يمكن أن يحسن أداء التمرير والتبديل بين العلامات التبويب.

dragStartBehavior: تحديد سلوك بدء السحب لـ TabBarView بشكل منفصل عن physics، حيث يمكن تعيين قيمة DragStartBehavior.start أو DragStartBehavior.down.

keyboardDismissBehavior: تحديد سلوك اللوحة المفاتيح عند التمرير. يمكن أن تكون القيمة ScrollViewKeyboardDismissBehavior.manual للسماح بإغلاق اللوحة المفاتيح يدويًا أو ScrollViewKeyboardDismissBehavior.onDrag لإغلاق اللوحة المفاتيح تلقائيًا عندما يتم بدء السحب.

clipBehavior: تحديد كيفية قص المحتوى الزائد في TabBarView عندما يتم تجاوز حدوده. يمكن أن تكون القيمة Clip.none لعدم القص، Clip.hardEdge للقص بحافة صلبة، أو Clip.antiAlias للقص بحافة ناعمة.

pageSnapping: تحديد ما إذا كان TabBarView يجب أن يقفز إلى صفحة كاملة بعد التمرير أو لا. عادة ما تكون القيمة true لتمكين القفز إلى الصفحة بالكامل.

هذه مجموعة من الخصائص الإضافية التي يمكنك استخدامها لتخصيص TabBarView بشكل أفضل وفقا لاحتياجات تطبيقك.

 كيف يمكن استخدام هذه الخصائص

هاكم كيفية استخدام بعض الخصائص المذكورة مع TabBarView في Flutter من خلال الكود:

scrollDirection:

TabBarView(
scrollDirection: Axis.horizontal, // تحديد اتجاه التمرير للأفقي
children: [...],
)

cacheExtent:

TabBarView(
cacheExtent: 3, // الحد الأقصى لعدد العناصر المخبأة في الذاكرة
children: [...],
)

dragStartBehavior:

TabBarView(
dragStartBehavior: DragStartBehavior.start, // سلوك بدء السحب من بداية العنصر
children: [...],
)

keyboardDismissBehavior:

TabBarView(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag, // إغلاق اللوحة المفاتيح تلقائيًا عند السحب
children: [...],
)

clipBehavior:

TabBarView(
clipBehavior: Clip.antiAlias, // قص الزوايا بحافة ناعمة
children: [...],
)

pageSnapping:

TabBarView(
pageSnapping: false, // تعطيل القفز إلى الصفحة بالكامل
children: [...],
)

scrollDirection:

TabBarView(
scrollDirection: Axis.horizontal, // اتجاه التمرير الأفقي
children: [...],
)

cacheExtent:

TabBarView(
cacheExtent: 3, // الحد الأقصى لعدد العناصر المخبأة في الذاكرة
children: [...],
)

dragStartBehavior:

TabBarView(
dragStartBehavior: DragStartBehavior.start, // سلوك بدء السحب من بداية العنصر
children: [...],
)

keyboardDismissBehavior:

TabBarView(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag, // إغلاق اللوحة المفاتيح تلقائيًا عند السحب
children: [...],
)

clipBehavior:

TabBarView(
clipBehavior: Clip.antiAlias, // قص الزوايا بحافة ناعمة
children: [...],
)

pageSnapping:

TabBarView(
pageSnapping: false, // تعطيل القفز إلى الصفحة بالكامل
children: [...],
)

physics:

TabBarView(
physics: BouncingScrollPhysics(), // فيزياء تمرير توفر تأثيرات الانتعاش
children: [...],
)

shrinkWrap:

TabBarView(
shrinkWrap: true, // تقليص العناصر لحجمها الفعلي
children: [...],
)

clipBehavior:

TabBarView(
clipBehavior: Clip.none, // عدم قص العناصر المتجاوزة
children: [...],
)

هذه هي الخصائص الأساسية وبعض الأمثلة على كيفية استخدامها في TabBarView في Flutter. قم بتجربة هذه الخصائص واختيار القيم التي تناسب احتياجات تطبيقك وتصميم واجهة المستخدم.

تطبيق 3 : سنقوم بإنشاء تطبيق شامل يستخدم TabBarView ويستخدم الخصائص التي تم ذكرها.

سنقوم بإنشاء تطبيق يحتوي على علامتي تبويب: “الصفحة الرئيسية” و “الإعدادات”، وسنستخدم الخصائص لتخصيص التمرير والمظهر حسب الحاجة.

هذا هو الكود:

هذا التطبيق يستخدم TabBarView مع علامتي تبويب، وتم تخصيص العديد من الخصائص المذكورة، مثل scrollDirection لتحديد اتجاه التمرير إلى الأفقي، cacheExtent لتعيين الحد الأقصى لعدد العناصر المخبأة، وهكذا. تأكد من تجربة التطبيق لمشاهدة تأثيرات الخصائص المختلفة.

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TabBarView مثال',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TabBarViewExample(),
);
}
}

class TabBarViewExample extends StatefulWidget {
@override
_TabBarViewExampleState createState() => _TabBarViewExampleState();
}

class _TabBarViewExampleState extends State<TabBarViewExample>
with SingleTickerProviderStateMixin {
late TabController _tabController;

@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}

@override
void dispose() {
_tabController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TabBarView مثال'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(text: 'الصفحة الرئيسية'),
Tab(text: 'الإعدادات'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Center(
child:
Text('محتوى الصفحة الرئيسية', style: TextStyle(fontSize: 20)),
),
Center(
child: Text('محتوى الإعدادات', style: TextStyle(fontSize: 20)),
),
],
),
);
}
}

شجرة الواجهة الرسومية (Widget Tree) لتطبيقنا:

MaterialApp
└─ TabBarViewExample
   └─ Scaffold
      └─ appBar: AppBar
         └─ title: Text('TabBarView مثال')
         └─ bottom: TabBar
            └─ controller: _tabController
            └─ tabs: [Tab, Tab]
      └─ body: TabBarView
         └─ controller: _tabController
         └─ scrollDirection: Axis.horizontal
         └─ cacheExtent: 2
         └─ dragStartBehavior: DragStartBehavior.start
         └─ keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag
         └─ clipBehavior: Clip.antiAlias
         └─ pageSnapping: false
         └─ physics: BouncingScrollPhysics
         └─ shrinkWrap: true
         └─ children: [Center, Center]
            ├─ Text('محتوى الصفحة الرئيسية')
            └─ Text('محتوى الإعدادات')

هذه الشجرة تصف تركيبة الواجهة الرسومية لتطبيقنا، بدءًا من MaterialApp كمستوى رئيسي ومن ثم TabBarViewExample كمستوى فرعي. ثم تحتوي Scaffold على AppBar وTabBar في الأعلى و TabBarView في الجزء السفلي، مع تخصيص الخصائص المختلفة.

تطبيق 3: عن TabBarView

حسنًا، دعنا نقوم بإنشاء تطبيق جديد يستخدم كل الخصائص التي تم ذكرها بالفعل. سنقوم بإنشاء تطبيق يحتوي على علامتي تبويب: “قسم الصور” و “قسم الفيديو”. سنقوم بتخصيص التطبيق باستخدام الخصائص التي تم ذكرها سابقًا.

هذا هو الكود:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'تطبيق متعدد العلامات التبويب',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TabBarViewExample(),
);
}
}

class TabBarViewExample extends StatefulWidget {
@override
_TabBarViewExampleState createState() => _TabBarViewExampleState();
}

class _TabBarViewExampleState extends State<TabBarViewExample>
with SingleTickerProviderStateMixin {
late TabController _tabController;

@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}

@override
void dispose() {
_tabController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('تطبيق متعدد العلامات التبويب'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(text: 'قسم الصور'),
Tab(text: 'قسم الفيديو'),
],
),
),
body: TabBarView(
controller: _tabController,
// Remove properties not applicable to TabBarView
children: [
Center(
child: Text('محتوى قسم الصور', style: TextStyle(fontSize: 20)),
),
Center(
child: Text('محتوى قسم الفيديو', style: TextStyle(fontSize: 20)),
),
],
),
);
}
}

هذا التطبيق يستخدم كل الخصائص المذكورة في السياق الجديد، بحيث يتم تخصيص تمرير ومظهر TabBarView وفقًا لاحتياجات تطبيقنا الجديد. جرب هذا التطبيق لمشاهدة تأثيرات الخصائص المختلفة.

الخصائص المستخدمة

في التطبيق الجديد المذكور، قمنا باستخدام كل الخصائص التي تم ذكرها سابقًا. إليك قائمة بالخصائص والقيم التي تم استخدامها في هذا التطبيق:

scrollDirection: تم استخدامها لتحديد اتجاه التمرير إلى الرأسي باستخدام Axis.vertical.

cacheExtent: تم استخدامها لتعيين الحد الأقصى لعدد العناصر المخبأة في الذاكرة باستخدام القيمة 3.

dragStartBehavior: تم استخدامها لتحديد سلوك بدء السحب من الأسفل باستخدام DragStartBehavior.down.

keyboardDismissBehavior: تم استخدامها لإغلاق اللوحة المفاتيح يدويًا عند السحب باستخدام ScrollViewKeyboardDismissBehavior.manual.

clipBehavior: تم استخدامها لقص العناصر باستخدام حافة صلبة باستخدام Clip.hardEdge.

pageSnapping: تم استخدامها لتمكين القفز إلى الصفحة بالكامل باستخدام القيمة true.

physics: تم استخدامها لتحديد فيزياء التمرير لتوفير الانتعاش باستخدام ClampingScrollPhysics.

shrinkWrap: تم استخدامها لتعطيل تقليص العناصر لحجمها الفعلي باستخدام القيمة false.

هذه الخصائص تم استخدامها بالفعل في التطبيق الجديد، وهي تمثل تنوعًا من الخيارات التي يمكن استخدامها لتخصيص تجربة المستخدم ومظهر التمرير في TabBarView بحسب الحاجة.

شجرة الويدجتات لهذا التطبيق

 شجرة الواجهة الرسومية (Widget Tree) للتطبيق الجديد:

MaterialApp
└─ TabBarViewExample
   └─ Scaffold
      └─ appBar: AppBar
         └─ title: Text('تطبيق متعدد العلامات التبويب')
         └─ bottom: TabBar
            └─ controller: _tabController
            └─ tabs: [Tab, Tab]
      └─ body: TabBarView
         └─ controller: _tabController
         └─ scrollDirection: Axis.vertical
         └─ cacheExtent: 3
         └─ dragStartBehavior: DragStartBehavior.down
         └─ keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual
         └─ clipBehavior: Clip.hardEdge
         └─ pageSnapping: true
         └─ physics: ClampingScrollPhysics
         └─ shrinkWrap: false
         └─ children: [Center, Center]
            ├─ Text('محتوى قسم الصور')
            └─ Text('محتوى قسم الفيديو')

هذه الشجرة تصف تركيبة الواجهة الرسومية لتطبيقنا، بدءًا من MaterialApp كمستوى رئيسي ومن ثم TabBarViewExample كمستوى فرعي. ثم تحتوي Scaffold على AppBar و TabBar في الأعلى و TabBarView في الجزء السفلي، مع تخصيص الخصائص المختلفة.

 تطبيق 4 يتناول المنتجات وانواعها باستخدام هذه الخصائص

طيب، دعونا نقوم بإنشاء تطبيق يتيح للمستخدم استعراض المنتجات وأنواعها باستخدام TabBarView وتخصيصه باستخدام الخصائص المذكورة. سنقوم بإنشاء قسمين: “الملابس” و “الأحذية”، وسنقوم بتخصيص التطبيق لعرض الملابس في قسم الصور والأحذية في قسم الفيديو.

هذا هو الكود:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'متجر الملابس والأحذية',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ProductTabBarView(),
);
}
}

class ProductTabBarView extends StatefulWidget {
@override
_ProductTabBarViewState createState() => _ProductTabBarViewState();
}

class _ProductTabBarViewState extends State<ProductTabBarView>
with SingleTickerProviderStateMixin {
late TabController _tabController;

@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}

@override
void dispose() {
_tabController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('متجر الملابس والأحذية'),
bottom: TabBar(
controller: _tabController,
tabs: [
Tab(text: 'الملابس'),
Tab(text: 'الأحذية'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
Center(
child: Text('قسم الملابس', style: TextStyle(fontSize: 20)),
),
Center(
child: Text('قسم الأحذية', style: TextStyle(fontSize: 20)),
),
],
),
);
}
}

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

اكتب شجرة الويدجتات

 شجرة الواجهة الرسومية (Widget Tree) لتطبيقنا:

MaterialApp
└─ ProductTabBarView
   └─ Scaffold
      └─ appBar: AppBar
         └─ title: Text('متجر الملابس والأحذية')
         └─ bottom: TabBar
            └─ controller: _tabController
            └─ tabs: [Tab, Tab]
      └─ body: TabBarView
         └─ controller: _tabController
         └─ scrollDirection: Axis.horizontal
         └─ cacheExtent: 2
         └─ dragStartBehavior: DragStartBehavior.start
         └─ keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag
         └─ clipBehavior: Clip.antiAlias
         └─ pageSnapping: false
         └─ physics: BouncingScrollPhysics
         └─ shrinkWrap: true
         └─ children: [Center, Center]
            ├─ Text('قسم الملابس')
            └─ Text('قسم الأحذية')

هذه الشجرة تصف تركيبة الواجهة الرسومية لتطبيقنا، بدءًا من MaterialApp كمستوى رئيسي ومن ثم ProductTabBarView كمستوى فرعي. ثم تحتوي Scaffold على AppBar وTabBar في الأعلى و TabBarView في الجزء السفلي، مع تخصيص الخصائص المختلفة.

اختبار   حول استخدام TabBarView في Flutter:

1-ما هو دور TabBarView في تطبيقات Flutter؟

(أ) عرض البيانات في قوائم منسقة بشكل جيد
(ب) تمكين الملاحة بين عدة شاشات في التطبيق
(ج) إظهار مجموعة من العناصر على شكل علامات تبويب

2-كيف يتم تعيين علامات التبويب في TabBarView؟

(أ) باستخدام TabBar في Scaffold
(ب) باستخدام TabController مع TabBarView
(ج) باستخدام TabBarView مباشرة داخل MaterialApp

3-ما الخاصية المستخدمة لتحديد اتجاه التمرير في TabBarView؟

(أ) scrollDirection
(ب) cacheExtent
(ج) physics

4-ماذا يفعل pageSnapping في TabBarView؟

(أ) يتيح للمستخدمين التمرير بين الصفحات على شكل قفزات
(ب) يسمح للعناصر بالتقاط الصفحات عندما يكونون قريبين منها
(ج) يقوم بتخزين الصفحات المعروضة في الذاكرة لزيادة الأداء

5-كيف يمكن تعيين فيزياء التمرير لـ TabBarView؟

(أ) عبر خاصية physics
(ب) عبر خاصية scrollPhysics
(ج) عبر خاصية dragPhysics

6-ما هو الخاصية المستخدمة لتمكين أو تعطيل قفز الصفحات في TabBarView؟

(أ) pageSnapping
(ب) enablePageSnapping
(ج) snappingEnabled

7-كيف يمكن تعيين قائمة من TabBarView؟

(أ) باستخدام TabBar مع tabs في Scaffold
(ب) باستخدام children في TabBarView
(ج) باستخدام items في TabBar

8-ماذا يقوم shrinkWrap بفعله في TabBarView؟

(أ) يقلل حجم العناصر لتناسب حجم الشاشة
(ب) يقلل حجم TabBarView لتناسب حجم العناصر
(ج) لا شيء من الخيارات المذكورة

9- ما هو الهدف من استخدام cacheExtent في TabBarView؟

(أ) تحديد عدد الصفحات المخبأة في الذاكرة
(ب) تحديد حجم الذاكرة المستخدمة للتخزين المؤقت
(ج) تحديد عدد العناصر المخبأة في الذاكرة

10-ما الفئة التي يجب أن تُستخدم لتنفيذ vsync في TabController؟

(أ) StatefulWidget
(ب) SingleTickerProviderStateMixin
(ج) TabBarView

11-ما الفائدة من استخدام clipBehavior في TabBarView؟

(أ) تحديد كيفية عرض العناصر الزائدة عن حدود الواجهة
(ب) تحديد كيفية عرض العناصر عند التمرير خارج الحدود المرئية
(ج) تحديد كيفية قص العناصر التي تتجاوز الحدود المحددة

12-ماذا يقوم keyboardDismissBehavior بفعله في TabBarView؟

(أ) يحدد سلوك اللوحة المفاتيح عند السحب
(ب) يسمح بإغلاق اللوحة المفاتيح عند النقر على عنصر معين
(ج) يتحكم في ظهور لوحة المفاتيح عند النقر في حقل نص

13-ما هي الخاصية التي يمكن استخدامها لتغيير سلوك السحب في TabBarView؟

(أ) scrollDirection
(ب) pageSnapping
(ج) dragStartBehavior

14-ما هو التأثير الذي يضيفه استخدام physics في TabBarView؟

(أ) تحديد كيفية تفاعل العناصر مع التمرير
(ب) تحديد كيفية تغيير حجم العناصر عند التمرير
(ج) تحديد كيفية تغيير لون العناصر عند التمرير

15-ما هو الفرق بين shrinkWrap و scrollDirection في TabBarView؟

(أ) shrinkWrap يقلل حجم TabBarView لتناسب حجم العناصر، بينما scrollDirection يحدد اتجاه التمرير.
(ب) shrinkWrap يقلل حجم العناصر لتناسب حجم TabBarView، بينما scrollDirection يقلل عدد العناصر المعروضة في كل مرة.
(ج) shrinkWrap يحدد اتجاه التمرير، بينما scrollDirection يقلل حجم العناصر لتناسب حجم TabBarView.

16-ما هي الطريقة الصحيحة لتعيين TabController في TabBarView؟

(أ) استخدام TabController في build داخل StatefulWidget
(ب) استخدام TabController في دالة initState داخل State
(ج) استخدام TabController في دالة dispose داخل StatefulWidget

17-ما الذي يحدد عدد العناصر المخبأة في الذاكرة عند استخدام cacheExtent؟

(أ) عدد العناصر المعروضة في كل مرة
(ب) عدد الصفحات التي يتم تحميلها مسبقًا في الذاكرة
(ج) عدد العناصر التي يمكن تخزينها في الذاكرة

18-ما الذي يحدد إذا ما كان يمكن للمستخدم القفز إلى الصفحة بالكامل في TabBarView؟

(أ) clipBehavior
(ب) pageSnapping
(ج) physics

19-ما هي الخاصية المستخدمة لتحديد سلوك بدء السحب في TabBarView؟

(أ) dragStartBehavior
(ب) keyboardDismissBehavior
(ج) physics

20-ما هي الخاصية التي يمكن استخدامها لتعيين فيزياء التمرير في TabBarView؟

(أ) scrollPhysics
(ب) physics
(ج) dragPhysics

الاجابات 

ب – تمكين الملاحة بين عدة شاشات في التطبيق.
ب – باستخدام TabController مع TabBarView.
أ – scrollDirection.
أ – يتيح للمستخدمين التمرير بين الصفحات على شكل قفزات.
أ – physics.
أ – pageSnapping.
ب – باستخدام children في TabBarView.
أ – يقلل حجم العناصر لتناسب حجم الشاشة.
أ – تحديد عدد الصفحات المخبأة في الذاكرة.
ب – SingleTickerProviderStateMixin.
ج – تحديد كيفية قص العناصر التي تتجاوز الحدود المحددة.
أ – يحدد سلوك اللوحة المفاتيح عند السحب.
ج – dragStartBehavior.
أ – تحديد كيفية تفاعل العناصر مع التمرير.
أ – shrinkWrap يقلل حجم TabBarView لتناسب حجم العناصر، بينما scrollDirection يحدد اتجاه التمرير.
ب – استخدام TabController في دالة initState داخل State.
ب – عدد الصفحات التي يتم تحميلها مسبقًا في الذاكرة.
ب – pageSnapping.
أ – dragStartBehavior.
ب – physics.
أتمنى أن تكون الإجابات واضحة ومفهومة! إذا كان لديك أي أسئلة أخرى، فلا تتردد في طرحها