Flutter如何在Card组件上方正确叠加定位显示图片

• Card组件默认开启边界裁剪，超出Card范围的子组件会被自动裁切
• Stack组件默认clipBehavior属性为Clip.hardEdge，同样会裁剪超出自身边界的内容
• 你设置的头像bottom:40，高度100的头像会有40像素的部分超出高度为100的外层容器上边界，触发了裁剪逻辑

按以下步骤修改代码即可：

1. 给Card组件添加属性clipBehavior: Clip.none，关闭Card的自动裁剪
2. 给Stack组件添加属性clipBehavior: Clip.none，关闭Stack的边界裁剪

SizedBox(
  width: 500,
  height: 100,
  child: Container(
    child: Padding(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      child: Card(
          clipBehavior: Clip.none, // 关闭Card自动裁剪
          color: Colors.grey.shade400,
          child: Stack(
            clipBehavior: Clip.none, // 关闭Stack边界裁剪
            children: [
              Positioned(
                bottom: 40,
                left: 150,
                child: CircleAvatar(
                  child: ClipOval(
                    child: Image.asset(
                      "assets/images/guy.jpg",
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                    ),
                  ),
                  backgroundColor: Colors.transparent,
                  radius: 50,
                ),
              ),
            ]),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15),
          ),
          elevation: 10),
    ),
  )
)

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