标签栏右溢出 88 像素 flutter tabbar

Question

我正在使用 flutter 开发移动应用程序，我制作了一个图标和文本的选项卡栏，但结果正确溢出了 88 像素\n这是结果的屏幕截图

\n\n

\n\n

这是代码

\n\n

        bottom: new TabBar(controller: controller,\n          tabs: <Widget>[\n            new Tab(\n              child: new Row(\n                  children: <Widget>[\n                    new Icon(Icons.local_hospital,color: Colors.white),\n                    new Text ( "\xd9\x83\xd9\x84\xd8\xa7\xd9\x85",\n                        style:TextStyle(color: Colors.white,\n                        )),\n                  ]),\n            ),\n            new Tab(\n              child: new Row(\n                  children: <Widget>[\n                    new Icon(Icons.school,color: Colors.white),\n                    new Text ( "\xd9\x83\xd9\x84\xd8\xa7\xd9\x85",style:TextStyle(\n                        color: Colors.white\n                    )),\n                  ]),\n            ),\n            new Tab(\n              child: new Row(\n                  children: <Widget>[\n                    new Icon(Icons.account_balance,color: Colors.white),\n                    new Text ( "\xd9\x83\xd9\x84\xd8\xa7\xd9\x85" ,style:TextStyle(\n                        color: Colors.white\n                    )),\n                  ]),\n            ),\n            new Tab(\n              child: new Row(\n                  children: <Widget>[\n                    new Icon(Icons.account_balance,color: Colors.white),\n                    new Text ( "\xd9\x83\xd9\x84\xd8\xa7\xd9\x85" ,style:TextStyle(\n                        color: Colors.white\n                    )),\n                  ]),\n            ),\n            new Tab(\n              child: new Row(\n                  children: <Widget>[\n                    new Icon(Icons.account_balance,color: Colors.white),\n                    new Text ( "\xd9\x83\xd9\x84\xd8\xa7\xd9\x85" ,style:TextStyle(\n                        color: Colors.white\n                    )),\n                  ]),\n            ),\n            new Tab(\n              child: new Row(\n                  children: <Widget>[\n                    new Icon(Icons.account_balance,color: Colors.white),\n                    new Text ( "\xd9\x83\xd9\x84\xd8\xa7\xd9\x85" ,style:TextStyle(\n                        color: Colors.white\n                    )),\n                  ]),\n            ),\n          ],),\n      ),\n

\n\n

我该如何处理？我尝试制作水平滚动但失败了！\n谁能帮我吗？

\n

Answer 1

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

\n\n

            TabBar(\n              indicatorSize: TabBarIndicatorSize.tab,\n              isScrollable: true,\n              tabs: [\n                Tab(\n                  child: Row(children: <Widget>[\n                    Icon(Icons.local_hospital, color: Colors.white),\n                    Text("\xd9\x83\xd9\x84\xd8\xa7\xd9\x85",\n                        style: TextStyle(\n                          color: Colors.white,\n                        )),\n                  ]),\n                ),\n                Tab(\n                    child: Row(children: <Widget>[\n                  Icon(Icons.account_balance, color: Colors.white),\n                  Text("\xd9\x83\xd9\x84\xd8\xa7\xd9\x85", style: TextStyle(color: Colors.white)),\n                ])),\n                Tab(\n                  child: Row(children: <Widget>[\n                    Icon(Icons.account_balance, color: Colors.white),\n                    Text("\xd9\x83\xd9\x84\xd8\xa7\xd9\x85", style: TextStyle(color: Colors.white)),\n                  ]),\n                ),\n                Tab(\n                  child: Row(children: <Widget>[\n                    Icon(Icons.mail, color: Colors.white),\n                    Text("\xd9\x83\xd9\x84\xd8\xa7\xd9\x85", style: TextStyle(color: Colors.white)),\n                  ]),\n                ),\n                Tab(\n                  child: Row(children: <Widget>[\n                    Icon(Icons.access_alarm, color: Colors.white),\n                    Text("\xd9\x83\xd9\x84\xd8\xa7\xd9\x85", style: TextStyle(color: Colors.white)),\n                  ]),\n                ),\n                Tab(\n                  child: Row(children: <Widget>[\n                    Icon(Icons.add_to_photos, color: Colors.white),\n                    Text("\xd9\x83\xd9\x84\xd8\xa7\xd9\x85", style: TextStyle(color: Colors.white)),\n                  ]),\n                ),\n              ],\n            )\n

\n\n

希望这有帮助。

\n