Row并且Column是Flex小部件，并且不会滚动，如果没有足够的空间，则抖动会引发溢出错误。
如果发生这种情况，可以使用Expanded或Flexible小部件来包装长文本。
在文档中并没有明确说明，而是扩展以填充主轴上的可用空间，Expanded并Flexible沿横轴方向包装。
循序渐进的方法可能有助于理解问题。
首先，请考虑以下情形：
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text overflow',
home: Scaffold(
appBar: AppBar(
title: Text("MyApp"),
),
body: Column(
children: List.generate(100, (idx) => Text("Short text"))
),
),
);
}
}
这是一个列窗口小部件，它在垂直方向上溢出，由Flutter 清楚地报告：
I/Flutter ( 8390): The following message was thrown during layout:
I/Flutter ( 8390): A RenderFlex overflowed by 997 pixels on the bottom.
I/Flutter ( 8390):
I/Flutter ( 8390): The overflowing RenderFlex has an orientation of Axis.vertical.
现在，在列中一行：
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text overflow',
home: Scaffold(
appBar: AppBar(title: Text("MyApp"),),
body: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(String.fromCharCodes(List.generate(100, (i) => 65)))
],
),
],
),
),
);
}
}
现在，溢出问题出现在右侧。
我已经在列中插入了一行，只是为了类似于您的情况，但是 如果您使用简单的Row小部件Row，Column则会出现完全相同的问题：并且 这两个Flex小部件都是：
考虑这种布局，一行两行，stiched togheter
Column(
children: <Widget>[
Row(
children: <Widget>[Text('AAAA'), Text('ZZZZ')],
),
],
),
现在，第一个项目 Expanded 将填满所有可用空间：
Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(child: Text('AAAA')),
Text('ZZZZ')],
),
],
),
最后，当您展开一个很长的字符串时，您会注意到文本在横轴方向上环绕：
Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(child: Text(String.fromCharCodes(List.generate(100, (i) => 65)))),
Text('ZZZZ')],
),
],
),
602392714
清零编程群