一尘不染

Flutter(Dart):渲染引起的异常/ RenderFlex溢出

flutter

我的Flutter(Dart)RenderFlex像素溢出了。
渲染库的例外。

如何管理或应用滚动功能到我的应用页面视图,并避免Flutter出现诸如以下消息的渲染异常:

RenderFlex在底部溢出了28个像素。

如果您有任何需要完整的日志来帮助我的信息,请在这里:

在热重装时,它会根据消息在底部显示黄色/黑色条纹。

我可以使用可滚动的小部件来管理吗?或者我可以声明其他方式来控制它?

如果需要的话,提供完整代码(我更改了文本数据,但假定出现的文本长于屏幕尺寸,因此出现错误):

   @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            bottom: new TabBar(
              tabs: [
                new Tab(text: "xxx",),
                new Tab(text: "xxx",),
                new Tab(text: "xxx",),
              ],
            ),
            title: new Text(data["xxx"]),
          ),
          body: new TabBarView(
            children: [
              new Column(
                children: <Widget>[
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 16.0
                        ),),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 10.0
                        ),),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 16.0
                        ),),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 8.0
                        ),
                      ),
                  new Text(data["xxx"],
                        style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.blue,
                              fontSize: 8.0
                        ),),

                  new Row(
                    children: <Widget>[
                      new Expanded(
                        child: new Text("xxx"),
                      ),
                      new Expanded(
                        child: new Icon(Icons.file_download, color: Colors.green, size: 30.0,),
                      ),
                    ],
                  ),

                  new Divider(),
                  new Text("xxx", 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.red,
                              fontSize: 16.0
                      ),
                  ),
                ],
              ),

              new ListView.builder(
                itemBuilder: (BuildContext context, int index) => new EntryItem(_lstTiles[index]),
                itemCount: _lstTiles.length,
              ),

              new Column(
                children: <Widget>[
                  new Text(data["xxx"], 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.green[900],
                              fontSize: 16.0
                      ),
                  ),
                  new Text(data["xxx"], 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.green[900],
                              fontSize: 16.0
                      ),),
                  new Text(data["xxx"]),
                  new ListTile(title: new Text("xxx")),
                  new Text(data["xxx"]),
                  new ListTile(title: new Text("xxx")),
                  new Divider(),
                  new Text("xxx", 
                            style: new TextStyle(
                              fontStyle: FontStyle.italic,
                              color: Colors.red,
                              fontSize: 16.0
                      ),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
  }

阅读 356

收藏
2020-08-13

共1个答案

一尘不染

这是一个很常见的问题,尤其是当您开始在多种设备和方向上测试您的应用程序时。Flutter的Widget画廊有一个部分介绍了各种滚动Widget:

https://flutter.io/widgets/scrolling/

我建议您将全部内容包装在中SingleChildScrollView,或使用滚动条ListView

编辑:这个问题和答案已经得到一些注意,所以我想为那些登陆这里的人提供更多帮助。

Flutter SDK团队将大量精力投入到SDK代码本身内的良好文档中。一个用于理解算法最好的资源是Flex小部件(Row和Column是两个子类Flex)使用,以奠定了他们的孩子是伴随着阶级本身DartDoc:

https://github.com/flutter/flutter/blob/e3005e6962cfefbc12e7aac56576597177cc966f/packages/flutter/lib/src/widgets/basic.dart#L3724

Flutter网站还包含有关建筑布局的教程以及 有关如何使用和小部件的交互式代码实验室。
RowColumn

2020-08-13