exception - 扩展面板底部溢出

Question

任何人都可以帮助破译我不断遇到的异常吗？我不确定接下来要尝试什么来修复面板展开时的溢出问题。我已经尝试将它包装成一个灵活的小部件，但这似乎并不能解决问题。

这是一个显示错误的快速 gif：https ://imgur.com/itIYV8s

这是我的例外：

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY 
╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 74 pixels on the bottom.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
flutter: The edge of the RenderFlex that is overflowing has been marked 
in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents 
being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget) 
to force the children of the
flutter: RenderFlex to fit within the available space instead of being 
sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is:
flutter:   RenderFlex#ac136 OVERFLOWING
flutter:   creator: Column ← DecoratedBox ← ConstrainedBox ← Container ← AnimatedContainer ← Container ←
flutter:   Column ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#04b41 ink renderer]
flutter:   ← NotificationListener<LayoutChangedNotification> ← CustomPaint ← ⋯
flutter:   parentData: <none> (can use size)
flutter:   constraints: BoxConstraints(w=363.0, h=0.4)
flutter:   size: Size(363.0, 0.4)
flutter:   direction: vertical
flutter:   mainAxisAlignment: spaceBetween
flutter:   mainAxisSize: max
flutter:   crossAxisAlignment: center
flutter:   verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
flutter: Another exception was thrown: A RenderFlex overflowed by 74 pixels on the bottom.

这是我的代码：

new SingleChildScrollView(
    child: new Card(
    margin: EdgeInsets.all(0.0),
    elevation: 2.0,
    color: MyApp.getTheme().canvasColor,
    child: new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new ListTile(
            title: new Text("FB", style: new TextStyle(
              fontWeight: FontWeight.bold,
            ),),
            subtitle: new Text("Facebook, Inc."),
            onTap: () {
              setState(() {
                if (this._bodyHeight == 200.0) {
                  this._bodyHeight = 0.0;
                } else {
                  this._bodyHeight = 200.0;
                }
              });
            },
            trailing: new FlatButton(
              shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
              ),
              onPressed: () {
                setState(() {
                  mode++;
                  if (mode == 1) {
                    text = "+0.80%";
                  } else if (mode == 2) {
                    text = "+1.41";
                  } else {
                    text = "513.3B";
                    mode=0;
                  }
                });
              },
              child: new Text("+1.41", style: new TextStyle(
                color: Colors.white,
              ),),
              color: Colors.green,
            )
        ),
        new Container(
          child: new AnimatedContainer(
            child: new Column(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Text(""),
                new Padding(
                  padding: new EdgeInsets.only(bottom: 5.0),
                  child: new Column(
                    children: <Widget>[
                      new Divider(),
                      new Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          new FlatButton(
                            onPressed: () {
                              setState(() {
                                if (this._bodyHeight == 200.0) {
                                  this._bodyHeight = 0.0;
                                } else {
                                  this._bodyHeight = 200.0;
                                }
                              });
                             },
                            child: new Text(
                              "CANCEL",
                              style: new TextStyle(
                                color: Colors.grey,
                              ),
                            ),
                          ),
                          new FlatButton(
                            onPressed: null,
                            child: new Text(
                               "SAVE",
                              style: new TextStyle(
                                color: MyApp.getTheme().indicatorColor,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                )
              ],
            ),
            width: 400.0,
            curve: Curves.easeInOut,
            duration: const Duration(milliseconds: 500),
            height: _bodyHeight,
            color: MyApp.getTheme().canvasColor,
          ),
        ),
      ],
    ),
  ),
),

太感谢了！

标签： exceptiondartflutter

Answer 1

我检查了您的代码，错误的原因是ColumnFlatButton 和 Dividers 中的一部分。

new SingleChildScrollView(
        child: new Card(
          margin: EdgeInsets.all(0.0),
          elevation: 2.0,
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new ListTile(
                  title: new Text(
                    "FB",
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  subtitle: new Text("Facebook, Inc."),
                  onTap: () {
                    setState(() {
                      if (this._bodyHeight == 200.0) {
                        this._bodyHeight = 0.0;
                      } else {
                        this._bodyHeight = 200.0;
                      }
                    });
                  },
                  trailing: new FlatButton(
                    shape: new RoundedRectangleBorder(
                      borderRadius:
                          new BorderRadius.all(new Radius.circular(20.0)),
                    ),
                    onPressed: () {
                      setState(() {
                        mode++;
                        if (mode == 1) {
                          text = "+0.80%";
                        } else if (mode == 2) {
                          text = "+1.41";
                        } else {
                          text = "513.3B";
                          mode = 0;
                        }
                      });
                    },
                    child: new Text(
                      "+1.41",
                      style: new TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    color: Colors.green,
                  )),
              new Container(
                child: new AnimatedContainer(
                  child: Align(
                      alignment: Alignment.bottomRight,
                      child: new SingleChildScrollView(
                        child: new Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            new Divider(),
                            new Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: <Widget>[
                                new FlatButton(
                                  onPressed: () {
                                    setState(() {
                                      if (this._bodyHeight == 200.0) {
                                        this._bodyHeight = 0.0;
                                      } else {
                                        this._bodyHeight = 200.0;
                                      }
                                    });
                                  },
                                  child: new Text(
                                    "CANCEL",
                                    style: new TextStyle(
                                      color: Colors.grey,
                                    ),
                                  ),
                                ),
                                new FlatButton(
                                  onPressed: null,
                                  child: new Text(
                                    "SAVE",
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      )),
                  width: 400.0,
                  curve: Curves.easeInOut,
                  duration: const Duration(milliseconds: 500),
                  height: _bodyHeight,
                ),
              ),
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.

并且在动画期间，列溢出。并且由于列不可见（并且应该可见），因此导致了此错误。因此，我们将将该列放入SingleChildScrollView以解决问题，以便将其视为可见。

我希望一切都清楚，如果有什么不清楚或代码不起作用，请告诉我。