11

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

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

什么是保持 Text 小部件在 Row 内时的原始多行行为的简单方法？

多线切换到单线

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

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

1 回答 1

8

要知道的最重要的事情是，列或行中的子小部件默认占用它们所需的空间。

子元素本身不受行/列的主轴大小（宽度/高度）的限制，如果它们更大，则会溢出。 （因此，为什么您会在右侧看到红色溢出指示器）

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

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

Expanded 将根据行/列中的其他 Expanded 和剩余空间来调整自身大小。

让我们看一个示例来了解 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],
          )
        ),
      )
    ]
  ),
);

这呈现了这一点：

代码输出

让我们分解一下：

  1. 红条总是50dp 长，因为它没有包含在 Expanded 中。即使它比父容器大，它也会有 50dp 的宽度。

  2. 现在我们有 350dp (400-350) 在绿条和蓝条之间分配。

  3. 我们现在要做的是将每个 Expanded 的所有剩余 flex 值相加，得到：1 [green] + 2 [blue] = 3

  4. 现在每个 Expanded 将是剩余空间的一部分，基于 Expanded 的 flex 值和所有 Expanded 的累积 flex 值： Green = 1/3， Blue = 2/3。

  5. 所以绿色条的宽度为 1/3 * 350 = 116.67dp

  6. 蓝色条的宽度为 2/3 * 350 = 233.33dp

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

解决方案：

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,
);
于 2017-01-18T19:44:55.267 回答