如何在Flutter中为标签栏创建未选择的指示器

问题描述

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

I created a custom indicator for tab bar using Decorator.I want to create a unselected indicator for not selected tabs in tab bar.

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

I did a container with custom decoration but current selected indicator draws behind container decoration.

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来制作下划线

You can use Stack/Container and TabBar together to make the underline

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

并非完全符合您的要求，但可以为未选中的标签加下划线.

Not exactly what you are looking for but it can give the underline for un-selected tab.

这篇关于如何在Flutter中为标签栏创建未选择的指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！