flutter 如何在标签栏视图中创建自定义标签？

我想要有特定背景颜色的标签页。当我点击标签页时，当前标签页的背景颜色应该会改变。我尝试了很多方法，但没有得到我想要的。
我希望选项卡的颜色是灰色和选定的颜色是蓝色。有人能帮助解决这个问题吗？
这就是我想要的

我得到的：

下面是单个选项卡的代码：

DefaultTabController(
            length: 4, // length of tabs
            initialIndex: 0,
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                   TabBar(
                            isScrollable: true,
                            labelColor: const Color(0xff000000),
                            labelPadding:
                                const EdgeInsets.only(left: 8, right: 5),
                            indicator: BoxDecoration(
                                borderRadius:
                                    BorderRadius.circular(10), // Creates border
                                color: const Color(0xff77e8d9)),
                            unselectedLabelColor: Colors.black,
                            tabs: [

                              Tab(
                                child: Container(
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(
                                          10), // Creates border
                                      color: const Color(0xfff4f4f4)),
                                  child: SizedBox(
                                    height: 40,
                                    width: 110,
                                    child: Row(children: [
                                      Padding(
                                        padding: const EdgeInsets.only(left: 8),
                                        child: Text('Featured',
                                            style: GoogleFonts.poppins(
                                              fontWeight: FontWeight.w700,
                                              fontSize: 15,
                                              letterSpacing: 0.3,
                                            )),
                                      ),
                                      const Padding(
                                        padding: EdgeInsets.only(left: 1),
                                        child: Icon(
                                          Icons.favorite,
                                          color: Color(0xffef5145),
                                          size: 21,
                                        ),
                                      ),
    
                              ]),
                                  ),
                                ),
                              ),
Container(
                    height: 1250,
                    decoration: const BoxDecoration(),
                    child: TabBarView(children: [

                      Container(),
                    ]),
                  ),

这里的问题是Container有自己的颜色，但是你想用TabBar指示器给予它一个新的颜色，这是不可能的。要解决这个问题，你可以设置Container的颜色

Color(0xfff4f4f4)

到

Colors.transparent

这将使它看起来像这样：Transparent color Container
然而，你似乎想要的是使选中的标签的颜色为“蓝色”，而未选中的标签的颜色为“白色”。要做到这一点，你可以使用TabController根据选中标签的索引值设置容器的颜色。我可能解释得有点混乱，但如果你看了这个例子，你就会明白我的意思。这将使它看起来像这样：Changing the color of the Container
本例中的重要事项：

应将“with TickerProviderStateMixin”表达式用于TabController参数。
您应该定义一个整型变量来获取TabBar的索引。此变量的值将使用TabController的addListener方法进行更改。
您不需要在TabBar中为所需内容设置指示符，因此应使用空指示符。
如果选择了选项卡，则应将选项卡中容器的颜色设置为蓝色，否则设置为白色。

完整代码：

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late TabController tabController;
  int tabIndex = 0;

  @override
  void initState() {
    super.initState();

    tabController = TabController(length: 3, vsync: this, initialIndex: 0);
    tabController.addListener(() {
      setState(() {
        tabIndex = tabController.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      bottomNavigationBar: Container(
        color: Colors.purple,
        child: DefaultTabController(
          length: 3,
          initialIndex: 0,
          child: TabBar(
            controller: tabController,
            isScrollable: false,
            automaticIndicatorColorAdjustment: true,
            labelColor: Colors.black,
            indicator: const BoxDecoration(),
            tabs: [
              getTab("featured", Icons.favorite, tabIndex == 0),
              getTab("boys", Icons.male, tabIndex == 1),
              getTab("girls", Icons.female, tabIndex == 2),
            ],
          ),
        ),
      ),
      body: TabBarView(
        controller: tabController,
        children: const [
          Center(
            child: Text("tabbar 1"),
          ),
          Center(
            child: Text("tabbar 2"),
          ),
          Center(
            child: Text("tabbar 3"),
          ),
        ],
      ),
    );
  }

  Widget getTab(String text, IconData icon, bool isSelected) {
    return Tab(
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: isSelected ? Colors.blue : Colors.white,
        ),
        child: SizedBox(
          height: 40,
          width: 110,
          child: Row(
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 8),
                child: Text(
                  text,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 1),
                child: Icon(
                  icon,
                  color: const Color(0xffef5145),
                  size: 21,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

我希望这个答案对你有帮助

flutter 如何在标签栏视图中创建自定义标签？

1条答案

相关问题

热门标签

最新问答