如何在颤动中更改选定的选项卡背景颜色答案

【问题标题】：How to change the selected tab background colours in flutter如何在颤动中更改选定的选项卡背景颜色
【发布时间】：2026-02-18 08:55:02
【问题描述】：

我想更改所选标签的背景，我将有自定义标签，因此我无法使用指示器更改所选标签的背景：BoxDecoration

我想实现这样的标签栏

请指导我在设计中实现标签栏。我刚开始学习颤振。

【问题讨论】：

标签： flutter tabs flutter-layout tabbarcontroller

【解决方案1】：

这是你要找的吗？

class TabBarExample extends StatefulWidget {
  @override
  _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample>
    with SingleTickerProviderStateMixin {
  // Define a tab controller object
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.grey[300],
          child: TabBar(
            controller: _tabController,
            indicatorColor: Colors.transparent,
            labelColor: Colors.pink,
            unselectedLabelColor: Colors.grey,
            labelStyle: TextStyle(
              fontSize: 16,
            ),
            unselectedLabelStyle: TextStyle(
              fontSize: 16,
            ),
            indicator: BoxDecoration(
              color: Colors.white,
            ),
            tabs: <Widget>[
              Tab(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('STEP 1'),
                    Text(
                      'Investment',
                      style: TextStyle(
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ),
              Tab(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('STEP 2'),
                    Text(
                      'Investment',
                      style: TextStyle(fontSize: 12),
                    ),
                  ],
                ),
              ),
              Tab(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('STEP 3'),
                    Text(
                      'Investment',
                      style: TextStyle(fontSize: 12),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出：

【讨论】：

是的，谢谢@T.T Sag。我不认为我们可以在容器中使用标签栏。谢谢你的回答。