关于flutter:Flutter深入浅出组件篇TabBar

TabBar 介绍

​ 一个显示程度行选项卡的 Widget。通常创立为 AppBar 的 AppBar.bottom 局部并与 TabBarView 联合应用

在什么状况下应用 TabBar

​ 当你的 app 内容类别比拟多的时候，咱们经常会用到 TabBar，例如网易新闻、京东、B 站等，所以 TabBar 是一个应用十分频繁的组件。

示例代码

本文中很多成果都没有截图，可下载源代码运行我的项目 源代码地址，或者通过视频教程查看 视频教程地址

如何应用

步骤一：创立 TabController

​ 为了使所选的 tab 与它所对应的内容可能同步变动，须要用 TabController 进行管制。咱们既能够手动创立一个 TabController，也可能间接应用 DefaultTabController widget。最简略的抉择是应用 DefaultTabController widget，因为它可能创立出一个可供所有子 widgets 应用的 TabController。

DefaultTabController(
  // 选项卡的数量
  length: 3,
  child: // 在下一步实现此代码
);

步骤二：创立 tabs

​ 当咱们创立 DefaultTabController, 接下来就能够用 TabBar widget 来创立 tabs。上面这个创立了蕴含三组 Tab widget 的 TabBar（一个），并把它搁置于 AppBar widget 中。

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(title: Text("TabBar"),
      bottom: TabBar(
        tabs: [Tab(icon: Icon(Icons.directions_bike),),
          Tab(icon: Icon(Icons.directions_boat),),
          Tab(icon: Icon(Icons.directions_car),),
        ],
      ),
    ),
  ),
);

​ TabBar 默认将会在 Widget 树中向上寻找离它最近的一个 DefaultTabController 节点作为本人的 TabController。如果您想手动创立 TabController，那么您必须将它作为参数传给 TabBar。

步骤三：为每个 Tab 创立内容

​ 当初咱们曾经胜利创立了一些 tabs，接下来要实现的是 tab 被选中时显示其对应的内容。为了实现这个成果，咱们将应用 TabBarView widget。

import 'package:flutter/material.dart';

class TabBarExample extends StatefulWidget {
  @override
  _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(title: Text("TabBar"),
          bottom: TabBar(
            tabs: [Tab(icon: Icon(Icons.directions_bike),),
              Tab(icon: Icon(Icons.directions_boat),),
              Tab(icon: Icon(Icons.directions_car),),
            ],
          ),
        ),
        body: TabBarView(
          children: [Icon(Icons.directions_bike),
            Icon(Icons.directions_boat),
            Icon(Icons.directions_car),
          ],
        ),
      ),
    );
  }
}

​ 从下面这个小例子中咱们简略的体验了一下 TabBar 是怎么联合 TabBarView 来应用的。

DEMO 成果

TabBar 属性和阐明

总共 20 个属性

TabBar 属性具体应用

1、tabs

​ 由两个多个组成的 Tab 列表

应用办法

TabBar(
  tabs: [Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

2、controller

​ 能够管制 tab 的控制器

应用办法

TabController _tabController;

@override
void initState() {
  // TODO: implement initState
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
}

TabBar(
  controller: _tabController,
  tabs: [Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

3、isScrollable

​ 标签栏是否能够程度滚动

应用办法

TabBar(
  isScrollable: false,
  tabs: [Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

4、indicatorColor

​ 设置选中 Tab 指示器的色彩

应用办法

TabBar(
  indicatorColor: Colors.red,
  tabs: [Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

5、automaticIndicatorColorAdjustment

​ 是否主动调整 indicatorColor，如果 automaticIndicatorColorAdjustment 为 true 时，那么 indicatorColor 会主动调整成 Colors.white

应用办法

TabBar(
  automaticIndicatorColorAdjustment: false,
  tabs: [Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

6、indicatorWeight

​ 设置选中 Tab 指示器线条的粗细

应用办法

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  tabs: [Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

7、indicatorPadding

​ 设置选中 Tab 指示器间距，默认值为 EdgeInsets.zero

应用办法

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  indicatorPadding: EdgeInsets.only(bottom: 2),
  tabs: [Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

8、indicator

​ 设置选中 Tab 指示器的外观

应用办法

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  indicatorPadding: EdgeInsets.only(bottom: 2),
  indicator: BoxDecoration(
    gradient: LinearGradient(colors: [
      Colors.orange,
      Colors.green
    ]),
  ),
  tabs: [Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

9、indicatorSize

​ 设置选中 Tab 指示器的大小，该值是一个枚举类型，TabBarIndicatorSize.tab 追随 Tab 的宽度，TabBarIndicatorSize.label 追随 Tab 内容文字的宽度。

应用办法

TabBar(
  indicatorColor: Colors.red,
  indicatorSize: TabBarIndicatorSize.tab,
  tabs: [Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

10、labelColor

​ 设置选中 Tab 文字的色彩

应用办法

TabBar(
  indicatorColor: Colors.red,
  labelColor: Colors.pink,
  tabs: [Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

11、labelStyle

​ 设置选中 Tab 文字的款式

应用办法

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

12、labelPadding

​ 设置选中 Tab 内容的间距

应用办法

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  labelPadding: EdgeInsets.all(0),
  tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

13、unselectedLabelColor

​ 设置未选中 Tab 文字的色彩

应用办法

TabBar(
    unselectedLabelColor: Colors.orange,
  tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

14、unselectedLabelStyle

​ 设置未选中 Tab 文字的款式

应用办法

TabBar(
    unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(backgroundColor: Colors.pink),
  tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

15、dragStartBehavior

​ 解决拖动开始行为的形式

应用办法

TabBar(
    unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(backgroundColor: Colors.pink),
  dragStartBehavior: DragStartBehavior.start,
  tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

16、overlayColor

​ 定义响应焦点、悬停和飞溅色彩。

​ 如果非空，则会应用 MaterialState.focused, MaterialState.hovered, and MaterialState.pressed 之一进行解析。

17、mouseCursor

​ 鼠标指针进入或悬停在鼠标指针上时的光标，针对 Flutter web 利用。

应用办法

TabBar(
    unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(backgroundColor: Colors.pink),
  mouseCursor: SystemMouseCursors.allScroll,
  tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

18、enableFeedback

​ 检测到的手势是否应提供声音和 / 或触觉反馈，默认为 true

应用办法

TabBar(
  enableFeedback: true,
  tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

19、onTap

​ 单击 Tab 时的回调

应用办法

TabBar(
  enableFeedback: true,
  onTap: (index) {print(index);
  },
  tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

20、physics

​ TabBar 的滚动视图如何响应用户输出，

​ 例如，确定在用户进行拖动滚动视图后滚动视图如何持续动画。

应用办法

TabBar(physics: NeverScrollableScrollPhysics(),
  tabs: [Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

总结

​ 以上是 TabBar 的属性具体解析并写了一个简略的 demo，在平时的开发过程中 TabBar

组件用的还是绝对比拟频繁的，也是开发人员必须把握的一个组件。