颤动(Dart):渲染/ A RenderFlex溢出导致的异常

Question

我有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
                      ),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
  }

Answer 1

这是一个非常常见的问题,尤其是当您开始在多个设备和方向上测试您的应用时.Flutter的Widget画廊有一个部分涵盖各种滚动小部件:

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

我建议将整个内容包装成一个SingleChildScrollView或使用滚动ListView.

Answer 2

假设您有List100 个这样的Text小部件：

final children = List<Widget>.generate(100, (i) => Text('Item $i')).toList();

根据设备屏幕的不同，这些小部件可能会溢出，很少有解决方案可以处理它。

1. 使用Column包裹在SingleChildScrollView

   SingleChildScrollView(
     child: Column(children: children),
   )
   

2. 用 ListView

   ListView(
     children: children
   )
   

3. 同时使用的组合Column和ListView（你应该使用Expanded/ Flexible，或者给一个固定的高度在ListView这样做时）。

   Column(
     children: [
       ...children.take(2).toList(), // show first 2 children in Column
       Expanded(
         child: ListView(
           children: children.getRange(3, children.length).toList(),
         ), // And rest of them in ListView
       ),
     ],
   )
   

Answer 3

我也遇到这个问题了，试试这个......

resizeToAvoidBottomPadding: false,

身体部分之前

编辑-1

resizeToAvoidBottomPadding已弃用

resizeToAvoidBottomInset: false

Answer 4

尝试将Container或任何其他包裹Widget在Flexibleor 中Expanded，它将完成。

这样做

           Flexible(
              child: Container(
                padding: EdgeInsets.all(5),
                height: 400,
                width: double.infinity,
                child: ListView.builder(
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  itemCount: 4,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text("Tony Stark"),
                      subtitle: Text("A Iron Man"),
                    );
                  },
                ),
              ),
            )