Flutter中TabBar标签过多无法滚动，如何实现可滚动TabBar？

要解决标签过多无法完整显示的问题，只需要给TabBar添加isScrollable: true属性，就能让TabBar支持横向滚动，同时可以通过labelPadding调整标签间的间距，避免文字过度挤压。

修改后的完整代码：

Widget build(BuildContext context) {
  final list = ['Furniture', 'Clothe', 'Mobiles', 'Laptop','Accessories','Stationary',];
  return DefaultTabController(
      length: list.length,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            // 开启滚动功能
            isScrollable: true,
            // 可选：调整标签左右内边距，优化显示效果
            labelPadding: const EdgeInsets.symmetric(horizontal: 16),
            tabs: list
                .map((e) => Tab(
                      text: e,
                    ),
            )
                .toList(),
          ),
        ),
        body: TabBarView(
          children: list.map((e) => CustomScreen(string: e)).toList(),
        ),
      ));
}

关键说明 #

• isScrollable: true：开启后TabBar不再强制所有标签挤在一行，而是允许横向滚动查看所有标签。
• labelPadding：可选配置，用来调整每个标签的左右间距，避免短标签过于紧凑或长标签被裁切。

内容的提问来源于stack exchange，提问作者user22362195