Flutter RenderFlex在Column Widget内部右侧溢出了15个像素 [英] Flutter RenderFlex overflowed by 15 pixels on the right inside Column Widget
本文介绍了Flutter RenderFlex在Column Widget内部右侧溢出了15个像素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了一个自定义ListTile,该列表应在中间居中放置两个分数,并在其左右两侧提供信息(屏幕截图).
I created a custom ListTile which should have two score centered in the middle and information on the left and right of this (screenshot).
左侧的信息可以具有任意长度,如果长度太长,则应使用TextOverflow.ellipsis.我无法使它正常工作,因为文本似乎不知道它应该具有的宽度并且溢出.我尝试将文本小部件包装到SizedBox,Expanded等中.这没有用.
The information on the left can have arbitrary length and should use TextOverflow.ellipsis when it's too long. I cannot get this to work since the Text does not seem to know the width it is supposed to have and overflows. I have tried wrapping the Text widgets into SizedBox, Expanded, etc. This has not worked.
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 15 pixels on the right.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.horizontal.
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#c64e4 relayoutBoundary=up11 OVERFLOWING
flutter: creator: Row ← Expanded ← Row ← Column ← ConstrainedBox ← Container ← Listener ← _GestureSemantics
flutter: ← RawGestureDetector ← GestureDetector ← InkWell ← ScopedModelDescendant<BaseballModel> ← ⋯
flutter: parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight (can use size)
flutter: constraints: BoxConstraints(w=143.0, 0.0<=h<=Infinity)
flutter: size: Size(143.0, 70.0)
flutter: direction: horizontal
flutter: mainAxisAlignment: start
flutter: mainAxisSize: max
flutter: crossAxisAlignment: center
flutter: textDirection: ltr
flutter: verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
我的代码如下:
@immutable
class GameTile extends StatelessWidget {
final Game game;
Color highligtColor = Colors.red;
GameTile({this.game});
@override
Widget build(BuildContext context) {
return InkWell(
child: Container(
height: 70.0,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Container(
width: 8.0,
height: 70.0,
color: highligtColor,
),
Padding(
padding: EdgeInsets.only(left: 15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
game.awayTeam.name,
overflow: TextOverflow.ellipsis,
),
Text(
game.homeTeam.name,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: Column(
children: [
Text(
game.awayRuns,
style: TextStyle(fontWeight: FontWeight.w900),
),
Text(
game.homeRuns,
style: TextStyle(fontWeight: FontWeight.w900),
),
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(game.getFormattedDate()),
Text(game.getFormattedTime()),
]),
Padding(
padding: EdgeInsets.only(left: 8.0, right: 10.0),
child: Container(),
)
],
),
)
],
)
],
),
),
);
}
}
推荐答案
只需用 Flexible
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Checkbox(
onChanged: (bool){},
),
Flexible(
child: new Text(
"This text can be so loooooooooooooong",
),
),
],
),
这篇关于Flutter RenderFlex在Column Widget内部右侧溢出了15个像素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文