在标签栏中向右溢出 88 像素颤振标签栏答案

【问题标题】：right overflowed by 88 pixel in tab bar flutter tabbar在标签栏中向右溢出 88 像素颤振标签栏
【发布时间】：2019-09-22 23:22:48
【问题描述】：

我正在使用 Flutter 开发移动应用程序，我制作了一个包含图标和文本的标签栏，但结果正好溢出了 88 像素这是结果的屏幕截图

这是代码

        bottom: new TabBar(controller: controller,
          tabs: <Widget>[
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.local_hospital,color: Colors.white),
                    new Text ( "كلام",
                        style:TextStyle(color: Colors.white,
                        )),
                  ]),
            ),
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.school,color: Colors.white),
                    new Text ( "كلام",style:TextStyle(
                        color: Colors.white
                    )),
                  ]),
            ),
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.account_balance,color: Colors.white),
                    new Text ( "كلام" ,style:TextStyle(
                        color: Colors.white
                    )),
                  ]),
            ),
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.account_balance,color: Colors.white),
                    new Text ( "كلام" ,style:TextStyle(
                        color: Colors.white
                    )),
                  ]),
            ),
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.account_balance,color: Colors.white),
                    new Text ( "كلام" ,style:TextStyle(
                        color: Colors.white
                    )),
                  ]),
            ),
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.account_balance,color: Colors.white),
                    new Text ( "كلام" ,style:TextStyle(
                        color: Colors.white
                    )),
                  ]),
            ),
          ],),
      ),

我该如何处理？我试图做一个水平滚动，但我失败了！谁能帮我？

【问题讨论】：

但是为什么不使用图标和文本，所以文本会显示在下面呢？你不会有那个错误
您可以使用 MediaQuery.of(givenContext).size.width 获取设备的整个宽度，然后将 MediaQuery.of(givenContext).size.width/numberOfWidgets 作为宽度添加到您的小部件。但是，如果它溢出，您的文本将不再可读......
@Hosar 但我正在使用它们 new Icon(Icons.local_hospital,color: Colors.white), new Text ( "كلام", style:TextStyle(color: Colors.white, )),还是你的意思不同？

标签： flutter flutter-layout

【解决方案1】：

当Widget 的空间不足时会发生溢出。这里Row 中Icon 和Text 的可用空间超过了可用空间。

尝试将文本放在图标下方，将Row 替换为Column

 new Tab(
          child: new Column(
              children: <Widget>[
                new Icon(),
                new Text (),
              ],
           ),
        ),

其他建议可能是减小Icon 的大小和/或Text 的字体大小。

【讨论】：

但文本将位于图标下方，我希望它位于图标旁边。用户将滚动标签栏以查看其他项目

【解决方案2】：

您可以尝试在TabBar 小部件上使用 isScrollable: true。如下

            TabBar(
              indicatorSize: TabBarIndicatorSize.tab,
              isScrollable: true,
              tabs: [
                Tab(
                  child: Row(children: <Widget>[
                    Icon(Icons.local_hospital, color: Colors.white),
                    Text("كلام",
                        style: TextStyle(
                          color: Colors.white,
                        )),
                  ]),
                ),
                Tab(
                    child: Row(children: <Widget>[
                  Icon(Icons.account_balance, color: Colors.white),
                  Text("كلام", style: TextStyle(color: Colors.white)),
                ])),
                Tab(
                  child: Row(children: <Widget>[
                    Icon(Icons.account_balance, color: Colors.white),
                    Text("كلام", style: TextStyle(color: Colors.white)),
                  ]),
                ),
                Tab(
                  child: Row(children: <Widget>[
                    Icon(Icons.mail, color: Colors.white),
                    Text("كلام", style: TextStyle(color: Colors.white)),
                  ]),
                ),
                Tab(
                  child: Row(children: <Widget>[
                    Icon(Icons.access_alarm, color: Colors.white),
                    Text("كلام", style: TextStyle(color: Colors.white)),
                  ]),
                ),
                Tab(
                  child: Row(children: <Widget>[
                    Icon(Icons.add_to_photos, color: Colors.white),
                    Text("كلام", style: TextStyle(color: Colors.white)),
                  ]),
                ),
              ],
            )

希望对您有所帮助。

【讨论】：