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

Question

In this code, I try to draw a Text widget within a Stack widget. However, Stack widgets do not size themselves to positioned widgets, so the text gets cut off.

How can the text be positioned while still contributing to the Stack's size?

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

As mentioned in the documentation "The stack sizes itself to contain all the non-positioned children, which are positioned according to alignment (which defaults to the top-left corner in left-to-right environments and the top-right corner in right-to-left environments).", So we can't constraint stack itself to positioned widgets. But I think setting overflow to Overflow.visible will work for you.

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

The Overflow property was deprecated so now use this property:

 clipBehavior: Clip.antiAliasWithSaveLayer,

Example:

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