如何使颤动的标签栏展开？

Posted 2023-02-23

【中文标题】如何使颤动的标签栏展开？

【英文标题】：how to make flutter tab bar expanded?

【发布时间】：2022-01-05 13:09:14

【问题描述】：

我正在尝试制作一个彩色的标签视图，如果标签中有更多项目，它看起来会扩大，但如果它是单个项目，它看起来并不好。 我的标签现在如下所示

我怎样才能让它看起来像这样？

这是我的代码，我尝试过扩展小部件，但它不起作用。请帮忙

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,
    );
   else 
    return Expanded(
      child: ColoredBox(
        color: Color.fromARGB(255, 9, 26, 74),
        child: TabBar(
          labelColor: Colors.white,
          indicatorWeight: 4,
          indicatorColor: Color.fromARGB(255, 255, 0, 105),  
          unselectedLabelColor: Colors.white,             
          tabs: [
            for (var item in items) Tab(text: '$item.shopName'),
          ],
          isScrollable: true,
          labelPadding: EdgeInsets.only(left: 50, right: 50),
        ),
      ),
    );
  
);

【参考方案1】：

用 SizedBox 包裹 TabBar

ColoredBox(
  color: Color.fromARGB(255, 9, 26, 74),
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: TabBar(..),
  ),
)