Flutter RenderFlex在Column Widget内部右侧溢出了15个像素
我创建了一个自定义ListTile，其中间应该有两个得分，该信息的左右两侧分别是该得分（屏幕截图）。
左边的信息可以有任意长度，如果信息太长，则应使用TextOverflow.ellipsis。由于文本似乎不知道它应该具有的宽度并且溢出，所以我无法使它起作用。我尝试将文本小部件包装到SizedBox，Expanded等中。这没有用。
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(),
)
],
),
)
],
)
],
),
),
);
}
}
Bak*_*ker 14
解释Flexible或Expanded解决方案
在 a 内部Row，当不在or小部件（或另一个限制宽度的小部件）Text内时，小部件永远不会换行，也不会显示省略号。ExpandedFlexible
当 Flutter 为Row或执行布局时，任何非弹性因子小部件都会在无界空间Column中布局。即没有任何限制。（、和是唯一的弹性系数小部件。）FlexibleExpandedSpacer
因此，当Text被放置在 内部时Row，它永远不会太宽而达到宽度限制并被包裹，因为......
...非弹性因子小部件的布局期间没有任何限制。Row
将小部件放置Text在Flexibleor内Expanded将导致 Flutter在布局期间计算剩余空间Row并施加该约束。如果需要，这将导致换行和省略号（如果指定）Text("blahblah", overflow: TextOverflow.ellipsis)：。
示例代码
import 'package:flutter/material.dart';
class FlexTextWrapPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flex Text Wrap'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: 400,
child: Row(
children: [
MySpacer(width: 100),
Text("This should easily wrap, but doesn't because I'm in INFINITE SPACE"),
MySpacer(width: 100),
],
),
),
SizedBox(
width: 400,
child: Row(
children: [
MySpacer(width: 100),
Expanded(child: Text("This should easily wrap, and DOES because I'm in BOUNDED SPACE")),
MySpacer(width: 100),
],
),
),
SizedBox(
width: 400,
child: Row(
children: [
MySpacer(width: 100),
Expanded(
child: Text("This should easily wrap, and DOES because I'm in BOUNDED SPACE",
overflow: TextOverflow.ellipsis, // default is .clip
maxLines: 2,),// default is 1
),
MySpacer(width: 100),
],
),
),
],
),
);
}
}
class MySpacer extends StatelessWidget {
final double width;
MySpacer({this.width});
@override
Widget build(BuildContext context) {
return Container(child: SizedBox(width: width, height: 16,), color: Colors.lightBlueAccent,);
}
}
结果
如果希望子内容刚好适合内容而不展开。您必须与inside RowFlexible结合使用：MainAxisSize.min
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Padding(
padding: const EdgeInsets.only(right: 2),
child: Text("abc",
style: TextStyle(
color: Colors.white,
fontSize: 13),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
Icon(Icons.arrow_drop_down, size: 10, color: Colors.white,)
],
)
关于异常
我在手机上运行了你的代码，只有在干预团队名称和小部件的宽度后才发生异常。
我认为出现这个问题是因为您的代码不能很好地适应不同的显示尺寸，特别是如果团队名称的长度不同：
更灵活和动态小部件的具体解决方案
我创建了一个修改过的小部件，它可以很好地适应约束变化，并以更聪明的方式使用可用空间。我通过尽可能展平嵌套的Rows 和Columns 来做到这一点，从而产生更浅、更灵活的小部件树：
return InkWell(
child: Container(
height: 70.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(width: 8.0, height: 70.0, color: highlightColor),
SizedBox(width: 15.0),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(game.awayTeam.name, overflow: TextOverflow.ellipsis),
Text(game.homeTeam.name, overflow: TextOverflow.ellipsis),
],
),
Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(game.awayRuns, style: TextStyle(fontWeight: FontWeight.w900)),
Text(game.homeRuns, style: TextStyle(fontWeight: FontWeight.w900)),
],
),
Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(game.getFormattedDate()),
Text(game.getFormattedTime()),
]
),
SizedBox(width: 18.0),
],
),
),
);
处理困难约束时的一般提示
大多数时候，最好在浅树中只使用几个小部件。嵌套各种“有组织的”小部件，尤其是Columns、Rows 和Expandeds，通常会产生这样的情况：aExpanded总是请求相同的大小（或父大小的比率），甚至不考虑其内容的尺寸。
这可能会导致内容溢出，而小部件的其他部分则有未使用的负空间。
只需将溢出的小部件包装为 Flexible
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Checkbox(
onChanged: (bool){},
),
Flexible(
child: new Text(
"This text can be so loooooooooooooong",
),
),
],
),
| 归档时间： |
|
| 查看次数： |
3376 次 |
| 最近记录： |