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

需要知道的最重要的一点是，列或行中的子窗口小部件占用的空间与它们需要的空间相同.

子元素本身不受行/列的主轴大小(宽度/高度)的限制，如果它们较大，则会溢出.(Hence, why you see the red overflow indicator on the right)个

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

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

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

让我们看一个示例，以了解扩展在行或列中是如何工作的:

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. 红色条always将是50dp长的，因为它没有被包裹在展开的.即使它比父容器大，它的宽度也将为50dp.

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

3. 我们现在要做的是将每个展开项的所有剩余弹性值相加，结果是:1[绿色]+2[蓝色]=3

4. 现在，根据展开的弹性值和所有展开的累计弹性值，每个展开的空间将是剩余空间的比例:绿色=1/3，蓝色=2/3.

5. 因此，绿色条的宽度为1/3*350=116.67dp

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

回到你最初的问题:你需要做的就是把你的文本小部件包装在一个扩展的文件中.默认情况下，Expandeds的弹性值为1.由于行中只展开了一个(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,
);