flutter demo系列二 Tabbar选项卡 顶部切换导航

demo练习2，首页顶部选项卡导航
效果图：
TabBar 导航的实现 需要 配合 TabController 和 Tabbarview来实现
abBarView和TabBar都有一个tabController的参数
/TabBarView和Tab是由TabController来控制同步
step1:
创建TabController
TabController 有两种
自定义TabController
系统自带DefaultTabController
此处为;DefaultTabController
2.step2.
创建tabbar
属性 意义
tabs 一般使用Tab对象,当然也可以是其他的Widget
controller TabController对象
isScrollable 是否可滚动
indicatorColor 指示器颜色
indicatorWeight 指示器厚度
indicatorPadding 底部指示器的Padding
indicator 指示器decoration，例如边框等
indicatorSize 指示器大小计算方式
labelColor 选中Tab文字颜色
labelStyle 选中Tab文字Style
unselectedLabelColor 未选中Tab中文字颜色
unselectedLabelStyle 未选中Tab中文字style

3.step3
创建tabbarview

class homeState extends State{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //step1 创建TabController TabBarView和TabBar都有一个tabController的参数
    //TabBarView和Tab是就由TabController来控制同步
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
          //appbar背景颜色
            backgroundColor: Colors.green[400],
            title: Text("TabBar"),
            //step2.创建tabbar
            bottom: TabBar(
              //文字颜色
              labelColor: Colors.white,
              labelStyle: TextStyle(fontSize: 14),
              //指示器下划线长度 label 与文字同宽  tab 撑满
              indicatorSize: TabBarIndicatorSize.label,
              //指示器内边距  只有在label下才有效
              indicatorPadding: EdgeInsets.only(bottom: 8),
              //指示器的颜色
              indicatorColor: Colors.white,
              //指示器的高度
              indicatorWeight: 3,
//            //指示器修饰Decoration
//              indicator: under ,
              //是否可滚动
              isScrollable: false,
                //选项卡
                tabs: [
              Tab(text: "动态",),
              Tab(text: "推荐",)
            ]),
          ),
          //step3.创建tabbarview
          body: TabBarView(
              children: [
            Center(child: Text("动态"),),
            Center(child: Text("推荐"),),
          ]),
        )
    );
  }

}