ویجت TabBarView

تعداد بازدید ها : 707 بازدید
 ویجت 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 نمایش داده شده است :

می خوانم   کلاس Positioned

WhatsApp_Sample

جهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .

امیدوام این مطلب برای شما مفید باشد .

4+
محمدمجتبی جوارشکیان

محمدمجتبی جوارشکیان

من محمدمجتبی جوارشکیان ، کارشناس IT و فعال اجتماعی هستم و در حوزه معماری ، طراحی ، تحلیل گری ، مدلسازی و توسعه ی محیط های نرم افزاری فعالیت دارم . بسیار خوشحال می شوم من را از انتقادات ، پیشنهادات و نظرات خود مطلع فرمایید . آدرس ایمیل : info@javareshkian.ir

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

چهار + 5 =