Flutter TabBar、TabBarView、DefaultTabController_APP开发,混合APP_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

Flutter TabBar、TabBarView、DefaultTabController

来源：cnblogs 作者：类型：文章教程点击次数：发布时间：2020-12-11 11:28:27

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案例：

01import 'package:flutter/material.dart';
02 
03void main() => runApp(MyApp());
04 
05class MyApp extends StatelessWidget{
06  final List<Tab> _myTabs = <Tab>[
07    Tab(text: '选项一',icon: Icon(Icons.add_shopping_cart),),
08    Tab(text: '选项二',icon: Icon(Icons.wifi_tethering),),
09    Tab(text: '选项三',icon: Icon(Icons.airline_seat_flat_angled),)
10  ];
11  @override
12  Widget build(BuildContext context) {
13    return new MaterialApp(
14      debugShowCheckedModeBanner: false,
15      title: 'TabBar Demo',
16      home: new Scaffold(
17        body: DefaultTabController(
18            length: _myTabs.length,
19            initialIndex: 1,
20            child: Scaffold(
21              appBar: new AppBar(
22                title: new Text('TabBar Demo'),
23                leading: Icon(Icons.menu),
24                actions: <Widget>[
25                  Icon(Icons.search)
26                ],
27                bottom: new TabBar(
28                  tabs: _myTabs,
29                  indicatorColor: Colors.black,
30                  indicatorWeight: 5,
31                  indicatorSize: TabBarIndicatorSize.label,
32                  labelColor: Colors.limeAccent,
33                  unselectedLabelColor: Colors.deepOrange,
34                ),
35              ),
36              body: new TabBarView(
37                  children: _myTabs.map((Tab tab){
38                    return Center(
39                        child: new Column(
40                          mainAxisSize: MainAxisSize.min,
41                          children: <Widget>[
42                            Icon(Icons.tab),
43                            Text(tab.text)
44                          ],
45                      ),
46                    );
47                  }).toList(),
48              ),
49            )
50        ),
51      ),
52    );
53  }
54}