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

1 回答

• 7

  最重要的是要知道列或行中的子窗口小部件占用默认情况下所需的空间 .

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

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

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

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

  让我们看一个示例来了解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添加所有剩余的flex值，这给了我们： 1 [green] 2 [blue] = 3

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

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

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

  回到原始问题：您需要做的就是将文本小部件包装在Expanded中 . 默认情况下，Expandeds的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,
  );
  

  回复于 2024-04-26T11:38:53+08:00