使选项卡栏选定的选项卡下划线仅与标签文本一样长

Question

我希望能够使选项卡栏中所选选项卡的下划线与该选项卡的文本一样长（如下所示）。我相信我的问题是我有一个

SizedBox

，其定义的

width

使用屏幕的宽度来确定每个选项卡的宽度。我这样做是因为会有一个带有“分享好东西”选项卡的滚动条，因为它太长了，我希望所有选项卡都适合屏幕而不滚动。

这是我创建该选项卡栏的代码

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  static TextStyle tabTextStyle = smallCaps13;

  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    final List<Widget> tabs = [
      SizedBox(
        width: width * 0.25,
        // padding: const EdgeInsets.symmetric(horizontal: 80.0),
        child: const Tab(child: Text("HOME")),
      ),
      SizedBox(
        width: width * 0.25,
        // padding: const EdgeInsets.symmetric(horizontal: 80.0),
        child: const Tab(child: Text("NEWS")),
      ),
      SizedBox(
        width: width * 0.5,
        // padding: const EdgeInsets.symmetric(horizontal: 80.0),
        child: const Tab(child: Text("SHARE THE GOOD")),
      ),
    ];
    return DefaultTabController(
      length: tabs.length,
      child: Column(
        children: [
          TabBar(
            indicatorSize: TabBarIndicatorSize.label,
            dividerColor: Colors.transparent,
            splashFactory: NoSplash.splashFactory,
            labelStyle: smallCaps13.copyWith(color: ftiDarkBlue),
            unselectedLabelColor: ftiMediumGray,
            tabAlignment: TabAlignment.start,
            indicatorColor: Theme.of(context).colorScheme.secondary,
            labelPadding: const EdgeInsets.symmetric(horizontal: 0),
            isScrollable: true,
            tabs: tabs,
          ),
          const Expanded(
            child: TabBarView(
              children: [
                HomeTab(),
                NewsTab(),
                ShareTheGoodTab(),
              ],
            ),
          )
        ],
      ),
    );
  }
}

我尝试添加

indicatorSize: TabBarIndicatorSize.label,

无济于事，因为它仍在考虑整个

SizedBox

这是有道理的。

Answer 1

您可以拥有默认控制器访问权限，例如

DefaultTabController.maybeOf(context)

，但您需要向下一层到上下文树。我会说使用 TabController。

TabBar 项目的自定义宽度留下的约束不等于文本。你可以用 Row 来构建它，你可以使用 Row/Column。

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  static TextStyle tabTextStyle = const TextStyle();

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  late final tabController = TabController(length: 3, vsync: this);
  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  final tabTitles = ["HomeTab", "News", "Share the good"];
  @override
  Widget build(BuildContext context) {
    ///
    Widget _buildTab(int index, String text) {
      return Expanded(
        child: InkWell(
          onTap: () {
            tabController.animateTo(index);
            setState(() {});
          },
          child: Tab(
            child: DecoratedBox(
              decoration: index == tabController.index
                  ? const BoxDecoration(
                      border: Border(
                        bottom: BorderSide(
                          color: Colors.black,
                          width: 2.0,
                        ),
                      ),
                    )
                  : const BoxDecoration(),
              child: Text(text, style: HomeScreen.tabTextStyle),
            ),
          ),
        ),
      );
    }

    return Column(
      children: [
        Row(
          children: [for (int i = 0; i < 3; i++) _buildTab(i, tabTitles[i])],
        ),
        Expanded(
          child: TabBarView(
            controller: tabController,
            children: [
              Text("HOME"),
              Text("NEWS"),
              Text("SHARE THE GOOD"),
              // HomeTab(),
              // NewsTab(),
              // ShareTheGoodTab(),
            ],
          ),
        )
      ],
    );
  }
}