flutter 换行文本而不是溢出

Question

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

如何在 Column-Row-Column 中换行？ 造成这种差异的原因是什么？对我来说，上列的任何 child 都具有相同的宽度似乎是合乎逻辑的？为什么宽度是无界的？

根据其他答案，我尝试将文本放入 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. ")
              ],
            ),
          ],
        ),
      ],
    ),
  ), 
)

Answer 1

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

如果发生这种情况，可以使用 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)))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

现在右侧出现溢出问题。

我在 Column 中插入了一个 Row 只是为了类似于您的情况，但是如果您使用一个简单的 Row 小部件，则会出现完全相同的问题: Row 和 Column 都是 Flex 小部件:

• 他们将 child 安排在一个方向；
• 它们不会滚动，因此如果子项占用的空间多于可用空间，则会引发溢出错误；

展开的小部件

考虑这种布局，一行有两个项目，缝合在一起

Column(
  children: <Widget>[
    Row(
      children: <Widget>[Text('AAAA'), Text('ZZZZ')],
    ),
  ],
),

现在第一项扩展来填满所有可用空间:

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')],
    ),
  ],
),