Flutter 진급 질감 디자인 의 라벨 표시 줄

질감 디자인 의 컨트롤 에 수평 을 표시 하 는 옵션 이 있 습 니 다.보통 AppBar 컨트롤 의 일부분 으로 만 들 고 TabBarView 컨트롤 과 결합 하여 사용 합 니 다.

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(),
 ));
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.