如何防止多行文本小部件在放置在行中时被剪裁？

Question

我的 Flutter 应用程序中有一个包含长文本字符串的文本小部件。它被放置在一个具有固定宽度的 Container 中。默认情况下，文本字符串换行。

但是，当我尝试将该文本小部件插入行小部件时，文本字符串突然切换为单行，并在右侧被剪裁。

有什么简单的方法可以让文本小部件在行内时保持其原始多行行为？

这是我一直在使用的代码：

var container = new Container (
  child: new Row (
    children: [
      new Icon (Icons.navigate_before),
      new Text ("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
      new Icon (Icons.navigate_next),
    ],
  ),
  decoration: new BoxDecoration (
    backgroundColor: Colors.grey[300],
  ),
  width: 400.0,
);

Answer 1

要知道的最重要的事情是，列或行中的子窗口小部件在默认情况下占用space所需的数量。

子元素本身不受 row/column 的主轴尺寸 (width/height) 的限制，如果它们更大就会溢出。 （因此，为什么您会在右侧看到红色溢出指示器）

您的行为不是由于文本小部件，而是由于布局本身。您需要将文本小部件的宽度限制为行布局中两个图标之间的剩余宽度。

通过将子元素包装在 Expanded 中，您可以明确描述每个子小部件在行内的大小。

A Expanded 将根据 row/column 中的其他 Expanded 和剩余的 space.

自行调整大小

让我们看一个示例来了解 Expanded 如何在行或列中工作：

var row = new Container(
  width: 400.0,
  height: 100.0,
  child: new Row(
    children: [
      // Red Bar
      // This will take up 50dp always, since it is not wrapped by a Expanded
      new Container(
        width: 50.0,
        decoration: new BoxDecoration(
          backgroundColor: Colors.red[500],
        )
      ),
      // Green Bar
      // This will take up 1/3 of the remaining space (1/3 of 350dp)
      new Expanded(
        flex: 1,
        child: new Container(
          decoration: new BoxDecoration(
            backgroundColor: Colors.green[500],
          )
        ),
      ),
      // Blue Bar
      // This will take up 2/3 of the remaining space (2/3 of 350dp)
      new Expanded(
        flex: 2,
        child: new Container(
          decoration: new BoxDecoration(
            backgroundColor: Colors.blue[500],
          )
        ),
      )
    ]
  ),
);

呈现这个：

让我们分解一下：

红色条始终将是 50dp 长，因为它没有包裹在 Expanded 中。即使它比父容器大，它也会有 50dp 的宽度。
现在我们有 350dp (400-350) 可以在绿色条和蓝色条之间分配。
我们现在要做的是将每个 Expanded 的所有剩余弹性值相加，得到：1[green] + 2[蓝色]=3
现在每个Expanded将根据Expanded的flex值和所有Expanded的累积flex值占剩余space的比例：Green = 1 /3,蓝=2/3.
因此绿色条的宽度为 1/3 * 350 = 116.67dp
蓝色条的宽度为 2/3 * 350 = 233.33dp

回到原来的问题：您需要做的就是将文本小部件包装在 Expanded 中。默认情况下，Expandeds 的 flex 值为 1。由于行中只有一个 Expanded (1/1 = 100%)，因此该文本将占据行中剩余的 space。

解决方案：

var container = new Container (
  child: new Row (
    children: [
      new Icon (Icons.navigate_before),
      new Expanded(
        child: new Text ("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
      ),      
      new Icon (Icons.navigate_next),
    ],
  ),
  decoration: new BoxDecoration (
    backgroundColor: Colors.grey[300],
  ),
  width: 400.0,
);

如何防止多行文本小部件在放置在行中时被剪裁？

How can I prevent a multi-line Text widget from getting clipped when placed within a Row?

dart

flutter