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

当return ( <MyCompomentWrapper> <Query query={GET_PRODUCT_QUERY} skip={!type} variables={{ type: type } }> { ({ data: { productsByType = {} } = {}, loading, error }) => { if (error) { // do something for error } if (loading) { return <Loader /> } // USING THIS WORKS, but <Mutation> DOES NOT!!! this.props.client.mutate({ // pass my values })的空间不足时，就会发生溢出。这里Widget中Icon和Text的可用空间超出了可用空间。

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

Column

其他建议可能是减小new Tab( child: new Column( children: <Widget>[ new Icon(), new Text (), ], ), ),的大小和/或减小Icon的字体大小。

Answer 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)),
                  ]),
                ),
              ],
            )

希望获得帮助。

标签栏抖动标签栏中的像素溢出了88像素

2 个答案: