Flutter TabBar、TabBarView、DefaultTabController

Flutter的TabBar选项卡一般位于AppBar下方，通常和TabBarView、TabController一起使用：
TabBar：Tab页的选项组件，默认为水平排列：

属性名	类型	说明
isScrollable	bool	是否可以水平移动
tabs	List<Widget>	Tab选项列表

Tab组件常常放在TabBar的tabs里来使用，定义单个tab的文字、图标等内容：

属性名	类型	说明
icon	Widget	Tab图标
text	String	Tab文本

TabBarView：Tab页的内容容器，Tab页内容一般处理为随选项卡的改变而改变。

属性名	类型	说明
controller	TabController	指定视图的控制器
children	List<Widget>	视图组件的child为一个列表，一个选项卡对应一个视图

TabController：TabBar和TabBarView的控制器，它是关联这两个组件的桥梁。
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(),
              ),
            )
        ),
      ),
    );
  }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！