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

Posted 2023-02-23

【中文标题】如何在颤动中自定义标签栏宽度？

【英文标题】：How to customize tabbar width in flutter?

【发布时间】：2018-12-16 18:26:32

【问题描述】：

嗨，我们可以在颤振中自定义标签栏宽度吗？我的标签栏宽度在这里是固定的，所以当我的标签栏中有长文本时，它不会完全显示，我想让我的标签栏宽度根据内容灵活，所以当我的文本只是短文本时，标签栏宽度会很小而且当文本是长文本时，标签栏宽度大于短文本标签。我一直在尝试在互联网上搜索它，但我找不到任何答案来解决我的问题。

【参考方案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'),
              ),
            ],
          )

【讨论】：

是的，它很有用，但我想要的是让标签栏宽度更小，图标相机和聊天标签之间有很多未使用的空间，我该如何实现？ whatsapp 可以做到这一点，他们可以使相机图标选项卡变得如此之小。所以问题是我们可以在颤振中做到这一点吗？

我不知道它对我不起作用，标签栏宽度仍然是固定的，所以如果总宽度为 400，它总是拆分为 200 - 200 而不是 300 - 100 等等。嗯你确定你已经尝试过了？你能确认这是否有效吗？

如果您将 TabBar 放在 PreferredSize 小部件中，它似乎可以工作。但我不确定。查看此链接：***.com/questions/44272440/…

我已经尝试过了，但仍然没有运气，我只能改变标签栏的高度，我认为答案是标签栏的指示器而不是标签栏本身。嗯，也许我们不能改变标签栏的宽度？在互联网上仍然找不到任何答案

完成了我现在已经想通了，我忘记在我以前的代码中使用是可滚动的，现在我再试一次并且添加是可滚动的，现在它可以工作了

【参考方案2】：

我是这样解决这个问题的：

    bottom: TabBar(
      isScrollable: true,
      controller: _tabController,
      indicatorColor: Colors.white,
      labelPadding: EdgeInsets.symmetric(horizontal: 10.0),

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

只需使用填充，我认为它适用于所有屏幕尺寸！ ...别忘了：

   isScrollable: true

【参考方案3】：

  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"))
            ],
          ),`


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

`

【讨论】：

如果您遇到有关 MediaQuery 的错误，那是因为您需要在新的 MaterialApp 小部件中提供上下文。更多这里***.com/questions/50214338/…

这对我有用。直接来自 Flutter 文档：/// 如果 [isScrollable] 为 true，则每个选项卡的宽度与其标签所需的一样宽 /// 并且整个 [TabBar] 是可滚动的。否则，每个选项卡都会获得相等的 /// 可用空间份额。 final bool isScrollable;

indicatorColor: Colors.white，帮我设置指标颜色。谢谢。

【参考方案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),

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

颤振问题here

【讨论】：

使用标签填充可以正常工作，非常感谢！

【参考方案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,
        ),

【参考方案6】：

首先，对不起我的英语。

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

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

按Ctrl+TabBar，之后会显示类似的源代码-->

在 Show tabs.dart 之后，你只需要更改 1 行 -->

删除第 1138 和 1139 行并放入此代码

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

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

希望对你有帮助。

【讨论】：

你不应该编辑 sdk 文件，因为每次更新都会在更新后被忽略

@MohamedKamel 但这是一个简单的解决方案，为什么你要投票 -1，我只是想帮忙。

因为它是错误的解决方案“你不应该编辑SDK文件，因为每次更新都会在更新flutter后被解除”然后错误会再次上升，你可能会在其他项目中遇到错误

我将其标记为删除，因为它显然不是解决方案。它基本上是一个“颤振核心黑客”。