Flutter 造型未选中标签指示器

Question

我正在尝试在 flutter 中创建一个具有右上角和左上角边框半径的选项卡指示器，并设法将其应用于活动选项卡，但无法弄清楚如何将其应用于未选择的选项卡指示器。

低于我想要达到的目标

这是我的退出代码

setColor(int tabIndex) {
    if (tabIndex == 0) {
      return const Color(0xFFFBD59E);
    } else if (tabIndex == 1) {
      return const Color(0xFFC8E0DA);
    } else if (tabIndex == 2) {
      return Colors.yellow;
    }
  }

    TabBar(
          labelStyle: const TextStyle(
             fontSize: 18.0, fontWeight: FontWeight.w600),
               onTap: (index) {
                 setState(() {
                          tabIndex = index;
                          setInactiveColor(index);
                        });
                      },
                      controller: _controller,
                      tabs: const [
                        Tab(
                          text: 'Tab 1',
                        ),
                        Tab(
                          text: 'Tab 2',
                        ),
                      ],
                      indicator: ShapeDecoration(
                        shape: const RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(50),
                            topLeft: Radius.circular(50),
                          ),
                        ),
                        color: setColor(tabIndex),
                      ),
                    ),

这就是我得到的，有没有为未选择的标签指示器设置样式？

Answer 1

我认为没有一种方法可以按照您想要的方式设置默认Tab小部件的样式，只需使用TabBar的属性即可。 相反，您可以为Tab的孩子使用另一个小部件而不是Text 。

TabBar(
      labelStyle: const TextStyle(fontSize: 18.0, fontWeight: FontWeight.w600),
      onTap: (index) {
        setState(() {
          tabIndex = index;
        });
      },
      controller: _controller,
      labelPadding: EdgeInsets.zero,
      tabs: [
        Tab(
          child: _buildTab(text: 'Tab 1', color: Colors.red),
        ),
        Tab(
          child: _buildTab(text: 'Tab 2', color: Colors.blue),
        ),
      ],
    ),

_buidTab 方法如下：

_buildTab({required String text, required Color color}) {
    return Container(
      alignment: Alignment.center,
      width: double.infinity,
      decoration: ShapeDecoration(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(50),
            topLeft: Radius.circular(50),
          ),
        ),
        color: color,
      ),
      child: Text(text),
    );
  }

Answer 2

您可以使用 TabController 知道当前选择的选项卡这就是您可以更改选项卡颜色的方法

 void initState() {
    super.initState();
    controller = TabController(
      length: 2,
      initialIndex: 1,
      vsync: this,
    );
    controller.addListener(() {
      setState(() {
        activeTabIndex = controller.index;
      });
    });
  }

查看完整代码：-

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

class StudentScreen extends StatefulWidget {
  @override
  _StudentScreenState createState() => _StudentScreenState();
}

class _StudentScreenState extends State<StudentScreen>
    with SingleTickerProviderStateMixin {
  late TabController controller;
  int activeTabIndex = 1;

  @override
  void initState() {
    super.initState();
    controller = TabController(
      length: 2,
      initialIndex: 1,
      vsync: this,
    );
    controller.addListener(() {
      setState(() {
        activeTabIndex = controller.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            bottom: TabBar(
                controller: controller,
                padding: const EdgeInsets.all(0.0),
                isScrollable: false,
                unselectedLabelColor: Colors.black,
                // indicatorPadding: EdgeInsets.zero,
                // indicatorSize: TabBarIndicatorSize.label,
                indicator: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30)),
                  // color: Color(0xFFFBD59E)
                ),
                tabs: [
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                        color: activeTabIndex == 0
                            ? const Color(0xFFFBD59E)
                            : const Color(0xFFC8E0DA),
                        // color: Color(0xFFC8E0DA),
                        borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(30),
                            topRight: Radius.circular(30)),
                        // border:
                        //     Border.all(color: Colors.redAccent, width: 1)
                      ),
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text("Tab one"),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                        color: activeTabIndex == 1
                            ? const Color(0xFFFBD59E)
                            : const Color(0xFFC8E0DA),
                        borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(30),
                            topRight: Radius.circular(30)),
                        // border:
                        //     Border.all(color: Colors.redAccent, width: 1)
                      ),
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text("Tab two"),
                      ),
                    ),
                  ),
                ]),
          ),
          body: const TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
          ]),
        ));
  }
}

Output

选择的第一个选项卡

选择了第二个选项卡