颤动换行而不是溢出文本

Question

在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. ")
              ],
            ),
          ],
        ),
      ],
    ),
  ), 
)

Answer 1

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

Answer 2

您需要Column使用- Expanded或Flexible小部件包装最后一个。

这样Column可以占用文本所需的可用空间。

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.
              Expanded(
                child: 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 3

避免行或列中的文本溢出。确保将文本包裹在“灵活”或“扩展”小部件下。将文本包裹在上述小部件之一下后，它将把大文本包裹成多行。分享一个例子：

扩展小部件之前：

return  Center(child:
        Container(
        padding: EdgeInsets.only(left: 50, right: 50),
          child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                height: 200,
                 child: Text('It is a multiline text It does not  auto warp the text.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white)),

          )
          ],
        ))
      );

截屏 ：

在 Wapping 里面 Expanded 之后：

  return  Center(
        child: Padding(padding:  EdgeInsets.only(left: 50, right: 50),
          child:  Row(
            mainAxisAlignment: MainAxisAlignment.center,

            children: <Widget>[
              Expanded(

                  child: Text('It is a multiline text It does not  auto warp the text.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white))),
            ],
          ),
        )
      );

截屏 ：

Answer 4

使用FlexibleWidget，Column因为它只占用所需的可用空间。

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.
            Flexible(
              child: 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 5

Flutter 提供了一个非常有用的 Widget，称为Wrap，它可以轻松地水平和垂直地包裹其子组件。

Wrap(
  direction: Axis.horizontal, //default
  alignment: WrapAlignment.center,
  children: [
    Text(),   //you can use any other widget
    Text(),
    Text(),
    Text(),
    Text(),
  ],
),