Question

嗨，我们可以自定义Flutter中的标签栏宽度吗？我的标签栏宽度固定在此处，因此当我的标签栏中有长文本时，它不会完全显示，我想根据内容使标签栏宽度灵活，因此当我的文本只是短文本时，标签栏宽度会很小并且当文本为长文本时，选项卡宽度大于短文本选项卡。我一直尝试在互联网上进行搜索，但是找不到解决问题的答案。

Answer 1

TabBar(isScrollable: true)

制作可滚动的标签栏。当您的标签文字内容或标签数量不适合显示尺寸时，此功能很有用。

或者您可以执行以下操作：

child: new TabBar(
            tabs: [
              new Container(
                width: 30.0,
                child: new Tab(text: 'hello'),
              ),
              new Container(
                  child: new Tab(text: 'world'),
              ),
            ],
          )

Answer 2

  double width = MediaQuery.of(context).size.width;

    double yourWidth = width  / 5;


bottom: TabBar(
            indicatorColor: Colors.white,
            indicatorSize: TabBarIndicatorSize.label,
            isScrollable: true,
            controller: _tabcontroller,
            tabs: <Widget>[
              Container(
                width: 30,
                height: 50,
                alignment: Alignment.center,
                child: Icon(
                  Icons.camera_alt,
                ),
              ),
              Container(
                width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("CHATS")),
              Container(
                  width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("STATUS")),
              Container(
                  width: yourWidth,
                  height: 50,
                  alignment: Alignment.center,
                  child: Text("CALL"))
            ],
          ),`


---------------

`

Answer 3

这是我如何解决此问题的方法：

    bottom: TabBar(
      isScrollable: true,
      controller: _tabController,
      indicatorColor: Colors.white,
      labelPadding: EdgeInsets.only(right: 10.0, left: 10.0),

      tabs: <Widget>[
        Tab(
          icon: Icon(Icons.camera_alt),
        ),
        Tab(
          text: "CONVERSAS",
        ),
        Tab(
          text: "STATUS",
        ),
        Tab(
          text: "CHAMADAS",
        )
      ],
    )

只需使用填充，我认为它适用于所有屏幕尺寸！ ...并且不要忘记：

   isScrollable: true

Answer 4

您可以像这样将labelPadding添加到TabBar小部件：

child: TabBar(
        indicatorColor: Colors.white,
        labelPadding: EdgeInsets.symmetric(horizontal: 2.0),
        ....
        tabs: <Tab>[
                     ......
        ]
)
......

或者您可以这样做（我不推荐）

在material / tabs.dart文件中，编辑以下行：

padding: widget.labelPadding ?? tabBarTheme.labelPadding ?? kTabLabelPadding,

具有类似的内容

padding: EdgeInsets.symmetric(horizontal: 2.0),

默认情况下，颤振使用kTabLabelPadding进行填充。

颤振问题here

Answer 5

对于不同尺寸的设备：

double orjWidth = MediaQuery.of(context).size.width;
double cameraWidth = orjWidth/24;
double yourWidth = (orjWidth - cameraWidth)/5;

    bottom: TabBar(
      controller: _tabController,
      indicatorColor: Colors.white,
      labelPadding: EdgeInsets.symmetric(horizontal:(orjWidth - ( cameraWidth + yourWidth*3))/8),
      isScrollable: true,
      tabs: [
        Container(
          child: Tab(icon: Icon(Icons.camera_alt)),
          width: cameraWidth,
        ),
        Container(
          child: Tab(
            text: "CHATS",
          ),
          width: yourWidth,
        ),
        Container(
          child: Tab(
            text: "STATUS",
          ),
          width: yourWidth,
        ),
        Container(
          child: Tab(
            text: "CALL",
          ),
          width: yourWidth,
        ),

Answer 6

首先，我对我的英语感到抱歉。

在网站上 5小时 搜索后，我找到了解决方法，

注意：此解决方案仅适用于WhatsApp之类的产品！

按Ctrl + TabBar，之后将显示类似的源代码->
在显示tabs.dart之后，您只需更改1行->
删除1138和1139行并输入以下代码

if (!widget.isScrollable && index != 0)
        wrappedTabs[index] = Expanded(child: wrappedTabs[index]);

然后保存并在设备上运行。
我的设备屏幕:)->

希望对您有所帮助。

如何在Flutter中自定义标签栏宽度？

6 个答案: