颤振包装文本而不是溢出

Question

在 Flutter 中创建带有长字符串的文本小部件时，它会在直接放入列中时换行其文本。但是，当它在 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

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

That Way Column 可以占用文本所需的可用 space。

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 2

Row 和 Column 是 Flex 小部件并且不滚动，如果没有足够的 space flutter 会引发溢出错误。

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

在docs中没有明确说明，但除了扩展以填充主轴中可用的space之外，Expanded和Flexible包裹在cross-axis 方向.

说来话长

循序渐进的方法可能有助于理解问题。

首先，考虑这个场景：

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 小部件：

他们 children 朝一个方向布置；
它们不滚动，所以如果 children 占用的空间比 space 多，则会引发溢出错误；

扩展小部件

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

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

现在第一项Expanded填满所有可用的space:

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

最后，当您展开一个很长的字符串时，您会注意到文本在 cross-axis 方向换行：

Column(
  children: <Widget>[
    Row(
      children: <Widget>[
        Expanded(child: Text(String.fromCharCodes(List.generate(100, (i) => 65)))),
        Text('ZZZZ')],
    ),
  ],
),

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

          )
          ],
        ))
      );

截图：

内部展开后交换：

  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

Flutter 提供了一个非常有用的 Widget，叫做 Wrap，它可以很容易地水平和垂直包裹它的 children。

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

Answer 5

在 Column 上使用 Flexible 小部件，因为它只需要 space 可用。

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 6

像我使用的那样使用 Expanded 并解决了问题...如果使用得当，Expanded 可以解决这个文本溢出问题。下面是我的代码：

Row(
                              children: <Widget>[
                                Expanded(
                                  flex: 1,
                                  child: Icon(
                                    Icons.watch_later_outlined,
                                    size: 25,
                                    color: Colors.blueAccent,
                                  ),
                                ),
                                Expanded(
                                  flex: 5,
                                  child: Text("Write your long text here"
                                  ),
                                ), // name
                              ]),

Answer 7

Text(
     "I have read and agree to the end \n user agreement.");

您可以使用 \n 在新行中打印长文本。在这里我附上了输出图片

颤振包装文本而不是溢出

flutter wrap text instead of overflow

flutter

flutter-layout

说来话长

扩展小部件