import 'package:flutter/material.dart';/* * 枚舉類，標簽演示樣式 * 圖標和文本 * 僅圖標 * 僅文本 */enum TabsDemoStyle { iconsAndText, iconsOnly, textOnly}/* * 頁面類 * 圖標 * 文本 */class _Page { _Page({ this.icon, this.text, }); final IconData icon; final String text;}// 存儲所有頁面的列表final List<_Page> _allPages = <_Page>[ new _Page(icon: Icons.event, text: 'EVENT'), new _Page(icon: Icons.home, text: 'HOME'), new _Page(icon: Icons.android, text: 'ANDROID'), new _Page(icon: Icons.alarm, text: 'ALARM'), new _Page(icon: Icons.face, text: 'FACE'), new _Page(icon: Icons.language, text: 'LANGUAGE'),];class ScrollableTabsDemo extends StatefulWidget { @override _ScrollableTabsDemoState createState() => new _ScrollableTabsDemoState();}// 繼承SingleTickerProviderStateMixin，提供單個Ticker（每個動畫幀調用它的回調一次）class _ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTickerProviderStateMixin { /* * 在TabBar和TabBarView之間的坐標選項卡選擇 * TabBar：質感設計控件，顯示水平的一行選項卡 * TabBarView：可分布列表，顯示與當前所選標簽對應的控件 */ TabController _controller; TabsDemoStyle _demoStyle = TabsDemoStyle.iconsAndText; @override void initState() { super.initState(); /* * 創建一個對象，用于管理TabBar和TabBarView所需的狀態 * length：選項卡的總數，存儲所有頁面的列表中的元素個數 */ _controller = new TabController(vsync: this, length: _allPages.length); } // 釋放對象使用的資源 @override void dispose() { super.dispose(); _controller.dispose(); } void changeDemoStyle(TabsDemoStyle style) { setState((){ _demoStyle = style; }); } @override Widget build(BuildContext context) { // 獲取當前主題的控件前景色 final Color iconColor = Theme.of(context).accentColor; return new Scaffold( appBar: new AppBar( title: new Text('可滾動的標簽頁'), actions: <Widget>[  new PopupMenuButton<TabsDemoStyle>(  onSelected: changeDemoStyle,  itemBuilder: (BuildContext context) => <PopupMenuItem<TabsDemoStyle>>[  new PopupMenuItem<TabsDemoStyle>(  value: TabsDemoStyle.iconsAndText,  child: new Text('圖標和文本')  ),  new PopupMenuItem<TabsDemoStyle>(  value: TabsDemoStyle.iconsOnly,  child: new Text('僅圖標')  ),  new PopupMenuItem<TabsDemoStyle>(  value: TabsDemoStyle.textOnly,  child: new Text('僅文本')  )  ]  ), ], bottom: new TabBar(  // 控件的選擇和動畫狀態  controller: _controller,  // 標簽欄是否可以水平滾動  isScrollable: true,  // 標簽控件的列表  tabs: _allPages.map((_Page page){  switch(_demoStyle) {  case TabsDemoStyle.iconsAndText:  return new Tab(text: page.text, icon: new Icon(page.icon));  case TabsDemoStyle.iconsOnly:  return new Tab(icon: new Icon(page.icon));  case TabsDemoStyle.textOnly:  return new Tab(text: page.text);  }  }).toList(), ), ), body: new TabBarView( // 控件的選擇和動畫狀態 controller: _controller, // 每個標簽一個控件 children: _allPages.map((_Page page) {  return new Container(  key: new ObjectKey(page.icon),  padding: const EdgeInsets.all(12.0),  // 質感設計卡片  child:new Card(  child: new Center(  child: new Icon(   page.icon,   color: iconColor,   size: 128.0,  )  )  )  ); }).toList(), ) ); }}void main() { runApp(new MaterialApp( title: 'Flutter教程', home: new ScrollableTabsDemo(), ));}