如何在标签栏视图颤动中一次将指示器颜色设置为多个标签？

Question

我有一个带有 3 个标签的标签栏视图，Email, Profile, Complete。现在Email 中有一个按钮，如下所示：

1.电子邮件标签

                    widget.theTabController.animateTo(
                      (widget.theTabController.index + 1),
                    );

单击此按钮时，选项卡会发生变化，指示器颜色也会发生变化。 但是有什么办法可以让Email tab 的指示器颜色与Profile tab 一样：

下面是我的标签栏视图的代码。

标签栏视图

class SignupEmail extends StatefulWidget {
  @override
  _SignupEmailState createState() => _SignupEmailState();
}

class _SignupEmailState extends State<SignupEmail>
    with SingleTickerProviderStateMixin {
  bool entryPermission = false;
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'EMAIL'),
    new Tab(text: 'PROFILE'),
    new Tab(text: 'COMPLETE'),
  ];
  TabController _tabController;
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: myTabs.length);
    _tabController.addListener(() {
      print("Selected Index: " + _tabController.index.toString());
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: SingleChildScrollView(
          child: Padding(
            padding:
                const EdgeInsets.only(left: 16, right: 16, top: 50, bottom: 0),
            child: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  MainTitle(),
                  Container(
                    child: DefaultTabController(
                        length: myTabs.length,
                        child: Column(
                          children: [
                            Container(
                              // height: 50,
                              width: double.infinity,
                              child: IgnorePointer(
                                child: TabBar(
                                  controller: _tabController,
                                  unselectedLabelColor:
                                      Color.fromRGBO(0, 0, 0, 0.87),
                                  labelColor: Color(0xff9E9E9E),
                                  indicatorColor: Color.fromRGBO(98, 0, 238, 1),
                                  tabs: myTabs,
                                ),
                              ),
                            ),
                            SizedBox(
                              height: 28,
                            ),
                            Container(
                              width: double.infinity,
                              height: 500,
                              child: TabBarView(
                                  // physics: NeverScrollableScrollPhysics(),
                                  controller: _tabController,
                                  children: [
                                    EmailTab(
                                      theTabController: _tabController,
                                    ),
                                    ProfileTab(
                                      theTabController: _tabController,
                                    ),
                                    CompleteEmail()
                                  ]),
                            ),
                          ],
                        )),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 1

我认为唯一的方法是自己构建一个标签导航。我最近遇到了类似的问题，当我希望标签颜色与屏幕颜色匹配时。 我只是用

创建了一个堆栈

                    Positioned(
                        left: safeAreaPos.dx,
                        width: safeAreaPos.dx + safeAreaSize.width,
                        bottom: 0,
                        child: Row(
                          children: [
                            for (var i = 0; i < 4; i++)
                              TabButton(i, context)
                          ],

并渲染我的标签

  Widget TabButton(int tabIndex, BuildContext context) {
    final List<String> labels = ['A', 'B', 'C', 'D'];
    final List<double> labelSizes = [12, 16, 16, 12];
    return SizedBox(
      height: 50, width: safeAreaSize.width / 4,
      child:
        FlatButton(
          color: bgTabColors[tabIndex],
          padding: EdgeInsets.all(0),
          textColor: CupertinoColors.white,
          child: Text(labels[tabIndex], style: TextStyle(fontSize: labelSizes[tabIndex]),),
          onPressed: () =>
            BlocProvider.of<ProjectKanbanBloc>(context).add(ProjectKanbanTabRequested(tabIndex)),
        )
    );
  }
}