在Flutter中的TabBar顶部添加指示器

发布时间：2020-12-14 14:49:02 所属栏目：百科来源：网络整理

导读：像这个：下面的代码将添加TabBar的指标底部： DefaultTabController( length: 2,child : new TabBar( labelColor: Colors.purple,indicatorColor: Colors.purple,indicatorSize: TabBarIndicatorSize.label,unselectedLabelColor: Colors.black,tabs: [ new

像这个：

enter image description here

下面的代码将添加TabBar的指标底部：

DefaultTabController(
    length: 2,child : new TabBar(
      labelColor: Colors.purple,indicatorColor: Colors.purple,indicatorSize: TabBarIndicatorSize.label,unselectedLabelColor: Colors.black,tabs: [
        new Tab(icon: Icon(Icons.chrome_reader_mode),),new Tab(icon: Icon(Icons.clear_all),]),);

但我需要TabBar顶部的指标.我不认为构建自定义标签栏是个好主意,因为我不想为这个简单的事情做很多工作.

解决方法

有一个简单的hack,就是使用 indicator属性并添加UnderlineTabIndicator(),该类命名参数名为insets,并且我添加了EdgeInsets.fromLTRB(50.0,0.0,50.0,40.0)的值,

Left: 50.0,// make indicator small by 50.0 from left

Top: 0.0,

Right: 50.0,// make indicator small by 50.0 from right

Bottom: 40.0 // pushed indicator to top by 40.0 from bottom

如下：

const textStyle = TextStyle(
    fontSize: 12.0,color: Colors.white,fontFamily: 'OpenSans',fontWeight: FontWeight.w600);

//.....
new TabBar(
  controller: controller,labelColor: Color(0xFF343434),labelStyle: textStyle.copyWith(
      fontSize: 20.0,color: Color(0xFFc9c9c9),fontWeight: FontWeight.w700),indicator: UnderlineTabIndicator(
    borderSide: BorderSide(color: Color(0xDD613896),width: 8.0),insets: EdgeInsets.fromLTRB(50.0,40.0),unselectedLabelColor: Color(0xFFc9c9c9),unselectedLabelStyle: textStyle.copyWith(
      fontSize: 20.0,tabs: [
    new Tab(
      text: 'LOGIN',new Tab(
      text: 'SIGNUP',],

您还可以创建一个延伸Decoration的自定义指标

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!