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

Question

我遇到了 Flutter (Dart) RenderFlex 溢出像素的问题。渲染库异常

我如何管理或应用滚动功能到我的应用程序页面视图，并避免 Flutter 的呈现异常消息如下：

A RenderFlex overflowed by 28 pixels on the bottom.

如果你需要完整的日志来帮助我，请看这里：

在热重载时，它会根据消息在底部出现 yellow/black 条纹。

这是我可以使用可滚动小部件管理的东西吗？或者我可以声明我的小部件以控制它？

如果需要完整代码（我更改了文本数据但假设出现的文本比屏幕尺寸长，因此出现错误）：

   @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 gallery 有一个部分涵盖了各种滚动小部件：

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

我建议将您的全部内容包装在 SingleChildScrollView, or using a scrolling ListView 中。

编辑：这个问题和答案已经引起了一些注意，所以我想为登陆这里的人提供更多帮助。

Flutter SDK 团队在 SDK 代码本身的良好文档中投入了大量精力。了解 Flex 小部件（Row 和 Column 都是 Flex 的子 class 的算法的最佳资源之一）用来布置它们的 children 是 class 本身附带的 DartDoc：

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

Flutter 网站还包含有关如何使用 Row 和 Column 小部件的 tutorial on building layouts and an interactive codelab。

Answer 2

尝试将 Container 或任何其他 Widget 包裹在 Flexible 或 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"),
                    );
                  },
                ),
              ),
            )

Answer 3

假设您有一个 List 的 100 Text 个这样的小部件：

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

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

使用 Column 包装在 SingleChildScrollView

中

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

使用ListView
```
ListView(
  children: children
)
```

结合使用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 4

您可以将文本包装在 PreferredSize 小部件中：

 bottom: PreferredSize(
                    preferredSize: Size.fromHeight(120.0),
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: EdgeInsets.only(
                              right: 5.0, left: 5.0, bottom: 2.0, top: 2.0),
                          child: Text(
                            hospitalName,
                            textAlign: TextAlign.left,
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                                fontSize: 14.0),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 10.0),
                          child: Container(
                            height: 1.0,
                            width: MediaQuery.of(context).size.width,
                            color: Colors.white,
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(
                              top: 2.0, right: 5.0, left: 5.0, bottom: 2.0),
                          child: Text(
                            doctorName,
                            textAlign: TextAlign.left,
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Colors.white,
                                fontSize: 14.0),
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 10.0),
                          child: Container(
                            height: 1.0,
                            width: MediaQuery.of(context).size.width,
                            color: Colors.white,
                          ),
                        ),
            
                        TabBar(
                          isScrollable: true,
                          tabs: [
                            Tab(
                              text: "Tab1",
                            ),
                            Tab(text: "Tab2"),
                            Tab(text: "Tab3"),
                          ],
                        ),
                      ],
                    )),

Answer 5

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

resizeToAvoidBottomPadding: false,

正文部分之前

Answer 6

您可以为列内的每个容器使用小部件 Expanded。然后使用 flex 进行正确的调整。

Answer 7

对我来说，我向其中一个子行添加了一个文本，我正在从 firebase 获取数据，但它是空的。因此，请确保有一些数据即将到来。

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

Flutter (Dart): Exceptions caused by rendering / A RenderFlex overflowed

mobile

rendering

overflow

dart

flutter