Flutter：TabBar 剪辑标签标题答案

【问题标题】：Flutter: TabBar clipped tab titlesFlutter：TabBar 剪辑标签标题
【发布时间】：2021-03-10 02:23:35
【问题描述】：

我使用带有静态 4 个选项卡的 TabBar。我希望 TabBar 在屏幕上具有扩展宽度（从右到左边缘），但长标签标题如下所示：

我尝试将isScrollable: true 用于 TabBar。标题没有被剪裁，但这会导致宽度折叠：

我的代码：

  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 4,
        child: Scaffold(
            appBar: AppBar(title: Text('Tabs'), centerTitle: true),
            body: TabBar(tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Long tab name'),
              Tab(text: 'Tab 4'),
            ])));
  }

问题：在这种情况下如何实现全屏 TabBar 宽度且标题不被剪裁？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

     @override
 Widget build(BuildContext context) {
   return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(title: Text('Tabs'), centerTitle: true),
        body: Container(
          child: TabBar(tabs: [
            Tab(
              child: Text(
                "Tab 1",
                overflow: TextOverflow.clip,
                maxLines: 1,
              ),
            ),
            Tab(
              child: Text(
                "Tab 2",
                overflow: TextOverflow.clip,
                maxLines: 1,
              ),
            ),
            Tab(
              child: Text(
                "Long tab name sdsadsadas dsadasdsadsa",
                overflow: TextOverflow.clip,
                maxLines: 1,
              ),
            ),
            Tab(
              child: Text(
                "Tab 4",
                overflow: TextOverflow.clip,
                maxLines: 1,
              ),
            ),
          ]),
        )));
  }

【讨论】：

这不是我想要的，第三个标签标题仍然被剪掉。无论如何，非常感谢你的想法。我将尝试通过 Tab 的子项而不是文本来实现与您一样的目标。

【解决方案2】：

通过添加使标签栏可滚动

 isScrollable: true,

【讨论】：

正如我所说，我尝试对 TabBar 使用 isScrollable: true。标题不会被剪裁，但这会导致宽度折叠。这不是期望的行为。无论如何感谢您的回答！