Flutter基础-054-TabBar

构造方法

const TabBar({
   Key key,
   @required this.tabs,//WidgetList，tab列表，
   this.controller,//控制器
   this.isScrollable: false,//总长度超出宽度区域后是否可以滚动
   this.indicatorColor,//下划线颜色
   this.indicatorWeight: 1,// 下划线宽度
   this.indicatorPadding: EdgeInsets.zero,//下划线padding
   this.indicator,//自定义下划线
   this.indicatorSize,//下划线大小
   this.labelColor,//tab内的文字颜色
   this.labelStyle,//tab内的文字style
   this.unselectedLabelColor,//未选中tab内的文字颜色
   this.unselectedLabelStyle,//未选中tab内的文字style
 })

示例

代码

class _MyHomePageState extends State<MyHomePage> {
  final List<Tab> tabs = <Tab>[
    Tab(text: '科技',icon: Icon(Icons.add_alarm),),
    Tab(text: '生活'),
    Tab(text: '健康'),
    Tab(text: '骑车'),
    Tab(text: '摩托车'),
    Tab(text: '天下无敌'),
    Tab(text: '天色将变'),
    Tab(text: '孔雀大明王'),
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: Text("TabBar"),
          bottom:TabBar(
            tabs: tabs,
            isScrollable: true,
            indicatorColor: Colors.orange[400],
            labelColor: Colors.white,
          ),
        ),
        body: TabBarView(
            children: tabs
                .map((Tab tab) => Center(child: Container(
              width: 200,
              height: 200,
              child: tab,
              color: Colors.orange[200],
            )))
                .toList()),
      ),
    );
  }
}

需要注意：

• TabBar与TabBarView需要在TabController内部
• 二者children的长度需要相同