快捷導(dǎo)航

Flutter進(jìn)階質(zhì)感設(shè)計(jì)之標(biāo)簽欄

更新時(shí)間：2021年10月11日 16:49:39 作者：何小有

這篇文章主要為大家詳細(xì)介紹了Flutter進(jìn)階質(zhì)感設(shè)計(jì)之標(biāo)簽欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在質(zhì)感設(shè)計(jì)的控件中，有一個(gè)顯示水平的一行選項(xiàng)卡，通常作為AppBar控件的一部分創(chuàng)建，并與TabBarView控件結(jié)合使用。

import 'package:flutter/material.dart';
/*
 * 枚舉類，標(biāo)簽演示樣式
 * 圖標(biāo)和文本
 * 僅圖標(biāo)
 * 僅文本
 */
enum TabsDemoStyle {
 iconsAndText,
 iconsOnly,
 textOnly
}
/*
 * 頁(yè)面類
 * 圖標(biāo)
 * 文本
 */
class _Page {
 _Page({
 this.icon,
 this.text,
 });
 final IconData icon;
 final String text;
}
// 存儲(chǔ)所有頁(yè)面的列表
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，提供單個(gè)Ticker（每個(gè)動(dòng)畫幀調(diào)用它的回調(diào)一次）
class _ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTickerProviderStateMixin {
 /*
 * 在TabBar和TabBarView之間的坐標(biāo)選項(xiàng)卡選擇
 * TabBar：質(zhì)感設(shè)計(jì)控件，顯示水平的一行選項(xiàng)卡
 * TabBarView：可分布列表，顯示與當(dāng)前所選標(biāo)簽對(duì)應(yīng)的控件
 */
 TabController _controller;
 TabsDemoStyle _demoStyle = TabsDemoStyle.iconsAndText;
 @override
 void initState() {
 super.initState();
 /*
 * 創(chuàng)建一個(gè)對(duì)象，用于管理TabBar和TabBarView所需的狀態(tài)
 * length：選項(xiàng)卡的總數(shù)，存儲(chǔ)所有頁(yè)面的列表中的元素個(gè)數(shù)
 */
 _controller = new TabController(vsync: this, length: _allPages.length);
 }
 // 釋放對(duì)象使用的資源
 @override
 void dispose() {
 super.dispose();
 _controller.dispose();
 }
 void changeDemoStyle(TabsDemoStyle style) {
 setState((){
 _demoStyle = style;
 });
 }
 @override
 Widget build(BuildContext context) {
 // 獲取當(dāng)前主題的控件前景色
 final Color iconColor = Theme.of(context).accentColor;
 return new Scaffold(
 appBar: new AppBar(
 title: new Text('可滾動(dòng)的標(biāo)簽頁(yè)'),
 actions: <Widget>[
  new PopupMenuButton<TabsDemoStyle>(
  onSelected: changeDemoStyle,
  itemBuilder: (BuildContext context) => <PopupMenuItem<TabsDemoStyle>>[
  new PopupMenuItem<TabsDemoStyle>(
  value: TabsDemoStyle.iconsAndText,
  child: new Text('圖標(biāo)和文本')
  ),
  new PopupMenuItem<TabsDemoStyle>(
  value: TabsDemoStyle.iconsOnly,
  child: new Text('僅圖標(biāo)')
  ),
  new PopupMenuItem<TabsDemoStyle>(
  value: TabsDemoStyle.textOnly,
  child: new Text('僅文本')
  )
  ]
  ),
 ],
 bottom: new TabBar(
  // 控件的選擇和動(dòng)畫狀態(tài)
  controller: _controller,
  // 標(biāo)簽欄是否可以水平滾動(dòng)
  isScrollable: true,
  // 標(biāo)簽控件的列表
  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(
 // 控件的選擇和動(dòng)畫狀態(tài)
 controller: _controller,
 // 每個(gè)標(biāo)簽一個(gè)控件
 children: _allPages.map((_Page page) {
  return new Container(
  key: new ObjectKey(page.icon),
  padding: const EdgeInsets.all(12.0),
  // 質(zhì)感設(shè)計(jì)卡片
  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(),
 ));
}