flutter - tab bar flutter tabbar 右侧溢出 88 像素

Question

我正在使用 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
                    )),
                  ]),
            ),
          ],),
      ),

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

Answer 1

您可以在 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)),
                  ]),
                ),
              ],
            )

希望这对您有所帮助。