Flutter Material Components Widgets之TabBar与TabBarView

TabBar 水平选择标签。

1、通常创建为AppBar的AppBar.bottom部分并与TabBarView结合使用；也可以与IndexedStack或PageView结合使用
2、如果TabBar 未提供TabController，则必须提供DefaultTabController作为父widget。选项卡控制器的TabController.length必须等于选项卡列表的长度。

构造函数

const TabBar({
    Key key,
    @required this.tabs,
    this.controller,
    this.isScrollable = false,
    this.indicatorColor,
    this.indicatorWeight = 2.0,
    this.indicatorPadding = EdgeInsets.zero,
    this.indicator,
    this.indicatorSize,
    this.labelColor,
    this.labelStyle,
    this.labelPadding,
    this.unselectedLabelColor,
    this.unselectedLabelStyle,
  })

• tabs → List < Widget >
  通常是两个或多个Tab小部件的列表
• controller → TabController
  用于TabBar的选择和动画状态 如果不设置的话 请以DefaultTabController作为父widget
• isScrollable → bool
  TabBar是否可以水平滚动
• indicator → Decoration
  定义所选选项卡指示器的外观
• indicatorColor → 颜色
  显示在所选选项卡下方的线条颜色。如果此参数为null，则使用Theme的indicatorColor属性的值
• indicatorPadding → EdgeInsetsGeometry
  显示在所选选项卡下方的线条的水平填充。对于isScrollable标签栏，指定kTabLabelPadding将使指示符与Tab小部件的选项卡文本以及除最短Tab.text值之外的所有文本对齐
• indicatorSize → TabBarIndicatorSize
  定义如何计算选定选项卡指示符的大小
• indicatorWeight → double
  显示在所选选项卡下方的线条粗细。此参数的值必须大于零
• labelColor → Color
  所选标签标签的颜色
• labelPadding → EdgeInsetsGeometry
  填充添加到每个选项卡标签
• labelStyle → TextStyle
  所选标签标签的文本样式。如果unselectedLabelStyle为null，则此文本样式将用于选定和未选定的标签样式
• preferredSize → Size
  高度取决于标签是否同时包含图标和文本的大小
• unselectedLabelColor → Color
  未选定标签标签的颜色
• unselectedLabelStyle → TextStyle
  未选中标签标签的文字样式

TabBarView 显示与当前所选选项卡对应的窗口小部件的页面视图。

1、通常与TabBar一起使用。
2、如果未提供TabController，则必须有DefaultTabController 作为父widget
构造函数

const TabBarView({
    Key key,
    @required this.children,
    this.controller,
    this.physics,
  })

• children → List
  与TabBar 对应的每一个view
• controller → TabController
  此小部件的选择和动画状态 如果不设置的话 请以DefaultTabController作为父widget
• physics→ ScrollPhysics
  页面视图应如何响应用户输入

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  List<Tab> _tabs = [
    new Tab(text: "test1",),
    new Tab(text: "test2",),
    new Tab(text: "test3",),
    new Tab(text: "test4",),
    new Tab(text: "test5",),
  ];
  List<Widget> _tabViews = [
    new Center(child: new Text("test1",style: new TextStyle(fontSize: 24),),),
    new Center(child: new Text("test2",style: new TextStyle(fontSize: 24),),),
    new Center(child: new Text("test3",style: new TextStyle(fontSize: 24),),),
    new Center(child: new Text("test4",style: new TextStyle(fontSize: 24),),),
    new Center(child: new Text("test5",style: new TextStyle(fontSize: 24),),),
  ];

  Widget build(BuildContext context) {
    return new DefaultTabController(length: 5, child: new Scaffold(
      appBar: new AppBar(
        title: new Text("TabBar and TabBarView"),
        bottom: new TabBar(tabs: _tabs,
          indicator: new BoxDecoration(image: new DecorationImage(image: NetworkImage("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3260609003,3965213395&fm=27&gp=0.jpg"))),
        )
        ,
      ),
      body: new TabBarView(children: _tabViews),
    ));
  }

}