Question

在这段代码中，我尝试在Stack小部件中绘制一个Text小部件。但是，堆栈小部件无法调整其大小，因此文本会被截断。

如何定位文本，同时仍然有助于堆栈的大小？

return Column(
  children: <Widget>[
    Stack(
      children: <Widget>[
        Container(height:20, width: 20, color: Colors.green,),
        Positioned(
          top: 10,
          child: Text('Does not render because the stack is only 20x20'),
        )
      ],
    ),
    Container(height:40, width: 40, color: Colors.red,)
  ],
);

Answer 1

如文档中所述：“堆栈本身的大小将包含所有未定位的子项，这些子项根据对齐方式定位（在从左到右的环境中，默认值为左上角，在右上角为默认值）在从右到左的环境中）。”，因此我们不能将堆栈本身限制为定位的小部件。但是我认为将Overflow.visible设置为overflow将对您有用。

return Column(
  children: <Widget>[
    Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Container(height:20, width: 20, color: Colors.green,),
        Positioned(
          top: 10,
          child: Text('Does not render because the stack is only 20x20'),
        )
      ],
    ),
    Container(height:40, width: 40, color: Colors.red,)
  ],
);

如何使Stack小部件将自己限制为Flutter中的“定位儿童”？

1 个答案: