标签栏指示器颜色在 flutter 中的 tabbarview 滑动时没有更新？

Question

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class TestDemo extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {

  TabController? controller;
  int pos = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            bottom: TabBar(
                controller: controller,
                onTap: (int) {
                  setState(() {
                    pos = int;
                  });
                  print("Pos" + int.toString());
                },
                unselectedLabelColor: Color(0xFF82868a),
                labelColor: Colors.white,
                indicatorSize: TabBarIndicatorSize.label,
                indicator: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: Colors.black),
                tabs: [
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        color: pos == 0
                            ? Colors.transparent
                            : const Color(0xFFf6f6f6),
                      ),
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text("New"),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        color:
                            pos == 1 ? Colors.transparent : Color(0xFFf6f6f6),
                      ),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text(
                          "Confirmed",
                         
                        ),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        color:
                            pos == 2 ? Colors.transparent : Color(0xFFf6f6f6),
                      ),
                      child: Align(
                        alignment: Alignment.center,
                        child: Text("In Transits"),
                      ),
                    ),
                  ),
                ]),
          ),
          body: TabBarView(controller: controller,
              dragStartBehavior: DragStartBehavior.down,
              children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
            Icon(Icons.games),
          ]),
        ));
  }
}

上面的代码用于标签栏视图。 单击选项卡时，选中的选项卡颜色会突出显示，未选中的颜色将更新为灰色。 但是当我滑动标签栏时，标签颜色没有更新。 指示器只是覆盖在容器下方

我想在选项卡单击以及选项卡滑动时更改选项卡颜色。

如何在点击和滑动时实现相同的功能？

Answer 1

每当controller.index更新时，您都需要更新pos变量。 你可以像这样听它的变化：

late TabController controller = TabController(length: 3, vsync: this);

@override
void initState() {
  controller.addListener(() {
    setState(() {
      pos = controller.index;
    });
  });
  super.initState();
}

Answer 2

只需删除代码中每个选项卡中的容器装饰，它就可以同时用于滑动和点击

Tab(
                child: Container(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text("In Transits"),
                  ),
                ),
              ),