如何让 Stack 小部件将自己约束到 Flutter 中的定位子项？

Question

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

如何定位文本同时仍会影响 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,)
  ],
);

Answer 2

Overflow 属性已被弃用，因此现在使用此属性：

 clipBehavior: Clip.none,

例子：

return Column(
  children: <Widget>[
    Stack(
      clipBehavior: Clip.none,
      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,)
  ],
);