TabBar:Tab页的选项组件,默认为水平排列:
属性名 | 类型 | 说明 |
isScrollable | bool | 是否可以水平移动 |
tabs | List<Widget> | Tab选项列表 |
属性名 | 类型 | 说明 |
icon | Widget | Tab图标 |
text | String | Tab文本 |
属性名 | 类型 | 说明 |
controller | TabController | 指定视图的控制器 |
children | List<Widget> | 视图组件的child为一个列表,一个选项卡对应一个视图 |
DefaultTabController:和TabController作用一致,也是关联TabBar和TabBarView的,但是它是无状态的组件,TabController是有状态的。
下面是DefalutTabController、TabBar、TabBarView案例:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ final List<Tab> _myTabs = <Tab>[ Tab(text: '选项一',icon: Icon(Icons.add_shopping_cart),), Tab(text: '选项二',icon: Icon(Icons.wifi_tethering),), Tab(text: '选项三',icon: Icon(Icons.airline_seat_flat_angled),) ]; @override Widget build(BuildContext context) { return new MaterialApp( debugShowCheckedModeBanner: false, title: 'TabBar Demo', home: new Scaffold( body: DefaultTabController( length: _myTabs.length, initialIndex: 1, child: Scaffold( appBar: new AppBar( title: new Text('TabBar Demo'), leading: Icon(Icons.menu), actions: <Widget>[ Icon(Icons.search) ], bottom: new TabBar( tabs: _myTabs, indicatorColor: Colors.black, indicatorWeight: 5, indicatorSize: TabBarIndicatorSize.label, labelColor: Colors.limeAccent, unselectedLabelColor: Colors.deepOrange, ), ), body: new TabBarView( children: _myTabs.map((Tab tab){ return Center( child: new Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Icon(Icons.tab), Text(tab.text) ], ), ); }).toList(), ), ) ), ), ); } }