代码之家 › 专栏 › 技术社区 › Blasanka

在颤振中,在选项卡顶部添加指示器

flutter

Blasanka · 技术社区 · 6 年前

就像这个:

下面的代码将添加选项卡底部的指示器:

defaultTabController(
长度:2,
子项:新建选项卡(
标签颜色:颜色。紫色,
指示器颜色:颜色。紫色,
指标大小:tabbindicatorsize.label,
新建选项卡(icon:icon(icons.clear_all),),




  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),),
    ]),
  );


但我需要IndicatorTabBar.我不认为建立一个自定义的标签栏是个好主意,因为我不想为这个简单的事情做很多工作。

2 回复 | 直到 6 年前

Blasanka 6 年前

有一个简单的黑客,那就是使用 indicator 属性和添加 UnderlineTabIndicator() 这个类已经命名了参数 insets 作为我增加的价值 EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),

左:50.0,//使指示器从左到小50.0

顶部:0.0,

右:50.0,//使指示器从右小50.0

底部:40.0//将指示器从底部推到顶部40.0

如下所示:

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, 0.0, 50.0, 40.0),
  ),
  unselectedLabelColor: Color(0xFFc9c9c9),
  unselectedLabelStyle: textStyle.copyWith(
      fontSize: 20.0,
      color: Color(0xFFc9c9c9),
      fontWeight: FontWeight.w700),
  tabs: [
    new Tab(
      text: 'LOGIN',
    ),
    new Tab(
      text: 'SIGNUP',
    ),
  ],
),

还可以创建自定义指示器扩展 Decoration

Sunil 6 年前

必须创建自定义 选项卡控制器 为了这个。我找到了一个简单的颤振标签的例子。 Here .你可以在这里详细检查一下。

推荐文章

Rami Dhouib · Flutter:如果等待时间超过2秒,则执行操作

4 月前

5rod · 如何在three_js(Flutter)中设置缓冲区几何属性?

4 月前

Aouiche Redouane · 修复Flutter抽屉中的物品

5 月前

melearning · 背景封面

5 月前

Aks · 如何在导航到其他屏幕时销毁计时器

5 月前

Jahangir Alam · 文本编辑控制器在被丢弃后被使用。一旦你在aTextEditingController上调用了dispose(),它就不能再使用了

6 月前

kmort · 启用enableFilter后,Flutter DropdownMenu会超出界限

6 月前

greenzebra · 在Dart中,我如何将算术运算符定义为变量?

6 月前

Alexandre B. · 这种使用ValueNotifier和FutureBuilder的方法正确吗?

6 月前

RiseOfHorizon · 在以下任何来源中都找不到插件[id:“com.android.application”,版本:“8.5.0”]

9 月前