如何实现Flutter TabBar自动扩展填满宽度，不受选项卡数量影响

问题原因 #

1. Expanded 仅能在 Row、Column、Flex 这类弹性容器中生效，你将它作为 PreferredSize 的子组件使用，父级没有弹性布局约束，所以完全不生效，还可能引发布局异常。
2. TabBar 设置 isScrollable: true 时，默认会自适应Tab内容总宽度，单个Tab时不会撑满全屏。

修复方案 #

根据Tab的数量动态控制isScrollable属性即可：Tab数量大于1时开启滚动模式，保持原有多Tab适配效果；只有1个Tab时关闭滚动模式，TabBar会自动撑满父容器宽度。

修正后代码 #

PreferredSizeWidget _buildAppBar() {
  return AppBar(
    bottom: PreferredSize(
      preferredSize: const Size.fromHeight(50),
      child: _buildTabBar(),
    ),
    title: Text(AppLocalizations.of(context).translate('dash_board')),
    actions: _buildActions(context),
  );
}

Widget _buildTabBar() {
  return Observer(builder: (context) {
    var items = _dashStore.dashData?.data?.dashboardShopsModels;
    if (items == null) {
      return Container(
        color: Colors.green,
        height: 50, // 匹配PreferredSize高度，避免布局偏移
      );
    }
    return ColoredBox(
      color: const Color.fromARGB(255, 9, 26, 74),
      child: TabBar(
        labelColor: Colors.white,
        indicatorWeight: 4,
        indicatorColor: const Color.fromARGB(255, 255, 0, 105),
        unselectedLabelColor: Colors.white,
        tabs: [
          for (var item in items) Tab(text: '${item.shopName}'),
        ],
        // 动态控制是否可滚动：多Tab开启滚动，单Tab关闭滚动自动撑满
        isScrollable: items.length > 1,
        // 动态调整内边距：多Tab保留原有50的左右边距，单Tab不需要额外边距
        labelPadding: items.length > 1
            ? const EdgeInsets.symmetric(horizontal: 50)
            : EdgeInsets.zero,
        indicatorSize: TabBarIndicatorSize.tab,
      ),
    );
  });
}

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