Flutter中Expanded包裹的Stack子组件被其他Widget裁剪如何解决？

解决方案 #

Flutter中Stack组件默认开启了超出边界裁剪逻辑，你只需要给Stack配置clipBehavior属性为Clip.none即可关闭裁剪，超出Stack自身布局范围的内容也会正常渲染，符合你允许溢出提示的需求。

修改后的代码如下：

Container(
  padding: EdgeInsets.only(left: 16, right: 20, top: 16, bottom: 16),
  height: 68,
  width: 200,
  color: Colors.green,
  child: Row(
    children: [
      Expanded(
        child: Container(
          child: Stack(
            // 新增此行关闭自动裁剪
            clipBehavior: Clip.none,
            children: <Widget>[
              Positioned(
                left: 0,
                child: Container(
                  height: 36,
                  width: 60,
                  decoration: BoxDecoration(
                    color: Colors.black,
                    shape: BoxShape.circle,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      SizedBox(
        width: 4,
      ),
      Container(
        width: 120,
        height: 30,
        color: Colors.red,
      ),
    ],
  ),
)

内容的提问来源于stack exchange，提问作者dontknowhy