在Flutter的TabBar顶部添加指示器

Question

喜欢这个：

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

"Marker 3"

但是我需要 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),), ]), ); 上方的Indicator。我认为构建自定义标签栏不是一个好主意，因为我不想为这个简单的事情做很多工作。

Answer 1

有一个简单的技巧，那就是使用indicator属性并添加TabBar，该类已将名为UnderlineTabIndicator()的参数命名为insets < / p>

  

左：50.0，//将指示器从左减小50.0

     

顶部：0.0，

     

右：50.0，//将指示器从右缩小50.0

     

底部：40.0 //将指示器从底部向上推40.0

如下所示：

EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),

您还可以创建扩展Decoration

的自定义指标

Answer 2

另一种选择是为Decoration小部件的indicator:属性定义一个新的TabBar，这样就不必绑定到TabBar的高度（如使用{{ 1}}），但您不能创建一个小于标签本身的指标。

此处是代码：

insets: EdgeInsets.fromLTRB(50.0, 0.0, 50.0, 40.0),

Answer 3

您必须为此创建一个自定义 TabController 。我找到了Flutter TabBar Here的简单示例。您可以在此处进行详细检查。