تطبيقات الهواتف الذكية تتضمن عادة شريط تبويبات (TabBar) الذي يسهل التنقل بين الصفحات وترتيب المحتوى. في Flutter، يمكن استخدام TabBar و TabBarView لتنظيم المحتوى وتسهيل التنقل بين الصفحات. في هذه المقالة، سنتحدث عن كيفية استخدام TabBar و TabBarView في تطبيقات Flutter وسنقدم شرحًا تفصيليًا لجميع خصائصهما.
ما هو TabBar و TabBarView؟
TabBar و TabBarView هما عناصر واجهة المستخدم في Flutter تستخدم لتنظيم المحتوى وتسهيل التنقل بين الصفحات. يتم استخدام TabBar لعرض علامات التبويب التي يمكن للمستخدم النقر عليها للانتقال إلى صفحة معينة. ويتم استخدام TabBarView لعرض محتوى الصفحات المختلفة التي تتبع علامات التبويب.
خصائص TabBar في فلاتر
تتضمن خصائص TabBar الرئيسية التالية:
tabs
يتم استخدام الخاصية tabs لتحديد عدد العلامات التبويب ومحتوياتها. يجب أن يكون هذا الخيار قائمة من عناصر Tab على النحو التالي:
TabBar( tabs: [ Tab(icon: Icon(Icons.home), text: 'Home'), Tab(icon: Icon(Icons.search), text: 'Search'), Tab(icon: Icon(Icons.person), text: 'Profile'), ], )
“اقرأ أيضاً: شرح استخدام ويدجت SnackBar في فلاتر“
controller
يتم استخدام خاصية controller لربط TabBar بـ TabBarView. يتم تمريره إلى كلا العنصرين الرئيسيين TabBar و TabBarView. يمكن استخدام هذه الخاصية لتحديد علامة التبويب الحالية أو تغيير العلامة التبويبية برمجيًا.
TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); } @override void dispose() { _tabController.dispose(); super.dispose(); } ... TabBar( controller: _tabController, tabs: [ Tab(icon: Icon(Icons.home), text: 'Home'), Tab(icon: Icon(Icons.search), text: 'Search'), Tab(icon: Icon(Icons.person), text: 'Profile'), ], ), TabBarView( controller: _tabController, children: [ HomeTab(), SearchTab(), ProfileTab(), ], ),
“اقرأ أيضاً: شرح استخدام ويدجت WillPopScope في فلاتر“
isScrollable
يتم استخدام خاصية isScrollable لتحديد ما إذا كانت علامات التبويب يمكن أن تتحرك على محور الأفق أو لا. عندما تكون قيمة هذه الخاصية true، يمكن لعلامات التبويب العرض في أكثر من سطر.
TabBar( isScrollable: true, tabs: [ Tab(icon: Icon(Icons.home), text: 'Home'), Tab(icon: Icon(Icons.search), text: 'Search'), Tab(icon: Icon(Icons.person), text: 'Profile'), Tab(icon: Icon(Icons.settings), text: 'Settings'), Tab(icon: Icon(Icons.help), text: 'Help'), Tab(icon: Icon(Icons.info), text: 'Info'), ], )
indicatorColor
يتم استخدام خاصية indicatorColor لتحديد لون شريط الإشارة الذي يظهر تحت العلامة التبويبية الحالية.
TabBar( indicatorColor: Colors.red, tabs: [ Tab(icon: Icon(Icons.home), text: 'Home'), Tab(icon: Icon(Icons.search), text: 'Search'), Tab(icon: Icon(Icons.person), text: 'Profile'), ], )
indicatorWeight
يتم استخدام خاصية indicatorWeight لتحديد سمك شريط الإشارة الذي يظهر تحت العلامة التبويبية الحالية.
TabBar( indicatorWeight: 4.0, tabs: [ Tab(icon: Icon(Icons.home), text: 'Home'), Tab(icon: Icon(Icons.search), text: 'Search'), Tab(icon: Icon(Icons.person), text: 'Profile'), ], )
labelColor
يتم استخدام خاصية labelColor لتحديد لون نص العلامة التبويبية الحالية.
TabBar( labelColor: Colors.red, tabs: [ Tab(icon: Icon(Icons.home), text: 'Home'), Tab(icon: Icon(Icons.search), text: 'Search'), Tab(icon: Icon(Icons.person), text: 'Profile'), ], )
labelStyle
يتم استخدام خاصية labelStyle لتحديد نمط النص الخاص بالعلامة التبويبية الحالية.
TabBar( labelStyle: TextStyle(fontWeight: FontWeight.bold), tabs: [ Tab(icon: Icon(Icons.home), text: 'Home'), Tab(icon: Icon(Icons.search), text: 'Search'), Tab(icon: Icon(Icons.person), text: 'Profile'), ], )
خصائص TabBarView
تتضمن خصائص TabBarView الرئيسية التالية:
controller
يتم استخدام خاصية controller لربط TabBarView بـ TabBar.
TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); } @override void dispose() { _tabController.dispose(); super.dispose(); } ... TabBar( controller: _tabController, tabs: [ Tab(icon: Icon(Icons.home), text: 'Home'), Tab(icon: Icon(Icons.search), text: 'Search'), Tab(icon: Icon(Icons.person), text: 'Profile'), ], ), TabBarView( controller: _tabController, children: [ HomeTab(), SearchTab(), ProfileTab(), ], ),
children
يتم استخدام خاصية children لتحديد عدد صفحات العرض التي تتبع علامات التبويب.
TabBarView( children: [ HomeTab(), SearchTab(), ProfileTab(), ], ),
physics
يتم استخدام خاصية physics لتحديد نوع التمرير في صفحات العرض. يمكن استخدام هذه الخاصية لتمكين أو تعطيل التمرير.
TabBarView( physics: NeverScrollableScrollPhysics(), children: [ HomeTab(), SearchTab(), ProfileTab(), ], ),
مثال على استخدام TabBar و TabBarView في فلاتر
اليك مثال كامل على استخدام TabBar و TabBarView في Flutter:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), bottom: TabBar( controller: _tabController, tabs: [ const Tab(icon: Icon(Icons.home), text: 'Home'), const Tab(icon: Icon(Icons.search), text: 'Search'), const Tab(icon: Icon(Icons.person), text: 'Profile'), ], ), ), body: TabBarView( controller: _tabController, children: [ const Center( child: Text('Home'), ), const Center( child: Text('Search'), ), const Center( child: Text('Profile'), ), ], ), ); } }
في هذا المثال، يتم استخدام TabBar و TabBarView في Scaffold. يتم تعيين عدد من العلامات التبويبية إلى TabBar و TabBarView يتم تعيين صفحات العرض المختلفة إلى children. يتم استخدام خاصية controller لربط TabBarView بـ TabBar.
“اقرأ أيضاً: شرح استخدام ويدجت InkWell في فلاتر“
تستخدم TabBar و TabBarView في Flutter لتنظيم المحتوى وتسهيل التنقل بين الصفحات. يمكن للمطورين تخصيص TabBar و TabBarView باستخدام الخصائص المختلفة المتاحة. في هذه المقالة، قدمنا شرحًا تفصيليًا لجميع خصائص TabBar و TabBarView في Flutter. نأمل أن يكون هذا المقال مفيد