我使用装饰器为标签栏创建了一个自定义指示器。 我想为标签栏中未选择的标签创建一个未选择的指示器。

我做了一个带有自定义装饰的容器，但当前选定的指示器绘制在容器装饰后面。

new TabBar( 
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicator: new CustomTabIndicator(),
tabs: [
new Container(decoration: new CustomTabInactive(),child: Tab(icon: Icon(Icons.person )))])

带有未选中指示器的标签栏

最佳答案

你可以同时使用 Stack/Container 和 TabBar 来做下划线

Stack(
            fit: StackFit.passthrough,
            alignment: Alignment.bottomCenter,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: colorSecondary, width: 2.0),
                  ),
                ),
              ),
              TabBar(
                isScrollable: true,
                onTap: (index) => tabsModel.value = listTabsModel[index],
                tabs: listTabsModel
                    .map(
                      (value) => Tab(
                        child: value.tabComponent,
                      ),
                    )
                    .toList(),
              ),
            ],
          );

未选中的带有下划线的TabBar

不完全是您要查找的内容，但它可以为未选择的选项卡添加下划线。

https://stackoverflow.com/questions/52028730/