首页 > 建站教程 > APP开发,混合APP >  Flutter TabBar、TabBarView、DefaultTabController正文

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