20Flutter經過TabController定義頂部tab切換,介紹生命週期函數

基本使用:app

import 'package:flutter/material.dart'; class TabBarControllerPage extends StatefulWidget { TabBarControllerPage({Key key}) : super(key: key); _TabBarControllerPageState createState() => _TabBarControllerPageState(); } class _TabBarControllerPageState extends State<TabBarControllerPage> with SingleTickerProviderStateMixin{ TabController _tabController; @override void dispose(){ //生命週期函數:
 super.dispose(); _tabController.dispose(); } @override void initState(){  //生命週期函數:
 super.initState(); _tabController=new TabController( vsync: this, length: 2 ); _tabController.addListener((){ print(_tabController.index); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('TabBarControllerPage'), bottom: TabBar( controller:this._tabController, tabs: <Widget>[ Tab(text: '熱銷'), Tab(text: '推薦') ], ), ), body: TabBarView( controller: this._tabController, children: <Widget>[ Center(child: Text('熱銷')), Center(child: Text('推薦')) ], ) ); } }
相關文章
相關標籤/搜索