1

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

在此处输入图像描述

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

在此处输入图像描述

这是我的代码,我尝试过扩展小部件,但它没有用。请帮忙

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),
        ),
      ),
    );
  }
});}
4

1 回答 1

1

用 SizeBox 包裹 TabBar

ColoredBox(
  color: Color.fromARGB(255, 9, 26, 74),
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: TabBar(..),
  ),
)
于 2021-11-28T10:44:00.537 回答