Flutter Tab Bar-如何分配每个选定选项卡的不同颜色？

Question

TabBar(
            controller: _tabController,
            unselectedLabelColor: Colors.grey,
            indicator: BoxDecoration(
              borderRadius: BorderRadius.circular(
                16.0,
              ),
              color: colors[_tabController.index],
            ),
            tabs: const [
              Tab(text: "INFO"),
              Tab(text: "ENGAGEMENT"),
              Tab(text: "TRACK"),
            ],
            labelStyle: const TextStyle(
                color: Colors.white,
                fontSize: 13,
                fontWeight: FontWeight.w600),
            unselectedLabelStyle: const TextStyle(
                color: Colors.grey,
                fontSize: 13,
                fontWeight: FontWeight.w600),
          ),
        ),
      ),

我希望每个选项卡在选择时都具有不同的颜色 因此，当索引通过将其存储在列表中时，我试图更改颜色 但是它不用setState就无法正常工作（我知道它不会改变状态，因为快速重新加载后颜色会更改）

=“ nofollow noreferrer”> < 。

​输出

Answer 1

您可以在TabController上包含一个侦听器，并在此处调用setState。

  _tabController = TabController(vsync: this, length: myTabs.length)
      ..addListener(() {
        setState(() {});
      });

Answer 2

下面的代码应该解决问题。方法的缺失部分是setstate使用当前选择的选项卡索引刷新屏幕。查看屏幕录制和

=“ https://dartpad.dev/?id=d45cffbf73ae3E6713CF36CC2C82248D” rel =“ nofollow noreforler” noreflow noreferrer“ /PI.flutter.dev/flutter/material/tabbar-class.html“ rel =“ nofollow noreferrer”> tabbar 几乎已经完成了所有工作。只有外部圆形边框才能进行自定义，这只是将tabar包装到容器。 容器非常易于使用，并且高度可定制。

这是代码本身作为 minimal-reproducible-example ：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

const colors = [
  Color(0xFF64c636),
  Color(0xFFf2c32c),
  Color(0xFF00a9ce),
];

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late TabController tabController;
  int _tabIndex = 0;
  @override
  void initState() {
    super.initState();
    tabController = TabController(length: 3, vsync: this)
      ..addListener(() {
        setState(() => _tabIndex = tabController.index);
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 48,
        margin: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(20)),
          border: Border.all(width: 2),
        ),
        child: TabBar(
          indicatorWeight: 0,
          controller: tabController,
          indicator: BoxDecoration(
              borderRadius: BorderRadius.circular(
                16.0,
              ),
              color: colors[_tabIndex],
            ),
          labelStyle: const TextStyle(
              color: Colors.white,
              fontSize: 13,
              fontWeight: FontWeight.w600),
          unselectedLabelColor: Colors.grey,
          splashBorderRadius: BorderRadius.circular(20),
          padding: EdgeInsets.all(3),
          tabs: const [
            Tab(text: 'INFO'),
            Tab(text: 'ENGAGEMENT'),
            Tab(text: 'TRACK'),
          ],
        ),
      ),
    );
  }
}