任何人都可以帮助破译我不断遇到的异常吗?我不确定下一步如何尝试解决面板扩展时的溢出问题。我尝试将其包装到灵活的小部件中,但这似乎无法解决问题。
下面是显示错误的快速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,
),
),
],
),
),
),
非常感谢您!
答案 0 :(得分:1)
我检查了您的代码,错误原因是FlatButton和Dividers中的Column
部分。
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
中以解决此问题,以便考虑到可见的情况。
我希望一切都清楚了,请告诉我是否有不清楚的地方或代码无法正常工作。