关于#flutter#的问题：这个TabBar前面会留下一个空位

Question

这个TabBar前面会留下一个空位，而且下方也会有一条线。可是我没有设置啊。
下面是我的代码

import 'package:flutter/material.dart';

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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 9, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(40.0),
        child: AppBar(
          backgroundColor: const Color.fromRGBO(255, 255, 255, 1),
          elevation: 0,
          title: Container(
            height: 30,
            padding: EdgeInsets.zero, // 移除容器的内边距
            child: TabBar(
              labelColor: Colors.red,
              unselectedLabelColor: Colors.black,
              indicatorSize: TabBarIndicatorSize.label,
              indicatorColor: Colors.red,
              indicatorPadding: EdgeInsets.zero, // 移除指示器的内边距
              isScrollable: true,
              controller: _tabController,
              //labelPadding: EdgeInsets.zero, // 移除标签的内边距
              tabs: const [
                Tab(
                  child: Text("热门"),
                ),
                Tab(
                  child: Text("关注"),
                ),
                Tab(
                  child: Text("其他"),
                ),
                Tab(
                  child: Text("热门"),
                ),
                Tab(
                  child: Text("关注"),
                ),
                Tab(
                  child: Text("其他"),
                ),
                Tab(
                  child: Text("热门"),
                ),
                Tab(
                  child: Text("关注"),
                ),
                Tab(
                  child: Text("其他"),
                ),
              ],
            ),
          ),
        ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: const [
          Text("我是"),
          Text("我是"),
          Text("我是"),
          Text("我是"),
          Text("我是"),
          Text("我是"),
          Text("我是"),
          Text("我是"),
          Text("我是"),
        ],
      ),
    );
  }
}

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

从您提供的代码和描述来看，您遇到的问题可能与TabBar的样式或布局有关。关于您提到的空位和线的问题，这可能是由几个因素造成的。让我们逐一分析并尝试解决这些问题：

1. 空位问题：

   • 您的代码中没有明显的逻辑会导致TabBar前面出现空位。这可能是由其他因素引起的，比如AppBar的高度或容器的大小。您可以尝试调整AppBar的高度或容器的布局属性，看看是否能解决这个问题。

2. 下方线条问题：

   • 这可能是TabBar的底部边框或其他样式造成的。您可以尝试调整TabBar的样式属性，比如设置bottomIndicatorColor或bottomIndicatorSize为透明或适当的大小来消除这条线。此外，检查其他可能影响此问题的样式属性。

针对上述问题，您可以尝试以下解决方案：

1. 调整AppBar的高度和布局属性，确保没有多余的空位。您可以尝试移除或调整Container的大小和布局属性。
2. 调整TabBar的样式属性，特别是底部边框的颜色和大小。尝试将bottomIndicatorColor设置为透明或调整其大小。

下面是修改后的代码示例：

// ... 其他代码保持不变 ...

TabBar(
  labelColor: Colors.red,
  unselectedLabelColor: Colors.black,
  indicatorSize: TabBarIndicatorSize.label, // 可以尝试调整此属性的大小或颜色
  indicatorColor: Colors.red, // 设置指示器的颜色为红色
  indicatorPadding: EdgeInsets.zero, // 确保指示器没有额外的内边距
  bottomIndicatorColor: Colors.transparent, // 设置底部边框为透明，消除线条问题
  isScrollable: true,
  controller: _tabController,
  tabs: const [
    // ... 标签列表保持不变 ...
  ],
),
```这些修改可能会帮助您解决问题。如果问题仍然存在，请提供更多关于您的布局和样式的详细信息，以便更好地帮助您找到解决方案。