dart - 如何让 Stack 小部件将自身限制为 Flutter 中的 Positioned 子部件？

Question

在这段代码中，我尝试在 Stack 小部件中绘制一个 Text 小部件。但是，Stack 小部件不会根据定位的小部件自行调整大小，因此文本会被截断。

如何定位文本，同时仍然影响 Stack 的大小？

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 对你有用。

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