选项卡中的大文本未完全显示 Flutter答案

【问题标题】：Large text in tab is not showing completely Flutter选项卡中的大文本未完全显示 Flutter
【发布时间】：2022-01-08 12:14:36
【问题描述】：

我正在做一个需要选项卡的 Flutter 项目，但是其中一个选项卡名称很大，名称没有完全显示，如图所示，我该如何解决这个问题，我想要 TabBar 文本是 multiline，我是 Flutter 的新手，因此我们将不胜感激。

Current tab situation

这里是代码

TabBar(
  tabs: [
    Tab(
      text: "Clock",
      icon: Icon(Icons.access_time),
    ),
    Tab(
      text: "Alarm",
      icon: Icon(Icons.access_alarm),
    ),
    Tab(
      text: "Stopwatch",
      icon: Icon(Icons.av_timer),
    ),
    Tab(
      text: "Countdown Timer",
      icon: Icon(Icons.timer_rounded),
    )
  ],
),

【问题讨论】：

稍微展示一下代码。您可以在下一行使用 \n。
文本（最大线数：2
由于只有一个字母被隐藏，您可以减小字体大小
@Mahi 我没有使用文本小部件，其次在\n 之后，文本对齐不会保持居中
好的。不管它是什么..你已经解决了。很好。

标签： flutter tabs flutter-layout tabbar

【解决方案1】：

将选项卡文本放入展开的小部件

child:Expaned(
child : Text(
  "Countdown Timer",
  textAlign: TextAlign.center,
)),

【讨论】：

【解决方案2】：

我解决了它，而不是使用我使用的text 属性

child: Text(
  "Countdown Timer",
  textAlign: TextAlign.center,
),

添加textAlign 解决了我的问题

【讨论】：

【解决方案3】：

添加labelPadding 或使用isScrollable 使标签可滚动

TabBar(
  isScrollable: true,
  labelPadding: EdgeInsets.symmetric(horizontal: 10.0),
  tabs: [
Tab(
  text: "Clock",
  icon: Icon(Icons.access_time),
),
Tab(
  text: "Alarm",
  icon: Icon(Icons.access_alarm),
),
Tab(
  text: "Stopwatch",
  icon: Icon(Icons.av_timer),
),
Tab(
  text: "Countdown Timer",
  icon: Icon(Icons.timer_rounded),
)
],),

【讨论】：