ویجت TabBarView
با انتخاب هر یک از تب های نمایش داده شده توسط ویجت TabBar ، شما نیاز دارید تا محتویات صفحه را تغییر دهید ، در این حالت از ویجت TabBarView استفاده می نمایید در واقع ویجت TabBarView جهت نمایش نمای صفحه ای که ویجت مربوط به برگه انتخاب شده فعلی را نشان می دهد ، به کار می رود ، این ویجت معمولاً در رابطه با یک ویجت TabBar استفاده می شود . این ویجت جهت نمایش ویجت های موجود در خصوصیت children خود به یک tabController نیاز دارد که توسط ویجت TabBar ایجاد و مقداردهی می گردد و عمل جابجایی بین نماهای مختلف صفحه به صورت خودکار اتفاق می افتد و نیاز به کد نویسی از جانب شما نیست .
تذکر مهم : ویجت TabBarView به ترتیب تب ها نسبت به انتخاب ویجت از لیست children خود اقدام می نماید .
قطعه کد زیر نمونه ای از پیاده سازی TabBarView را به نمایش گذاشته است :
class MyTabbedPage extends StatefulWidget { const MyTabbedPage({ Key key }) : super(key: key); @override _MyTabbedPageState createState() => _MyTabbedPageState(); } class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin { final List<Tab> myTabs = <Tab>[ Tab(text: 'LEFT'), Tab(text: 'RIGHT'), ]; TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(vsync: this, length: myTabs.length); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( bottom: TabBar( controller: _tabController, tabs: myTabs, ), ), body: TabBarView( controller: _tabController, children: myTabs.map((Tab tab) { final String label = tab.text.toLowerCase(); return Center( child: Text( 'This is the $label tab', style: const TextStyle(fontSize: 36), ), ); }).toList(), ), ); } }
در تصویر زیر نمونه ای از پیاده سازی TabBarView نمایش داده شده است :
جهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .
امیدوام این مطلب برای شما مفید باشد .