颤动换行文本而不是溢出 [英] 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.

如何在列-行-列中换行?这种差异的原因是什么?在我看来，上一列的任何子项都具有相同的宽度似乎是合乎逻辑的?为什么宽度无界?

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

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.

首先，考虑这个场景:

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清楚地报告的那样:

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:

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

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

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屋！