颤动换行而不是溢出文本 [英] flutter wrap text instead of overflow

问题描述

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

When creating a Text widget with a long string in Flutter, it wraps its text when put directly in a Column. However, when it is inside Column-Row-Column, the text overflows the side of the screen.

如何在Column-Row-Column内包装文本? 造成这种差异的原因是什么?在我看来，上一列的任何子级都具有相同的宽度是合乎逻辑的吗?为什么宽度不受限制?

How do I wrap text inside a Column-Row-Column? And what is the reason for this difference? It would seem logical to me that any child of the upper column would have the same width? Why is the width unbounded?

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

I tried putting the text in Expanded, Flexible, Container and FittedBox, based on other answers, but it leads to new errors I don't understand.

示例:

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小部件，并且如果没有足够的空间抖动，则不会滚动，从而引发溢出错误.

Row and Column are Flex widget and don't scroll, if there is not enough space flutter raises an overflow error.

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

If this occurs an Expanded or a Flexible widget may be used to wrap a long text.

在 docs 中，它没有明确说明，但可以扩展为填充主轴上的可用空间，Expanded和Flexible在横轴方向上环绕.

In the docs it is not clearly stated, but beyond expanding to fill the available space in the main axis, Expanded and Flexible wraps in the cross-axis direction.

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

A step by step approach may help to understand the problem.

首先，请考虑以下情形:

First, consider this scenario:

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"))
        ),
      ),
    );
  }
}

这是一个列窗口小部件，如颤振清楚地报告的那样，它在垂直方向上溢出:

It is a column widget that overflows on vertical direction as clearly reported by 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)))
              ],
            ),
          ],
        ),
      ),
    );
  }
}

现在，溢出问题出现在右侧.

Now the overflow problem appears on the right side.

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

I have inserted a Row in a Column just to resemble your case, but the exact same problem emerge if you use a simple Row widget: Row and Column are both Flex widgets:

• 他们沿一个方向布置孩子；
• 它们不会滚动，因此如果子级占用的空间超过可用空间，则会引发溢出错误；

考虑此布局，一行包含两个项目，stiched togheter

Consider this layout, a row with two items, stiched togheter

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

现在，第一个项目Expanded会填满所有可用空间:

Now the first item Expanded to fill all the available space:

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

最后，当您扩展一个很长的字符串时，您会注意到文本在横轴方向上换行:

Finally, when you expand a very long string you will notice that the text wraps in the cross-axis direction:

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

这篇关于颤动换行而不是溢出文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！