flutter - flutter 换行而不是溢出文本

在Flutter中创建带有长字符串的Text小部件时，将其文本直接放在Column中时会自动换行。但是，当它在Column-Row-Column内时，文本会溢出屏幕的一侧。

如何在Column-Row-Column内换行？
造成这种差异的原因是什么？在我看来，上一列的任何子级都具有相同的宽度是合乎逻辑的吗？为什么宽度无界？

我尝试根据其他答案将文本放在Expanded，Flexible，Container和FittedBox中，但这会导致新的错误，我无法理解。

例子:

MaterialApp(
  title: 'Text overflow',
  home: Scaffold(
    appBar: AppBar(title: Text("MyApp"),),
    body: Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            // The long text inside this column overflows. Remove the row and column above this comment and the text wraps.
            Column(
              children: <Widget>[
                Text("Short text"),
                Text("Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ")
              ],
            ),
          ],
        ),
      ],
    ),
  ),
)

最佳答案

Row和Column是Flex小部件，如果空间不足，则不会滚动，会引发溢出错误。

如果发生这种情况，可以使用Expanded或Flexible小部件来包装长文本。

在docs中，它没有明确说明，但是除了扩展以填充主轴上的可用空间之外，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和Column都是Flex小部件:

他们将 child 安排在一个方向上；

它们不会滚动，因此，如果子级占用的空间超出可用空间，则会引发溢出错误；

扩展小部件

考虑这种布局，一行有两个项目，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')],
    ),
  ],
),

关于flutter - flutter 换行而不是溢出文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54634093/