颤动换行而不是溢出文本

小编典典

颤动换行而不是溢出文本

flutter

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

阅读 506

2020-08-13

共1个答案

小编典典

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

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

在文档中并没有明确说明，而是扩展以填充主轴上的可用空间，Expanded并Flexible沿横轴方向包装。

The long story

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

首先，请考虑以下情形：

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

2020-08-13