我在 TabBar 中看到了底部下划线。怎么去除呢？

Question

我在 TabBar 中看到了底部下划线。我试图将其删除。但它没有删除。

（https://i.sstatic.net/CbDf57Nr.png）

Widget build(BuildContext context) {
    TabController tabController = TabController(length: 2, vsync: this);
  return Scaffold(
      backgroundColor: Palette.white,
      body:  Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              decoration: BoxDecoration(color: const Color(0x1E767680), borderRadius: BorderRadius.circular(7)),
              height: 36,
              child: TabBar(
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorPadding: const EdgeInsets.all(2),
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(7),
                  color: Colors.deepPurple,
                ),
                controller: tabController,
                labelStyle: const TextStyle(color: Colors.white, fontSize: 13, fontWeight: FontWeight.w500),
                unselectedLabelStyle: const TextStyle(color: Color(0xFF5B5B5B), fontSize: 13, fontWeight: FontWeight.w400),
                indicatorWeight: 0,
                indicatorColor: Colors.transparent,
                tabs: const [
                  Tab(text: 'Page 1'),
                  Tab(text: 'Page 2'),
                ],
              ),
            ),

            const SizedBox(height: 16),
            //TabBarView
            Expanded(
              child: TabBarView(
                controller: tabController,
                children: [
                  _buildAttendanceView(),
                  Tab2(),
                ],
              ),
            )
          ],
        ), );

我尝试过， border: Border.all(color: Colors.transparent) 删除任何可见边框。 指标权重：0： 指示器颜色： 颜色.透明： 将 TabBar 小部件包裹在 Material 小部件内，并将 borderOnForeground 设置为 false。 但没有成功。

Answer 1

听起来您正在处理

TabBar

底部不需要的下划线或边框。您已经尝试过一些方法，例如将

indicatorWeight

设置为

0

、将

indicatorColor

设置为

transparent

，并将

TabBar

包装在

Material

小部件中，但下划线仍然存在。

要删除下划线，请尝试以下调整：

1. 将

indicator

设置为

null

：

如果您根本不需要任何下划线或指示符，可以将

indicator

的

TabBar

属性设置为

null

。

2. 删除

indicatorWeight

：

确保完全删除

indicatorWeight

，因为将其设置为

0

仍可能会导致问题。

以下是经过这些调整后您的代码的外观：

Widget build(BuildContext context) {
  TabController tabController = TabController(length: 2, vsync: this);
  return Scaffold(
    backgroundColor: Palette.white,
    body: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          decoration: BoxDecoration(
            color: const Color(0x1E767680), 
            borderRadius: BorderRadius.circular(7)
          ),
          height: 36,
          child: TabBar(
            controller: tabController,
            indicator: BoxDecoration(
              borderRadius: BorderRadius.circular(7),
              color: Colors.deepPurple,
            ),
            labelStyle: const TextStyle(
              color: Colors.white, 
              fontSize: 13, 
              fontWeight: FontWeight.w500
            ),
            unselectedLabelStyle: const TextStyle(
              color: Color(0xFF5B5B5B), 
              fontSize: 13, 
              fontWeight: FontWeight.w400
            ),
            tabs: const [
              Tab(text: 'Page 1'),
              Tab(text: 'Page 2'),
            ],
          ),
        ),
        const SizedBox(height: 16),
        // TabBarView
        Expanded(
          child: TabBarView(
            controller: tabController,
            children: [
              _buildAttendanceView(),
              Tab2(),
            ],
          ),
        ),
      ],
    ),
  );
}

3. 确保 TabBar 不在具有

borderOnForeground

设置的 Material 小部件内：

如果您已将

TabBar

包装在其他位置的

Material

小部件内，请确保

borderOnForeground

不会干扰。

4. 检查其他小部件：

如果上述方法均不起作用，请仔细检查包装

TabBar

的其他小部件，例如

Container

或任何父

Material

小部件，以确保它们不会导致任何意外的样式问题。

这应该可以解决

TabBar

中不需要的下划线问题。如果问题仍然存在，请告诉我，我们可以探讨进一步的调整。