flutter 扑动(Dart)：呈现导致的异常/ A RenderFlex溢出

cotxawn7 于 2022-12-30 发布在 Flutter

关注(0)|答案(7)|浏览(170)

我有一个问题，Flutter（ dart ）渲染Flex溢出像素。一个例外的渲染库。
如何管理应用页面视图或将滚动功能应用于应用页面视图，并避免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
                      ),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
  }

flutter

来源：https://stackoverflow.com/questions/49480051/flutter-dart-exceptions-caused-by-rendering-a-renderflex-overflowed

7条答案

按热度按时间

66bbxpm51#

这是一个非常常见的问题，尤其是当你开始在多个设备和方向上测试应用时。Flutter的Widget图库中有一个部分涵盖了各种滚动Widget：
https://flutter.io/widgets/scrolling/
我建议要么用SingleChildScrollView Package 你的全部内容，要么使用滚动的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网站还包含一个关于建筑布局的tutorial和一个关于如何使用Row和Column小部件的interactive codelab。

赞(0）回复(0）举报 2022-12-30

oprakyz72#

假设您有一个List，包含100个Text小部件，如下所示：

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

根据设备屏幕的不同，这些小部件可能会溢出，几乎没有解决方案可以处理它。
1.使用 Package 在SingleChildScrollView中的Column

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

1.使用ListView

ListView(
  children: children
)

1.使用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
    ),
  ],
)

赞(0）回复(0）举报 2022-12-30

uxhixvfz3#

我也面临这个问题，试试这个......

resizeToAvoidBottomPadding: false,

在身体部位之前

赞(0）回复(0）举报 2022-12-30

byqmnocz4#

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

赞(0）回复(0）举报 2022-12-30

wr98u20j5#

您可以在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"),
                          ],
                        ),
                      ],
                    )),

赞(0）回复(0）举报 2022-12-30

r3i60tvu6#

对于我来说，我添加了一个文本到一个行子，我从firebase获取数据，它是空的。所以确保有一些数据进来。

赞(0）回复(0）举报 2022-12-30

daupos2t7#

如果您使用列，请使用展开的小部件 Package ，如下所示

Expanded( 
        child: Center(
          child: Image(
            image: AssetImage('assets/icons/${menuItem.iconData}'),
          ),
        ),
      ),

赞(0）回复(0）举报 2022-12-30

我来回答

flutter 扑动(Dart)：呈现导致的异常/ A RenderFlex溢出

7条答案

相关问题

热门标签

最新问答